Webpack 1.0 模塊打包器

Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader 的轉換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

what-is-webpack:  http://webpack.github.io/docs/what-is-webpack.html

命令行：

cd ...  //進入文件
mkdir ... //新建文件
npm init //初始化
——————————
npm install webpack --save-dev //安裝webpack
atom //打開當前目錄
//新建hello.js文件
webpack hello.js hello.bundle.js //打包文件：新建的文件名 打包后的文件名

安裝完webpack后的文件：

新建style.css , world.js 文件，在hello.js文件中引入world.js 和 style.css 文件：

npm install css-loader style-loader --save-dev //要安裝引入css文件的插件，要不就會出錯

或者直接在命令行綁定；后可直接查看進度、模塊、原因等；

webpack --config webpack.dev.config.js //運行配置文件webpack.dev.config.js
npm install html-webpack-plugin --save-dev //安裝插件html-webpack-plugin

在命令行配置：

或者在package.json中配置：

<%  %> //運行
<%=  %> //取值

files：

options：

配置文件：（分為單頁面HTML和多頁面HTML）

可以進行一系列的配置，支持如下的配置信息

• title: 生成頁面的 title 元素
• filename: 輸出的 HTML 文件名，默認是 index.html, 也可以直接配置帶有子目錄
• template: 模板文件路徑，支持加載器，比如 html!./index.html
• inject: true | 'head' | 'body' | false  ,注入所有的資源到特定的 template 或者 templateContent 中，如果設置為 true 或者 body，所有的 javascript 資源將被放置到 body 元素的底部，'head' 將放置到 head 元素中
• favicon: 添加特定的 favicon 路徑到輸出的 HTML 文件中
• minify: {} | false , 傳遞 html-minifier 選項給 minify 輸出
• hash: true | false, 如果為 true, 將添加一個唯一的 webpack 編譯 hash 到所有包含的腳本和 CSS 文件，對於解除 cache 很有用
• cache: true | false，如果為 true, 這是默認值，僅僅在文件修改之后才會發布文件
• showErrors: true | false, 如果為 true, 這是默認值，錯誤信息會寫入到 HTML 頁面中
• chunks: 添加某些塊
• chunksSortMode: 允許控制塊在添加到頁面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
• excludeChunks: 除了某些塊剩余的所有塊 

若是在生成的文件中直接是地址引入，會增加http請求；若要優化，可直接引入js內容：

　　以下是github中提供的源代碼示例：

以下為測試結果：

 

 

 

Loader：Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進行轉換；eg: .css、.less……

解析以ES6寫的js文件：

npm install --save-dev  babel-loader babel-core //安裝babel，解析ES6
npm install --save-dev nanel-preset-latest //安裝解析ES6最新版本的插件

可在babel的官網查看：

exclude和include后的路徑為相對路徑，在npm run webpack時，時間比較慢；原因是因為loaders的文件比較多，寫為相對路徑也比較慢，修改為以下：(__dirname：該行代碼所在的目錄)

 

query也可不寫，在package.json里配置babel插件：

解析css文件：

npm install postcss-loader --save-dev //安裝解析css的插件
npm install autoprefixer --save-dev //安裝添加前綴的插件
//css文件中display：flex; 因為瀏覽器的兼容性,flex要加前綴-wibkit- / -moz-等

因之前安裝了css-loader 和 style-loader,所以這里不用安裝；

解析less及scss文件：

npm install less-loader --save-dev //安裝解析less的插件
npm install scss-loader --save-dev //安裝解析scss的插件

*若在.less文件中有@import的寫法，可不用加?importLoader,less插件會解析；但是在css文件中有import的寫法，一定要加;

處理模板文件：

npm install html-loader --save-dev //安裝解析模板文件的插件
npm install ejs-loader --save-dev //安裝解析.ejs和.tpl文件的插件,都用ejs.loader

 

處理圖片：

 //安裝解析圖片的插件
npm install file-loader --save-dev
npm install url-loader --save-dev
npm install image-webpack-loader --save-dev

url-loader的處理方法：若 圖片的大小 大於 limit ， 給file-loader處理；若 小於 limit，圖片就轉為base64；

image-webpack的處理方法：使用file-loader和url-loader，壓縮圖片的大小；

學習網址：http://webpack.github.io/docs/

　　　　　http://www.imooc.com/video/14186/0