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
1. 首先寫好自己的html代碼，
<div style="background-color:red;width:100%;height:100%">
<h1>模板文件處理 測試</h1>
</div>
2. 然後再對應的js中import導入該html文件，
import tpl from '../layer.html';
function layer() {
return {
name:'layer',
tpl:tpl
};
}export default layer;
3. 然後去App.js中導入該js文件，
4. 最後在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>
<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