首页 > 代码库 > Webpack--自学笔记
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="http://www.mamicode.com/bundle.js" charset="utf-8"></script> </body></html>
在这之后，在命令行中运行：
$ webpack ./entry.js bundle.js
它将编译文件，并且会创建一个文件包。命令运行成功之后，显示：
Version: webpack 1.13.3Time: 24ms Asset Size Chunks Chunk Namesbundle.js 1.42 kB 0 [emitted] mainchunk {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.”。
webpack将分析接口文件依赖其他文件。这些文件(称为模块)都包含在bundle.js。
webpack会给每个模块一个惟一的id和保存所有模块访问bundle.js id的文件。只有输入模块是在启动时执行的。一个小的运行时提供了需要函数和在需要时执行的依赖关系。
3.添加css文件
webpack只能处理JavaScript本身,所以我们需要css-loader处理CSS文件。我们还需要style-loader CSS文件应用样式。
运行npm安装css-loader style-loader安装加载器。(他们需要安装在本地没有- 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.3Time: 148ms Asset Size Chunks Chunk Namesbundle.js 10.7 kB 0 [emitted] mainchunk {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安装文件的所有文件,编译过程中使用。如果发现任何改变,它会再次运行编译。启用高速缓存的时候,webpack保持在内存中每个模块并将重用它如果不是改变了。
5.开发服务器
这结合一个小express服务器在localhost:8080是静态资产以及包(自动编译)。结束时它会自动更新浏览器页面重新编译(SockJS)。打开http://localhost:8080 / webpack-dev-server /包在您的浏览器中。
npm install webpack-dev-server -gwebpack-dev-server --progress --colors
Webpack--自学笔记