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