module.exports = {
// 提供 mode 配置選項，告知 webpack 使用相應模式的內置優化
mode: 'production',
// 基礎目錄，絕對路徑，用於配置中解析入口起點（entry point）和 loader 默認使用當前目錄，但是推薦在配置中傳遞一個值
context: 'C:\\project\\vueTest',
// 此選項控制是否生成，以及如何生成 source map 使用 SourceMapDevToolPlugin 進行更細粒度的配置。查看 source-map-loader 來處理已有的 source map
devtool: false,
// 此選項可以配置是否polyfill或mock某些Node.js全局變量和模塊。這可以使最初為Node.js環境編寫的代碼。在其他環境中允許
node: {
setImmediate: false,
process: 'mock',
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
},
// 默認為 ./src
// 這里應用程序開始執行
// webpack 開始打包
output: {
// path webpack 如何輸出結果的相關選項
path: 'C:\\project\\vueTest\\dist', // string
// 所有輸出文件的目標路徑
// 必須是絕對路徑（使用node.js的path模塊）
filename: 'js/[name].[contenthash:8].js',
// 入口分塊(entry chunk) 的文件名稱模板
publicPath: '/',
// 此選項決定了非入口(non-entry) chunk 文件的名稱。有關可取的值的詳細信息，請查看 output.filename 選項。
chunkFilename: 'js/[name].[contenthash:8].js'
},
//解析 配置模塊如何解析，例如，擋在ES2015中調用import "loadsh",resolve選項能夠對webpack查找“loadsh”的方式取做修改
resolve: {
// 創建import或require的別名，來確保模塊引入變得簡單、例如，一些位於 src/ 文件夾下的常用模塊：
alias: {
'@': 'C:\\project\\vueTest\\src',
vue$: 'vue/dist/vue.runtime.esm.js'
},
// 自動解析確定的擴展。默認值為['.wasm', '.mjs', '.js', '.json']
// 能夠使用戶在引入模塊時不帶擴展： 如import File from '../path/to/file';
extensions: [
'.js',
'.jsx',
'.vue',
'.json'
],
// 告訴webpack 解析模塊時應該搜索的目錄，
// 絕對路徑和相對路徑都能使用，但是要知道它們之間有一點差異
// 通過查看當前目錄以及祖先路徑，相對路徑將類似於Node查找‘node_modules’
modules: [
// 模塊別名列表
'node_modules',
'C:\\project\\vueTest\\node_modules',
'C:\\project\\vueTest\\node_modules\\@vue\\cli-service\\node_modules'
]
},
// 這組選項與上面的resolve對象的屬性集合相同，但是僅用於來解析webpack的loader包。
resolveLoader: {
modules: [
'C:\\project\\vueTest\\node_modules\\@vue\\cli-plugin-eslint\\node_modules',
'C:\\project\\vueTest\\node_modules\\@vue\\cli-plugin-babel\\node_modules',
'node_modules',
'C:\\project\\vueTest\\node_modules',
'C:\\project\\vueTest\\node_modules\\@vue\\cli-service\\node_modules'
]
},
// 模塊 module 決定了 如何處理項目中的不同類型的模塊
module: {
// 防止webpakc解析哪些任何與給定正則表達式匹配的文件。忽略的文件中不應該含有important,require,define的調用，或任何其他導入機制忽略大型的libaray可以提高構建性能
noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
// 模塊規格 （匹配loader，解析器等選項）
// loaders webpack可以使用loader來預處理文件。這允許你打包除javascript之外的任何靜態資源,你可以使用node.js來更簡單的編寫自己的loader
rules: [
/* config.module.rule('vue') */
{
test: /\.vue$/,
use: [
{
// 有一些性能開銷較大的loader之前添加此loader,可以將結果緩存到磁盤里
loader: 'cache-loader',
options: {
cacheDirectory: 'C:\\project\\vueTest\\node_modules\\.cache\\vue-loader',
cacheIdentifier: 'c12e2af6'
}
},
{
// 以及 `.vue` 文件中的 `<script>` 塊
loader: 'vue-loader',
options: {
// 模板編譯器的選項。當使用默認的 vue-template-compiler 的時候，你可以使用這個選項來添加自定義編譯器指令、模塊或通過 { preserveWhitespace: false } 放棄模板標簽之間的空格。
compilerOptions: {
preserveWhitespace: false
},
// 模板編譯器的選項。當使用默認的 vue-template-compiler 的時候，你可以使用這個選項來添加自定義編譯器指令、模塊或通過 { preserveWhitespace: false } 放棄模板標簽之間的空格。
cacheDirectory: 'C:\\project\\vueTest\\node_modules\\.cache\\vue-loader',
cacheIdentifier: 'c12e2af6'
}
}
]
},
/* config.module.rule('images') */
{
test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
use: [
{
// npm install --save-dev url-loader
// npm install --save-dev file-loader
// 用法" class="icon-link" href="#用法">
// 加載文件為base64編碼的URL
// 以字節為單位
// 當文件大於限制(以字節為單位)時，為文件指定加載器
loader: 'url-loader',
options: {
limit: 10240, // 以字節為單位
fallback: { // 當文件大於限制(以字節為單位)時，為文件指定加載器
loader: 'file-loader',
options: {
name: 'img/[name].[hash:8].[ext]'
}
}
}
}
]
},
/* config.module.rule('svg') */
{
test: /\.(svg)(\?.*)?$/,
use: [
{
// npm install --save-dev file-loader
// 默認情況下，生成的文件的文件名就是文件內容的MD5哈希值並保留所引用資源的原始擴展名
loader: 'file-loader',
options: {
name: 'img/[name].[hash:8].[ext]'
}
// 生成文件 file.png，輸出到輸出目錄並返回 public URL。
// "/public/path/0dcbbaa7013869e351f.png"
}
]
},
/* config.module.rule('media') */
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: [
{
// npm install --save-dev url-loader
// npm install --save-dev file-loader
// 用法" class="icon-link" href="#用法">
// 加載文件為base64編碼的URL
// 以字節為單位
// 當文件大於限制(以字節為單位)時，為文件指定加載器
loader: 'url-loader',
options: {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: 'media/[name].[hash:8].[ext]'
}
}
}
}
]
},
/* config.module.rule('fonts') */
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
use: [
{
// npm install --save-dev url-loader
// npm install --save-dev file-loader
// 用法" class="icon-link" href="#用法">
// 加載文件為base64編碼的URL
// 以字節為單位
// 當文件大於限制(以字節為單位)時，為文件指定加載器
loader: 'url-loader',
options: {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: 'fonts/[name].[hash:8].[ext]'
}
}
}
}
]
},
// 一個簡單地將pug模板編譯成HTML的加載器
/* config.module.rule('pug') */
{
test: /\.pug$/,
use: [
{
loader: 'pug-plain-loader'
}
]
},
/* config.module.rule('css') */
{
test: /\.css$/,
oneOf: [
/* config.module.rule('css').oneOf('vue-modules') */
{
resourceQuery: /module/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
// 加載.css文件
loader: 'css-loader',
options: {
sourceMap: false, // 啟用/禁用 CSS 模塊
importLoaders: 2, // 在 css-loader 前應用的 loader 的數量
modules: true, // 啟用/禁用 CSS 模塊
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
// 加載器webpack來處理CSS與PostCSS
loader: 'postcss-loader',
options: {
sourceMap: false
}
}
]
},
/* config.module.rule('css').oneOf('vue') */
{
resourceQuery: /\?vue/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2 // 在 css-loader 前應用的 loader 的數量
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
}
]
},
/* config.module.rule('css').oneOf('normal-modules') */
{
test: /\.module\.\w+$/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
// 解釋（interpret） @import 和 url(). 會import/require()后再解析它們
// 引用合適的loader是file-loader和url-loader
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
}
]
},
/* config.module.rule('css').oneOf('normal') */
{
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
}
]
}
]
},
/* config.module.rule('postcss') */
{
test: /\.p(ost)?css$/,
oneOf: [
/* config.module.rule('postcss').oneOf('vue-modules') */
{
resourceQuery: /module/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
}
]
},
/* config.module.rule('postcss').oneOf('vue') */
{
resourceQuery: /\?vue/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
}
]
},
/* config.module.rule('postcss').oneOf('normal-modules') */
{
test: /\.module\.\w+$/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
}
]
},
/* config.module.rule('postcss').oneOf('normal') */
{
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
}
]
}
]
},
// 加載一個SASS/SCSS文件並將其編譯為CSS。
/* config.module.rule('scss') */
{
test: /\.scss$/,
oneOf: [
/* config.module.rule('scss').oneOf('vue-modules') */
{
resourceQuery: /module/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
// 加載css
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
}
]
},
/* config.module.rule('scss').oneOf('vue') */
{
resourceQuery: /\?vue/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
// 加載一個SASS/SCSS文件並將其編譯為CSS。
loader: 'sass-loader',
options: {
sourceMap: false
}
}
]
},
/* config.module.rule('scss').oneOf('normal-modules') */
{
test: /\.module\.\w+$/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
// 加載一個SASS/SCSS文件並將其編譯為CSS。
loader: 'sass-loader',
options: {
sourceMap: false
}
}
]
},
/* config.module.rule('scss').oneOf('normal') */
{
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
// 加載一個SASS/SCSS文件並將其編譯為CSS。
loader: 'sass-loader',
options: {
sourceMap: false
}
}
]
}
]
},
/* config.module.rule('sass') */
{
test: /\.sass$/,
oneOf: [
/* config.module.rule('sass').oneOf('vue-modules') */
{
resourceQuery: /module/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
// 加載一個SASS/SCSS文件並將其編譯為CSS。
loader: 'sass-loader',
options: {
sourceMap: false,
indentedSyntax: true
}
}
]
},
/* config.module.rule('sass').oneOf('vue') */
{
resourceQuery: /\?vue/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
// 加載一個SASS/SCSS文件並將其編譯為CSS。
loader: 'sass-loader',
options: {
sourceMap: false,
indentedSyntax: true
}
}
]
},
/* config.module.rule('sass').oneOf('normal-modules') */
{
test: /\.module\.\w+$/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false,
indentedSyntax: true
}
}
]
},
/* config.module.rule('sass').oneOf('normal') */
{
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false,
indentedSyntax: true
}
}
]
}
]
},
/* config.module.rule('less') */
{
test: /\.less$/,
oneOf: [
/* config.module.rule('less').oneOf('vue-modules') */
{
resourceQuery: /module/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'less-loader',
options: {
sourceMap: false
}
}
]
},
/* config.module.rule('less').oneOf('vue') */
{
resourceQuery: /\?vue/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'less-loader',
options: {
sourceMap: false
}
}
]
},
/* config.module.rule('less').oneOf('normal-modules') */
{
test: /\.module\.\w+$/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'less-loader',
options: {
sourceMap: false
}
}
]
},
/* config.module.rule('less').oneOf('normal') */
{
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'less-loader',
options: {
sourceMap: false
}
}
]
}
]
},
/* config.module.rule('stylus') */
{
test: /\.styl(us)?$/,
oneOf: [
/* config.module.rule('stylus').oneOf('vue-modules') */
{
resourceQuery: /module/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'stylus-loader',
options: {
sourceMap: false,
preferPathResolver: 'webpack'
}
}
]
},
/* config.module.rule('stylus').oneOf('vue') */
{
resourceQuery: /\?vue/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'stylus-loader',
options: {
sourceMap: false,
preferPathResolver: 'webpack'
}
}
]
},
/* config.module.rule('stylus').oneOf('normal-modules') */
{
test: /\.module\.\w+$/,
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'stylus-loader',
options: {
sourceMap: false,
preferPathResolver: 'webpack'
}
}
]
},
/* config.module.rule('stylus').oneOf('normal') */
{
use: [
{
loader: 'C:\\project\\vueTest\\node_modules\\mini-css-extract-plugin\\dist\\loader.js',
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'stylus-loader',
options: {
sourceMap: false,
preferPathResolver: 'webpack'
}
}
]
}
]
},
/* config.module.rule('js') */
{
test: /\.jsx?$/,
exclude: [
filepath => {
// always transpile js in vue files
if (/\.vue\.jsx?$/.test(filepath)) {
return false
}
// exclude dynamic entries from cli-service
if (filepath.startsWith(cliServicePath)) {
return true
}
// check if this is something the user explicitly wants to transpile
if (options.transpileDependencies.some(dep => {
if (typeof dep === 'string') {
return filepath.includes(path.normalize(dep))
} else {
return filepath.match(dep)
}
})) {
return false
}
// Don't transpile node_modules
return /node_modules/.test(filepath)
}
],
use: [
{ // 在一些性能開銷較大的 loader 之前添加此 loader，以將結果緩存到磁盤里。
loader: 'cache-loader',
options: {
cacheDirectory: 'C:\\project\\vueTest\\node_modules\\.cache\\babel-loader',
cacheIdentifier: '1218c33d'
}
},
{
// 把這個 loader 放置在其他 loader 之前， 放置在這個 loader 之后的 loader 就會在一個單獨的 worker 池(worker pool)中運行
// 每個 worker 都是一個單獨的有 600ms 限制的 node.js 進程。同時跨進程的數據交換也會被限制。
loader: 'thread-loader'
},
{ // 這個包允許使用Babel和webpack傳輸JavaScript文件。
loader: 'babel-loader'
}
]
},
/* config.module.rule('eslint') */
{
enforce: 'pre',
test: /\.(vue|(j|t)sx?)$/,
exclude: [
/node_modules/,
'C:\\project\\vueTest\\node_modules\\@vue\\cli-service\\lib'
],
use: [
{
loader: 'eslint-loader',
options: {
extensions: [
'.js',
'.jsx',
'.vue'
],
cache: true,
cacheIdentifier: 'c384f39c',
emitWarning: true,
emitError: false,
formatter: function (results) {
let errors = 0;
let warnings = 0;
let fixableErrors = 0;
let fixableWarnings = 0;
const resultsWithMessages = results.filter(result => result.messages.length > 0);
let output = resultsWithMessages.reduce((resultsOutput, result) => {
const messages = result.messages.map(message => `${formatMessage(message, result)}\n\n`);
errors += result.errorCount;
warnings += result.warningCount;
fixableErrors += result.fixableErrorCount;
fixableWarnings += result.fixableWarningCount;
return resultsOutput.concat(messages);
}, []).join("\n");
output += "\n";
output += formatSummary(errors, warnings, fixableErrors, fixableWarnings);
return (errors + warnings) > 0 ? output : "";
}
}
}
]
}
]
},
// 優化
optimization: {
minimizer: [
{
options: {
test: /\.js(\?.*)?$/i,
warningsFilter: function () {
return true;
},
extractComments: false,
sourceMap: false,
cache: true,
cacheKeys: function (defaultCacheKeys) {
return defaultCacheKeys;
},
parallel: true,
include: undefined,
exclude: undefined,
minify: undefined,
uglifyOptions: {
compress: {
arrows: false,
collapse_vars: false,
comparisons: false,
computed_props: false,
hoist_funs: false,
hoist_props: false,
hoist_vars: false,
inline: false,
loops: false,
negate_iife: false,
properties: false,
reduce_funcs: false,
reduce_vars: false,
switches: false,
toplevel: false,
typeofs: false,
booleans: true,
if_return: true,
sequences: true,
unused: true,
conditionals: true,
dead_code: true,
evaluate: true
},
output: {
comments: /^\**!|@preserve|@license|@cc_on/
},
mangle: {
safari10: true
}
}
}
}
],
splitChunks: {
cacheGroups: {
vendors: {
name: 'chunk-vendors',
test: /[\\\/]node_modules[\\\/]/,
priority: -10,
chunks: 'initial'
},
common: {
name: 'chunk-common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
}
}
}
},
// webpack插件列表
plugins: [
/* config.plugin('vue-loader') */
// 它的職責是將你定義過的其它規則復制並應用到 .vue 文件里相應語言的塊。例如，如果你有一條匹配 /\.js$/ 的規則，那么它會應用到 .vue 文件里的 <script> 塊
new VueLoaderPlugin(),
/* config.plugin('define') */
// DefinePlugin 中 process.env 鍵的簡寫方式。
new DefinePlugin(
{
'process.env': {
NODE_ENV: '"production"',
VUE_APP_CLI_UI_URL: '""',
BASE_URL: '"/"'
}
}
),
/* config.plugin('case-sensitive-paths') */
// 這個Webpack插件強制所有必需模塊的完整路徑與磁盤上實際路徑的精確情況匹配。使用這個插件可以幫助緩解在OSX上工作的開發人員與其他開發人員發生沖突，或者構建運行其他操作系統的機器，這些操作系統需要正確使用大小寫的路徑。
new CaseSensitivePathsPlugin(),
/* config.plugin('friendly-errors') */
// 識別某些類的webpack錯誤並清理、聚合和優先化它們，以提供更好的開發人員體驗。
new FriendlyErrorsWebpackPlugin(
{
additionalTransformers: [
error => {
if (error.webpackError) {
const message = typeof error.webpackError === 'string'
? error.webpackError
: error.webpackError.message || ''
for (const { re, msg, type } of rules) {
const match = message.match(re)
if (match) {
return Object.assign({}, error, {
// type is necessary to avoid being printed as defualt error
// by friendly-error-webpack-plugin
type,
shortMessage: msg(error, match)
})
}
}
// no match, unknown webpack error without a message.
// friendly-error-webpack-plugin fails to handle this.
if (!error.message) {
return Object.assign({}, error, {
type: 'unknown-webpack-error',
shortMessage: message
})
}
}
return error
}
],
additionalFormatters: [
errors => {
errors = errors.filter(e => e.shortMessage)
if (errors.length) {
return errors.map(e => e.shortMessage)
}
}
]
}
),
// 為每個引入 CSS 的 JS 文件創建一個 CSS 文件 提取css到一個css文件中
/* config.plugin('extract-css') */
new MiniCssExtractPlugin(
{
filename: 'css/[name].[contenthash:8].css',
chunkFilename: 'css/[name].[contenthash:8].css'
}
),
/* config.plugin('optimize-css') */
// 優化css
new OptimizeCssnanoPlugin(
{
sourceMap: false,
cssnanoOptions: {
preset: [
'default',
{
mergeLonghand: false,
cssDeclarationSorter: false
}
]
}
}
),
// 該插件會根據模塊的相對路徑生成一個四位數的hash作為模塊id, 建議用於生產環境。
/* config.plugin('hash-module-ids') */
new HashedModuleIdsPlugin(
{
hashDigest: 'hex'
}
),
/* config.plugin('named-chunks') */
new NamedChunksPlugin(
chunk => {
if (chunk.name) {
return chunk.name
}
const hash = require('hash-sum')
const joinedHash = hash(
Array.from(chunk.modulesIterable, m => m.id).join('_')
)
return `chunk-` + joinedHash
}
),
// 簡單創建 HTML 文件，用於服務器訪問
//
/* config.plugin('html') */
new HtmlWebpackPlugin(
{
templateParameters: (compilation, assets, pluginOptions) => {
// enhance html-webpack-plugin's built in template params
let stats
return Object.assign({
// make stats lazy as it is expensive
get webpack() {
return stats || (stats = compilation.getStats().toJson())
},
compilation: compilation,
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: pluginOptions
}
}, resolveClientEnv(options, true /* raw */))
},
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
collapseBooleanAttributes: true,
removeScriptTypeAttributes: true
},
template: 'C:\\project\\vueTest\\public\\index.html'
}
),
/* config.plugin('pwa') */
new HtmlPwaPlugin(
{
name: 'vueTest'
}
),
/* config.plugin('preload') */
new PreloadPlugin(
{
rel: 'preload',
include: 'initial',
fileBlacklist: [
/\.map$/,
/hot-update\.js$/
]
}
),
/* config.plugin('prefetch') */
// 預取出普通的模塊請求(module request)，可以讓這些模塊在他們被 import 或者是 require 之前就解析並且編譯。使用這個預取插件可以提升性能。可以多試試在編譯前記錄時間(profile)來決定最佳的預取的節點。
new PreloadPlugin(
{
rel: 'prefetch',
include: 'asyncChunks'
}
),
// 將單個文件或整個目錄復制到構建目錄。
/* config.plugin('copy') */
new CopyWebpackPlugin(
[
{
from: 'C:\\project\\vueTest\\public',
to: 'C:\\project\\vueTest\\dist',
toType: 'dir',
ignore: [
'index.html',
'.DS_Store'
]
}
]
),
/* config.plugin('workbox') */
new GenerateSW(
{
exclude: [
/\.map$/,
/img\/icons\//,
/favicon\.ico$/,
/manifest\.json$/
],
cacheId: 'vueTest'
}
)
],
entry: {
app: [
'./src/main.js'
]
}
}