webpack配置看這裡就夠了

摘要： webpack簡述 webpack簡單來說就是一個模組打包器，也是目前最流行的前端構建工具之一，他將整個專案根據依賴關係通過各種loader與plugin的處理後進行打包；可以實現對程式碼的各種處理，比如less、sass、stylus的解析，ecmascript版本的轉換、程式碼的壓縮分...

webpack簡述

webpack簡單來說就是一個模組打包器，也是目前最流行的前端構建工具之一，他將整個專案根據依賴關係通過各種loader與plugin的處理後進行打包；可以實現對程式碼的各種處理，比如less、sass、stylus的解析，ecmascript版本的轉換、程式碼的壓縮分割等等

webpack之loader

loader可以說是webpack最核心的部分，前面所說的各種功能大部分就是又他完成的;loader簡單來說就是一個匯出為函式的JavaScript模組，webpack會配置檔案申明的倒序呼叫loader，傳入資原始檔，經loader處理後傳給下一loader或者webpack處理

常用loader

1.sass-loader、less-loader、stylus-loader、style-loader、css-loader

2.babel-loader

3.file-loader、url-loader

4.vue-loader

5.string-loader

webpack之plugin

plugin是webpack的重要組成部分，他能以各種鉤子鉤入每個編譯(compilation)中觸發的所有關鍵事件，外掛都具備完全訪問compiler物件的能力

常用plugin

1.HtmlWebpackPlugin

2.HotModuleReplacementPlugin

3.DefinePlugin

4.DllPlugin、DllReferencePlugin

以下是詳細配置

{
mode: 'development', // production:生產,會壓縮程式碼；development:開發，不會壓縮程式碼，便於debug

devtool: 'inline-source-map',// 新增source map;便於debug,但會嚴重影響效能，千萬不要在生產環境使用

// webpack打包的入口
entry: {
app: './src/index.js', // 路徑相對於package.json
// app: ['./vue.js', './src/index.js']
},

// 檔案輸出
output: {
filename: '[name].js',
path: path.resolve(__dirname, '../dist') // 輸出的目錄，預設為dist
},
optimization: {
runtimeChunk: true,// 將webpack打包後的主檔案單獨分離，預設是將主檔案放在入口檔案當中，當需要在入口檔案之前引入打包的公共程式碼時需要用到，此項建議對webpack有一定了解後再理解，關於打包後的程式碼分析我會單獨寫一篇

// 抽離公共程式碼
splitChunks: {
cacheGroups: {
vendor: { // 抽離第三方外掛
test: /node_modules/, // 指定是 node_modules 下的第三方包
chunks: 'initial', // initial 對於非同步匯入的檔案不處理;async 非同步chunk，只對非同步匯入的檔案處理;all 全部chunk
name: 'common/vendor', // 打包後的檔名，任意命名,會逆優化首屏載入的速度,慎用，建議每個公共程式碼塊都單獨抽離或者手動配置
priority: 10 // 設定優先順序，防止和自定義的公共程式碼提取時被覆蓋，不進行打包
},
utils: { // 抽離自定義公共程式碼
test: /\.js$/,
chunks: 'initial',
name: true, // 每個頁面的包只包含需要的檔案,不會影響首屏載入的速度，good job
minSize: 0 // 只要超出 0 位元組就生成一個新包,預設30000B
}
}
}
},
module: {
rules: [

// 打包css檔案需要用到的loader
// 注意：loader的執行順序是後面的先執行
//style-loader必須在css-loader的前面
{
test: /\.css$/,
use: [

// 將css檔案以style標籤形式插入
{
loader: 'style-loader',
options: {
singleton: true // 設定為true,多個css檔案會在同一個style標籤內
}
},
'css-loader'
],
include: path.resolve(__dirname, '../src') // 只處理對應目錄下的檔案，構建效能提升
},

{
test: /\.js$/,
use: [
'babel-loader', // 配置babel轉換程式碼
],
exclude: path.resolve(__dirname, '../node_modules')
}
]
},
plugins: [

// 在每次打包前清理dist目錄
// 注意配置刪除dist目錄下的所有檔案，而不是dist目錄，因為當dist目錄其他程式開啟時將無法刪除
new CleanWebpackPlugin(['dist/*'], {
root: path.resolve(__dirname, '../')
}),

// 用於處理入口html，如自動注入entry對應js,並拷貝至壓縮目錄等等
new HtmlWebpackPlugin({
template: './src/index.html',

// 壓縮html
minify: {
removeComments: true, // 刪除註釋
collapseWhitespace: true, // 刪除空格
removeAttributeQuotes: true // 刪除屬性的引號
}
})
],

// 配置後webpack會跳過對應模組的打包，當使用cdn時需要用到，此項能提升構建效能與前端效能
externals: {
vue: 'vue'
}
}