welcom
to learn
- How to install webpack
- How to use webpack
- How to use loaders
- How to use the development server
安装
首先保证安装了node.js$ npm install webpack -g //这将webpack命令生效setup the compilation--安装编译
空目录开始，创建以下文件//entry.js document.write("It works."); //index.html <html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="bundle.js" charset="utf-8"></script> </body> </html>然后运行
$ webpack ./entry.js bundle.js
//编译文件并创建一个bundle文件
//正常则显示如下结果
Hash: ca188ee5789bb780fcec
Version: webpack 1.13.2
Time: 73ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./entry.js 28 bytes {0} [built]打开index.html,将显示It works
再加一个文件
添加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将分析你的entry文件和其他文件的依赖。这些文件（所谓的modules）也将被你的bundle.js引入。webpack将给每一个模块一个唯一的id并在bundle.js文件中保持所有模块可访问。只有entry模块开始时被执行。一个小的运行时提供有require函数并且当required的时候执行。
首个加载者
我们想用一个css文件到app，webpack只能操作原生js，因此我们需要css-loader 去处理css文件。同时，我们也需要style-loader去应用styles在css文件中
运行npm install css-loader style-loader 以安装loader（他们需要局部安装，没有-g）。这将构建一个node——modules文件夹，这是loaders生存的地方
添加style.css并写入body { background: yellow; }更新entry.js
+ require("!style!css!./style.css");
document.write(require("./content.js"));编译并刷新浏览器将看到样式生效
By prefixing loaders to a module request, the module went through a loader pipeline. These loaders transform the file content in specific ways. After these transformations are applied, the result is a JavaScript module.
通过为loaders添加加载器，这些模块才能通过一个loader通道。这些loaders以特定方式转化文件内容。转换后就生成js模块。
绑定loaders
不想写那么长的requires——require("!style!css!./style.css")，我们可以绑定文件的扩展到loaders因此我们只需要这样写-——require("./style.css")
根系entry.js
- require("!style!css!./style.css");
+ require("./style.css");
document.write(require("./content.js"));编译
webpack ./entry.js bundle.js --module-bind 'css=style!css'
//效果同上config文件
我们想移动确认选项到config文件，添加webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};如此，我们可以只运行
webpack就编译
Hash: 5fe3ee0583ac412b5b0c
Version: webpack 1.13.2
Time: 856ms
Asset Size Chunks Chunk Names
bundle.js 11.8 kB 0 [emitted] main
[0] ./entry.js 137 bytes {0} [built]
[5] ./content.js 45 bytes {0} [built]
+ 4 hidden modules在当前目录中，webpack命令行将加载webpack.config.js。
美化输出
如果项目的生成编译可能久一点，我们想展示一些进度条，我们想要颜色，这时我们可以通过以下命令实现。webpack --progress --colors监视模式
每次变动后，我们不想人为地去重编译，可以这样做。webpack --progress --colors --watchwebpack会缓存未改变的模块并在编译间输出文件。
当应用监听模式，webpack为所有文件安装了文件监听器，用到编译进程中。任何变动被觉察，它将重新编译。当缓存正常，webpack将每个模块记忆性存储并当其不变时重用。
开发服务器----这样更好
npm install webpack-dev-server -g
webpack-dev-server --progress --colors这将绑定一个小的express服务器到localhos:8080,服务你的静态资源文件以及bundle（自编译）。当重新编译包（SockJS）时，它会自动更新浏览器页面。在浏览器打开http://localhost:8080/webpack-dev-server/bundle
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)