webpack 配置
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'
]
}
}
相關文章
- 1. webpack（四）：webpack配置
- 2. webpack配置
- 3. webpack配置項
- 4. webpack 配置
- 5. webpack配置webpack.config.js
- 6. webpack 配置vue
- 7. webpack配置一
- 8. .babelrc配置（webpack）
- 9. node webpack配置
- 10. webpack - TypeScript配置
- 更多相關文章...
- • Eclipse Debug 配置 - Eclipse 教程
- • Maven 環境配置 - Maven教程
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
- • IDEA下SpringBoot工程配置文件沒有提示
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. webpack（四）：webpack配置
- 2. webpack配置
- 3. webpack配置項
- 4. webpack 配置
- 5. webpack配置webpack.config.js
- 6. webpack 配置vue
- 7. webpack配置一
- 8. .babelrc配置（webpack）
- 9. node webpack配置
- 10. webpack - TypeScript配置