我們將配置項(xiàng)介杆，逐個拿出來分析下弧蝇。
mode
可選值 development production
打包時會將process.env.NODE_ENV修改為此值
mode: 'production',
entry
入口文件
entry: {
app: ['./src/index.js']
},
output
output: {
path: path.resolve(process.cwd(), './lib'), // 輸出文件的目錄,是個絕對路徑
publicPath: '/dist/', // 所有靜態(tài)資源都會加上這個前綴 比如 images/a.png -> /dist/images/a.png
filename: '[name].min.js', // 打完包的入口文件, 入口文件名.min.js
chunkFilename: '[id].js', // 非入口文件，按這種方式輸出文件 0.js, 1.js ...
libraryTarget: 'umd', // 和 library配合使用可免，規(guī)定你的代碼打包成的模塊鸿秆，可以用什么規(guī)范導(dǎo)入，這里可以用umd方式導(dǎo)入胖烛，即CommonJS, AMD 或者全局變量方式導(dǎo)入
libraryExport: 'default', // 哪些子模塊需要被導(dǎo)出。libraryTarget 支持 commonjs才有意義诅迷，這里只導(dǎo)出default子模塊。
library: 'ELEMENT', // 導(dǎo)出的模塊名
umdNamedDefine: true, // 是否將模塊名稱作為 AMD 輸出的命名空間
globalObject: 'typeof self !== \'undefined\' ? self : this' // 如果輸出全局對象的話众旗，綁定到這個對象上比如 self.ELEMENT 或者 this.ELEMENT
},
resolve
resolve: {
extensions: ['.js', '.vue', '.json'], // 導(dǎo)入文件時罢杉，不帶擴(kuò)展名，會依次按這幾個擴(kuò)展名找
alias: config.alias // 創(chuàng)建 import 或 require 的別名贡歧，來確保模塊引入變得更簡單滩租， 比如import 'element-ui' 就相當(dāng)于 import 'element-ui在項(xiàng)目下的路徑'
},
externals
如果我們想引用一個庫，但是又不想讓webpack一起打包利朵，就用externals
externals: {
"lodash": {
commonjs: "lodash",//如果我們的庫運(yùn)行在Node.js環(huán)境中律想，import _ from 'lodash'等價于const _ = require('lodash') 轉(zhuǎn)成異步加載
commonjs2: "lodash",//同上
amd: "lodash",//如果我們的庫使用require.js等加載,等價于 define(["lodash"], factory);
root: "_"http://如果我們的庫在瀏覽器中使用，需要提供一個全局的變量‘_’绍弟，等價于 var _ = (window._) or (_);
}
}
optimization
代碼優(yōu)化技即，減少體積等
optimization: {
minimizer: [ // 定制壓縮選項(xiàng)
new TerserPlugin({
terserOptions: {
output: {
comments: false // 去掉注釋
}
}
})
]
},
performance
打包時性能提示的相關(guān)配置
performance: {
hints: false // 不提示 可選值 false | "error" | "warning", 如果開啟，一個資源大于 250kb 就會有提示
},
stats
打包過程中樟遣，控制臺輸出信息的配置而叼。參數(shù)比較多，官方文檔定義也比較清楚豹悬，有需要可查閱
stats: {
children: false // 不顯示子信息葵陵，這個子信息是什么，還不清楚瞻佛，可以分別打開脱篙，關(guān)閉測試下
},
module
module.rules創(chuàng)建模塊時，匹配請求的規(guī)則數(shù)組。這些規(guī)則能夠修改模塊的創(chuàng)建方式绊困。這些規(guī)則能夠?qū)δK(module)應(yīng)用 loader忍弛，或者修改解析器(parser)。
module: {
rules: [
{
test: /\.(jsx?|babel|es6)$/, // resource 條件1
include: process.cwd(), // resource 條件2
exclude: config.jsexclude, // resource 條件3
loader: 'babel-loader' // 匹配成功的結(jié)果
},
{
test: /\.vue$/, resource 條件1
loader: 'vue-loader', // 匹配成功的結(jié)果考抄， 應(yīng)用vue-loader
options: {
compilerOptions: {
preserveWhitespace: false // 忽略模版中HTML標(biāo)簽間的空格
}
}
}
]
},
plugins
plugins: [
new webpack.DefinePlugin({ // 允許你創(chuàng)建可在編譯時配置的全局常量细疚。這對需要在開發(fā)環(huán)境構(gòu)建和生產(chǎn)環(huán)境構(gòu)建之間產(chǎn)生不同行為來說非常有用。
// Definitions...
}),
new ProgressBarPlugin(), // 打包編譯時川梅，顯示進(jìn)度條
new VueLoaderPlugin() // 為vue-loader服務(wù)
]
npm設(shè)置淘寶源
// npm設(shè)置新淘寶源
npm config set registry https://registry.npmmirror.com
// npm設(shè)置回本源
npm config set registry https://registry.npmjs.org
yarn設(shè)置新淘寶源
// yarn設(shè)置淘寶源
yarn config set registry https://registry.npmmirror.com
// yarn 設(shè)置回本源
yarn config set registry https://registry.yarnpkg.com/
