本文用到的版本是 webpack v1
1
| sudo npm install webpack -g
|
1
2
| npm install webpack@1.14.x --save
node_modules/.bin/webpack entry.js bundle.js
|
1
| sudo npm install webpack@1.14.x -g
|
1
2
| 卸载全局安装模块
npm uninstall -g webpack
|
由于现在webpack出了2版本，简单起见我都是项目本地方式运行
1
| node_modules/.bin/webpack ...
|
1
2
3
4
5
6
7
8
| <html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
|
1
| document.write('It works.')
|
1
| node_modules/.bin/webpack ./entry.js bundle.js
|
1
| module.exports = "It works from content.js.";
|
1
| + document.write(require("./content.js"));
|
1
| node_modules/.bin/webpack ./entry.js bundle.js
|
1
| npm install css-loader style-loader --save
|
1
2
3
| body {
background: yellow;
}
|
1
2
| require("!style!css!./style.css");
document.write(require("./content.js"));
|
1
| node_modules/.bin/webpack ./entry.js bundle.js
|
1
2
| require("./style.css");
document.write(require("./content.js"));
|
1
| node_modules/.bin/webpack ./entry.js bundle.js --module-bind 'css=style!css'
|
加入了参数 –module-bind “css=style!css”
1
2
3
4
5
6
7
8
9
10
11
12
| module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
|
1
| node_modules/.bin/webpack
|
1
| node_modules/.bin/webpack --progress --colors
|
1
| node_modules/.bin/webpack --watch
|
1
2
3
| sudo npm install webpack-dev-server -g
or
npm install webpack-dev-server@1.x --save
|
1
2
3
| webpack-dev-server --progress --colors
or
node_modules/.bin/webpack-dev-server --progress --colors
|
http://localhost:8080
1
| node_modules/.bin/webpack --display-error-details
|
http://webpack.github.io/docs/usage.html
