何爲webpack
webpack是一個前端模塊化方案，更側重模塊打包，我們可以把開發中的所有資源（圖片、js文件、css文件等）都看成模塊，通過loader（加載器）和plugins（插件）對資源進行處理，打包成符合生產環境部署的前端資源。
webpack初體驗
命令：webpack 被打包目錄 打包目錄
本地安裝webpack，創建兩個文件夾：src開發目錄，dist生產目錄
基本結構如下：
├── dist
│ └── index.html
├── src
│ └── entry.js
執行打包命令：webpack ./src/entry.js ./dist/bundle.js
這時候，神奇的事情出現了，dist多了一個bundle.js文件
初識webpack.config.js
我們知道前端提倡工程化思想，然而上面的打包方式顯然違背了這個思想。
於是我們使用webpack配置文件webpack.config.js進行打包
webpack.config.js的代碼如下
module.exports = {
entry:{
entry:'./src/entry.js', //entry爲打包後的文件名，即output裏的[name]
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].js', //打包後生成的文件名
},
}
在這段代碼中：
- entry表示入口，它可以有多個入口文件
- output表示出口，它可以有多個出口文件
- path表示打包到的目錄，使用__dirname可以兼容不同系統
- filename表示打包後的文件名
這樣子，我們只需要執行一條命令：webpack 就完成了打包
uglifyjs-webpack-plugin
前面我們完成了js的打包，但是打包後的代碼卻佔了大量的空間，爲了減少數據量，我們要對它進行壓縮，這裏我們使用的插件是uglifyjs-webpack-plugin
既然使用到了插件，就需要在webpack配置文件中進行以下配置：
- 引入插件（注：這個插件是不需要安裝的）
const uglify = require('uglifyjs-webpack-plugin'); - 配置插件（注：使用插件都使用到new）
//插件
plugins:[
new uglify() //壓縮
],
然後再執行webpack，我們發現js文件大大減小了
html-webpack-plugin
上面我們說到，我們有兩個目錄src和dist。這裏有一個問題，我們在dist目錄下創建了一個index.html。
我們知道dist目錄是生產目錄，它下面的文件都應該是自動生成的，而不應該手動添加，修改。
於是我們使用html-webpack-plugin插件。
同樣的步驟，這樣就不贅述了。
以下是配置插件的代碼：
//插件
plugins:[
new htmlPlugin({
minify: { removeAttributeQuotes:true //去除屬性的引號 },
hash: true,
template: './src/index.html',
})
],
在這段代碼中：
minify
minify 的作用是對 html 文件進行壓縮，minify 的屬性值是一個壓縮選項或者 false 。默認值爲false, 不對生成的 html 文件進行壓縮。來看看這個壓縮選項。執行結果：
<!-- 原html片段 -->
<div id="example" class="example">test minify</div>
<!-- 生成的html片段 -->
<div id=example class=example>test minify</div>
hash
hash選項的作用是 給生成的 js 文件一個獨特的 hash 值，該 hash 值是該次 webpack 編譯的 hash 值。默認值爲 false 。執行結果：
<script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>
執行 webpack 命令後，你會看到你的生成的 html 文件的 script 標籤內引用的 js 文件，是不是有點變化了。
bundle.js 文件後跟的一串 hash 值就是此次 webpack 編譯對應的 hash 值。
template
模板文件
我們刪除dist文件夾，然後webpack執行
執行後的結果爲：
生成了dist文件夾，並且裏面有index.html和entry.js兩個文件
loader配置
前面我們講了js的打包和壓縮，那麼我們如何對css文件進行打包呢？
我們在entry.js中引入css文件import css from './css/index.css';
然後執行webpack進行打包
然而這樣就行了嗎！？ 這樣運行是會報錯的
爲什麼，因爲webpack打包出來的都是js文件，它無法轉換css格式
這就需要我們安裝兩個loader： style-loader&css-loader
wepback爲了實現將css，sass，less打包爲js，需要對應的loader支持
這裏以style-loader&css-loader爲例：
- 安裝style-loader&css-loader
- 配置style-loader&css-loader
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader'],
},
]
},
上面增加了一條規則（rule）：所有以.css結尾的文件用style-loader&css-loader處理。
這樣子，我們再執行webpack命令，就可以將css文件一併打包到bundle.js文件中了。
less&sass
我們平常寫代碼時，不會僅使用css，可能會使用功能更強大的less，sass。那麼我們如何對這些格式進行打包呢？
先將less&sass轉換成css，再進行打包就可以了
代碼如下：
{
test:/\.less$/,
use:[{
loader:'style-loader'
},{
loader:'css-loader'
},{
loader:'less-loader'
}]
很多人一下子看到這麼多loader，可能就亂了。別急，我給你理一理這些loader
首先我們要知道一件事：loader的加載順序是從右往左，從下往上的。
對於css打包，我們的代碼是use:['style-loader','css-loader']，從右往左，先使用css-loader再使用style-loader。less你可以參考上面的代碼。
然後再說說各loader的作用：
- css-loader：處理css文件中的url()等
- style-loader：將css插入到頁面的style標籤
- less-loader ：將less文件編譯成css
- sass-loader ：將sass文件編譯成css
怎麼樣，現在是不是很清晰了。
代碼抽離
上面我們說到如何將css，less，sass打包成js文件。但是可能開發中，我們需要將它們抽離出來，形成單獨的css文件。這樣子應該怎麼做呢？
沒錯，我們要用到一個插件，它的名字是extract-text-webpack-plugin
基本步驟就不扯了，直接上代碼
plugins:[
new extractPlugin('css/index.css'),//打包後的文件路徑和文件名
],
相應的，我們也要修改loader的配置，這裏以less爲例：
{
test:/\.less$/,
use:extractPlugin.extract({
use:[{
loader:'css-loader'
},{
loader:'less-loader'
}],
fallback:'style-loader'
})
},
經過use操作後less打包成了一個css文件，然後使用fallback
fallback: 編譯後用什麼loader來提取css文件
注：以上筆記參考了技術胖的webpack3.x成神之路，以及很多大神的博客
會持續更新。寫的不好，有錯歡迎踩**
另：博客鏈接地址：
Webpack3.X版 成神之路 技術胖