webpack: The getting-started tutorial doesn't work on windows

I’m new to webpack 1.9.11 and are following the getting-started tutorial. Unfortunately I can only get to Binding loaders, where I get the following error:

C:\Users\dotnet\Projects\playground\webpack_tut (master)
λ webpack ./entry.js bundle.js --module-bind 'css=style!css'
Hash: 3fd1ef8aa00068f12535
Version: webpack 1.9.11
Time: 52ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.72 kB       0  [emitted]  main
   [0] ./entry.js 65 bytes {0} [built] [1 error]
   [1] ./style.css 0 bytes [built] [failed]
   [2] ./content.js 47 bytes {0} [built]

ERROR in ./style.css
Module parse failed: C:\Users\dotnet\Projects\playground\webpack_tut\style.css Line 1: Unexpected token {
You may need an appropriate loader to handle this file type.
| body {
|     background: yellow;
| }
 @ ./entry.js 1:0-22

My entry.js:

require("./style.css");
document.write(require("./content.js"));

My style.css:

body {
    background: yellow;
}

npm list --depth=0:

C:\Users\dotnet\Projects\playground\webpack_tut
├── css-loader@0.14.5
├── node-libs-browser@0.5.2
└── style-loader@0.12.3

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 34 (1 by maintainers)

Most upvoted comments

Try double quotes

webpack ./entry.js bundle.js --module-bind "css=style!css"

agundermann on Jun 29, 2015

+1 on single quotes. May be worth updating the docs?

dbashford on Sep 8, 2015

Single quote is not worked to me with webpack version 1.12.14, and node v4.2.2 in Windows 7. Run command: webpack entry.js bundle.js --module-bind 'css=css!style'

Error message as below

λ webpack entry.js bundle.js --module-bind 'css=css!style'
Hash: 36de1388af70066e460d
Version: webpack 1.12.14
Time: 43ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.72 kB       0  [emitted]  main
   [0] ./entry.js 67 bytes {0} [built] [1 error]
   [1] ./style.css 0 bytes [built] [failed]
   [2] ./content.js 46 bytes {0} [built]

ERROR in ./style.css
Module parse failed: D:\Leo\Project\nodejs\webpack-test\style.css Line 1: Unexpected token {
You may need an appropriate loader to handle this file type.
| body {
|     background: yellow;
| }
 @ ./entry.js 1:0-22

However, it is fine when I use webpack.config.js.

PoacherBro on Mar 3, 2016

add webpack.config.js

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

using: webpack or `webpack ./entry.js bundle.js --module-bind ‘css=style!css’`` is ok

xdliuyong on Sep 2, 2015

@dotnetCarpenter Have you installed style-loader and css-loader as well?

sairion on Jun 24, 2015