webpack使用總結：
入門使用：
這個報錯說明需要安裝相應的Loader,並在引用時指定相應的loader
執行成功如圖：
chunk指相應的區塊。
要是css引入正確：必須引入css-loader，要使改變的css生效，要引入style-loader;
各個js的函數調用只能在各自的函數中寫，引入只是合並的意思，但並不能直接使用引入的js的函數。
而且style-loader要寫在css-loader的前面，否則報如下錯誤。
執行成功之后，css插入到了head標簽里。
loader正確順序：”style-loader!css-loader!./style.css”
loader的加載順序是從右向左加載，所以
loader正確順序：：style-loader!css-loader!postcss-loader!less-loader
sass-loader或者less-loader等語言預編譯loader在webpack中的位置為：
1．最先放sass-loader或者less-loader
2．postcss-loader
3．css-loader
4．style-loader
注意：如果一個css中import導入另一個css,另一個css的postcss-loader沒生效，這時要給css-loader加一個參數，指定import導入css的數量：
loader:’style-loader!css-loader?importLoaders=1!postcss-loader’
為了使用簡便，不能每次在引入css的時候加loader，則可以在命令中實現：
webpack hello.js bundle.js --module-bind 'css=style-loader!css-loader'
去掉模塊引入css時加入的loader，1.x可以，3.0依舊會報錯。
--watch
在命令后面加 --watch ，可以不用每次改動都執行命令，而是自動改變
注意：修改了webpack配置需要重啟，即即使設置了監聽也要手動重新編譯;
關於版本安裝問題：把想要安裝的npm 模塊的名稱和版本號寫在package.json的依賴里，然后npm install就會自動安裝
但是，每次輸入很多命令依舊很繁瑣，解決辦法：
如果要提前配置好輸入的webpack命令，則在package.json中的script下，定義一個webpack屬性，后面定義所有要輸入的webpack的命令，定義好之后，在命令窗口 運行 命令 npm run webpack即可，定義方式與定義npm run dev中的dev是一樣的。
--progress 查看打包過程
--display-modules 查看打包的模塊
--colors 打包后的命令加顏色區分
--display-reasons 顯示打包原因
--watch 自動監聽文件改變，若改動，自動打包，但是修改webpack配置需重新手動編譯。
webpack 配置文件
報錯：
output輸出的路徑寫成這樣：
而不是這樣：
webpack打包完成之后，顯示打包成功，但是並沒有生產打包的文件和文件夾，所以這里在path中切記首先要寫__dirname+“路徑”
如圖：
個人理解：如果寫成 __dirname+”/path”,則說明現在還沒有要放入的js的文件夾，這樣會自動創建，否則即使執行成功，但是會看不到打包后的js文件，如果已經提前創建好要打包的js的存放文件夾，則不需要寫__dirname. 【常見問題】
如果更改了入口文件的數量，比如變成數組形式，或者對象形式，則需要重新手動運行npm run webpack。
數組：用數組形式寫多個入口文件，則會合並成指定的一個打包之后的文件
對象：分別打包成多個文件
注意：一個chunk代表一個區塊，則不同的chunk會打包成不同的文件，如果output寫死成一個路徑，則打包之后第二個區塊會覆蓋第一個區塊，解決辦法，chunkname+hash作為占位，則有幾個區塊就打包成幾個區塊 filename: "[name]-[hash].js"
報錯原因：入口文件的路徑寫成了單引號套雙引號，所以不識別。
hash值可以理解為版本號，只有文件發生改變時，hash值才會變化。
hash值對靜態資源的版本管理很有用。
webpack插件
npm安裝該插件
npm install 插件名 --save-dev
一個很好用的webpack插件：html-webpack-plugin
安裝
npm install html-webpack-plugin --save-dev
使用：
首先在webpack.config.js中引入該插件，
var htmlWebpackPlugin = require('html-webpack-plugin');
然后只需要在webpack配置中modules增加屬性plugins，用來初始化插件。
寫法如下：
plugins: [ new htmlWebpackPlugin() //初始化插件實例 ]
如果要把自己的html頁面打包到對應的打包文件夾下：則給該插件映射一個模版：
plugins: [ new htmlWebpackPlugin({ template:”index.html” }) ]
如果html頁面想要輸出到打包文件夾最外層目錄，然后js等文件要輸出到js對應的文件夾下，則output輸出的時候把js路徑單獨配置到對應的目錄下的filename就可以。
代碼如圖：
output: { filename: "js/[name]-[hash].js", path: __dirname+"/dist" },
輸出的文件結構如圖：
插件的屬性：
plugins: [ new htmlWebpackPlugin({ filename:"index-[hash].html", template:'index.html', inject:"head", title:"我是title", date:new Date(), }) ]
通過在plugins中定義的屬性和值，可以在頁面中用<%= %>模版引擎的方式展現出來。
eg:
<%= htmlWebpackPlugin.options.title %> 並且可以取到值之后進行for循環 <% for (var key in htmlWebpackPlugin.files){ %> <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %> <% } %>
通過遍歷files和options可以看到插件對應的都有哪些屬性，這樣頁面中如果有多個js,一些想放到頭部，一些像放到body中，就可以直接在頁面中以模板引擎的方式引入js了。
eg: <script type=”text/javascript src=”<%= htmlWebPackPlugin.files.chunks.main.entry %>”>
[此時inject要記得設為false]
minify：壓縮 【具體可參照官網 www.npmjs.com 中的htmp-webpack-plugin】
多頁面配置：chunk:[]
plugin是一個數組，如果要打包成多個頁面，只需寫多個創建插件對象的實例，給每個實例里寫chunk屬性，該屬性是一個數組，每個數組里對應的js的名稱。
excludeChunks:[] 除一些以外
處理模板文件的loader
安裝loader方法:
npm install xxx-loader --save-dev
首先安裝html-loader:
npm install html-loader --save-dev
在webopack.config.js中配置該loader
- 首先寫好自己的html代碼，
<div style="width:100%;height:100%"> <h1>模板文件處理 測試</h1> </div>
- 然后再對應的js中import導入該html文件，
import tpl from '../layer.html'; function layer() { return { name:'layer', tpl:tpl }; } export default layer;
- 然后去App.js中導入該js文件，
- 最后在App.js中渲染到index.html中
import Layer from './layer.js'; const App = function () { var dom = document.getElementById('app'); var Layer = new Layer(); dom.innerHTML = Layer.tpl; }; new App();
有關html-loader的具體代碼，參見官網templating……
對於復雜的模板引擎，安裝ejs-loader
后綴格式可以是.tpl/.ejs
當引入tpl的模板文件的時候，返回的不是一個字符串，是一個function
webpack配置：
{ test:/\.ejs$/, loader:'ejs-loader' },
app.js import Layer from './src/js/layer.js'; const App = function () { var dom = document.getElementById('app'); var layer = new Layer(); dom.innerHTML = layer.tpl({ name:'John', arr:["1111","2222","3333"] }); }; new App();
layer.tpl
<div class="layer"> <div>this is <%= name %> layer</div> <% for (var i = 0;i < arr.length; i++) { %> <%= arr[i] %> <% } %> </div>
[webpack 3.0 報錯]bundle.js:84 Uncaught TypeError: Cannot set property 'innerHTML' of null
處理圖片及其他文件的loader
file-loader
安裝loader
npm install file-loader --save-dev
webpack配置
{ test:/\.(png|jpg|gif|svg)$/, loader:'file-loader' },
無論是在根目錄下的Index.html中直接引用（絕對路徑沒有問題，相對問題可以被解析），還是css中背景圖片引用，亦或者是在模版文件中引用，在file-loader的作用下，都成功被解析。在模版引擎文件中，src可以以require(“相對路徑”) 的形式 引入，就可以成功引入，但是直接引用相對地址就不可以解析。
url-loader:
當圖片小於指定大小的時候，使用url-loader，當大於指定大小的時候，自動轉換為file-loader
{ test:/\.(png|jpg|gif|svg)$/, loader:'url-loader', query:{ limit:20000, //指定大小 ，單位kb name:"src/[name]-[hash:5].[ext]" } },
image-webpack loader
圖片壓縮loader