Webpack--自学笔记
原文--http://webpack.github.io/docs/tutorials/getting-started/
什么是webpack？
webpack是一个模块打包器。webpack把模块(s)连同它的依赖一起打包生成包含这些模块的静态资源。
1.怎么安转webpack
首先需要安装node.js，在命令行中输入：
$ npm install webpack -g
2.怎么使用webpack
1.从一个空的文件夹开始，首先创建：entry.js,然后输入：
document.write("It works.");接着再添加一个html文件：
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>在这之后，在命令行中运行：
$ webpack ./entry.js bundle.js
它将编译文件，并且会创建一个文件包。命令运行成功之后，显示：
Version: webpack 1.13.3
Time: 24ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
chunk {0} bundle.js (main) 28 bytes [rendered]
[0] ./tutorials/getting-started/setup-compilation/entry.js 28 bytes {0} [built]在浏览器打开index.html，会看见 “It works.”。
2.创建第二个个文件content.js，添加内容：
module.exports = "It works from content.js.";
更新entry.js
- document.write("It works.");
+ document.write(require("./content.js"));重新编译：
$ webpack ./entry.js bundle.js
刷新浏览器之后，回看到“It works from content.js.”。
这些文件(称为模块)都包含在bundle.js。
一个小的运行时提供了需要函数和在需要时执行的依赖关系。
3.添加css文件
(他们需要安装在本地没有- g),这将为您创建一个node_modules文件夹,加载器将运行。
创建一个css文件，style.css
body {
background: yellow;
}然后更新entry.js：
+ require("!style!css!./style.css");
document.write(require("./content.js"));通过 “!style!css!” 这样的前缀，可以把文件进行一系列的转化，最终变成 javascript 的一个模块。
命令行绑定 loaders
如果我们不想写过长的 require : require("!style!css!./style.css");，简化为require("./style.css")
或者我们喜欢灵活定制 css 文件的转化方式。
修改 entry.js
//require("!style!css!./style.css");
require("./style.css");
document.write(require("./content.js"));执行下面的命令：
1 $ webpack ./entry.js bundle.js --module-bind "css=style\!css"
官网说明在这有个错误，css=style\!css 里面少了个反斜杠，原因是叹号在 bash 里有特殊意义
4.添加 webpack.config.js
项目根目录下新建一个webpack.config.js ，然后通过一句命令$ webpack就能打包我们的项目。
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};在命令行，输入：
webpack
webpack 命令会尝试读取同目录中的 webpack.config.js 文件。你会看到：
Version: webpack 1.13.3
Time: 148ms
Asset Size Chunks Chunk Names
bundle.js 10.7 kB 0 [emitted] main
chunk {0} bundle.js (main) 8.85 kB [rendered]
[0] ./tutorials/getting-started/config-file/entry.js 64 bytes {0} [built]
[1] ./tutorials/getting-started/config-file/style.css 943 bytes {0} [built]
[2] ../~/css-loader!./tutorials/getting-started/config-file/style.css 197 bytes {0} [built]
[3] ../~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[4] ../~/style-loader/addStyles.js 6.09 kB {0} [built]
[5] ./tutorials/getting-started/config-file/content.js 45 bytes {0} [built]和我们想要的颜色…
webpack --progress --colors
我们不想在每次修改后手动编译…
webpack --progress --colors --watch
Webpack可以缓存不变的模块和输出文件编译。
启用高速缓存的时候,webpack保持在内存中每个模块并将重用它如果不是改变了。
5.开发服务器
打开http://localhost:8080 / webpack-dev-server /包在您的浏览器中。
npm install webpack-dev-server -g webpack-dev-server --progress --colors