{
resourceQuery: /?vue/,
use: [
/* config.module.rule(‘sass’).oneOf(‘vue’).use(‘vue-style-loader’) */
{
loader: ‘//node_modules/vue-style-loader/index.js’,
options: {
sourceMap: false,
shadowMode: false
}
},
/* config.module.rule(‘sass’).oneOf(‘vue’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘sass’).oneOf(‘vue’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘sass’).oneOf(‘vue’).use(‘sass-loader’) */
{
loader: ‘sass-loader’,
options: {
sourceMap: false,
sassOptions: {
indentedSyntax: true
}
}
}
]
},
/* config.module.rule(‘sass’).oneOf(‘normal-modules’) */
{
test: /.module.\w+$/,
use: [
/* config.module.rule(‘sass’).oneOf(‘normal-modules’).use(‘vue-style-loader’) */
{
loader: ‘//node_modules/vue-style-loader/index.js’,
options: {
sourceMap: false,
shadowMode: false
}
},
/* config.module.rule(‘sass’).oneOf(‘normal-modules’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2,
modules: {
localIdentName: ‘[name][local][hash:base64:5]’
}
}
},
/* config.module.rule(‘sass’).oneOf(‘normal-modules’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘sass’).oneOf(‘normal-modules’).use(‘sass-loader’) */
{
loader: ‘sass-loader’,
options: {
sourceMap: false,
sassOptions: {
indentedSyntax: true
}
}
}
]
},
/* config.module.rule(‘sass’).oneOf(‘normal’) */
{
use: [
/* config.module.rule(‘sass’).oneOf(‘normal’).use(‘vue-style-loader’) */
{
loader: ‘//node_modules/vue-style-loader/index.js’,
options: {
sourceMap: false,
shadowMode: false
}
},
/* config.module.rule(‘sass’).oneOf(‘normal’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘sass’).oneOf(‘normal’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘sass’).oneOf(‘normal’).use(‘sass-loader’) */
{
loader: ‘sass-loader’,
options: {
sourceMap: false,
sassOptions: {
indentedSyntax: true
}
}
}
]
}
]
},
/* config.module.rule(‘less’) */
{
test: /.less$/,
oneOf: [
/* config.module.rule(‘less’).oneOf(‘vue-modules’) */
{
resourceQuery: /module/,
use: [
/* config.module.rule(‘less’).oneOf(‘vue-modules’).use(‘vue-style-loader’) */
{
loader: ‘//node_modules/vue-style-loader/index.js’,
options: {
sourceMap: false,
shadowMode: false
}
},
/* config.module.rule(‘less’).oneOf(‘vue-modules’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2,
modules: {
localIdentName: ‘[name][local][hash:base64:5]’
}
}
},
/* config.module.rule(‘less’).oneOf(‘vue-modules’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘less’).oneOf(‘vue-modules’).use(‘less-loader’) */
{
loader: ‘less-loader’,
options: {
sourceMap: false
}
}
]
},
/* config.module.rule(‘less’).oneOf(‘vue’) */
{
resourceQuery: /?vue/,
use: [
/* config.module.rule(‘less’).oneOf(‘vue’).use(‘vue-style-loader’) */
{
loader: ‘//node_modules/vue-style-loader/index.js’,
options: {
sourceMap: false,
shadowMode: false
}
},
/* config.module.rule(‘less’).oneOf(‘vue’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘less’).oneOf(‘vue’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘less’).oneOf(‘vue’).use(‘less-loader’) */
{
loader: ‘less-loader’,
options: {
sourceMap: false
}
}
]
},
/* config.module.rule(‘less’).oneOf(‘normal-modules’) */
{
test: /.module.\w+$/,
use: [
/* config.module.rule(‘less’).oneOf(‘normal-modules’).use(‘vue-style-loader’) */
{
loader: ‘//node_modules/vue-style-loader/index.js’,
options: {
sourceMap: false,
shadowMode: false
}
},
/* config.module.rule(‘less’).oneOf(‘normal-modules’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2,
modules: {
localIdentName: ‘[name][local][hash:base64:5]’
}
}
},
/* config.module.rule(‘less’).oneOf(‘normal-modules’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘less’).oneOf(‘normal-modules’).use(‘less-loader’) */
{
loader: ‘less-loader’,
options: {
sourceMap: false
}
}
]
},
/* config.module.rule(‘less’).oneOf(‘normal’) */
{
use: [
/* config.module.rule(‘less’).oneOf(‘normal’).use(‘vue-style-loader’) */
{
loader: ‘//node_modules/vue-style-loader/index.js’,
options: {
sourceMap: false,
shadowMode: false
}
},
/* config.module.rule(‘less’).oneOf(‘normal’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘less’).oneOf(‘normal’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘less’).oneOf(‘normal’).use(‘less-loader’) */
{
loader: ‘less-loader’,
options: {
sourceMap: false
}
}
]
}
]
},
/* config.module.rule(‘stylus’) */
{
test: /.styl(us)?$/,
oneOf: [
/* config.module.rule(‘stylus’).oneOf(‘vue-modules’) */
{
resourceQuery: /module/,
use: [
/* config.module.rule(‘stylus’).oneOf(‘vue-modules’).use(‘vue-style-loader’) */
{
loader: ‘//node_modules/vue-style-loader/index.js’,
options: {
sourceMap: false,
shadowMode: false
}
},
/* config.module.rule(‘stylus’).oneOf(‘vue-modules’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2,
modules: {
localIdentName: ‘[name][local][hash:base64:5]’
}
}
},
/* config.module.rule(‘stylus’).oneOf(‘vue-modules’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘stylus’).oneOf(‘vue-modules’).use(‘stylus-loader’) */
{
loader: ‘stylus-loader’,
options: {
sourceMap: false,
preferPathResolver: ‘webpack’
}
}
]
},
/* config.module.rule(‘stylus’).oneOf(‘vue’) */
{
resourceQuery: /?vue/,
use: [
/* config.module.rule(‘stylus’).oneOf(‘vue’).use(‘vue-style-loader’) */
{
loader: ‘//node_modules/vue-style-loader/index.js’,
options: {
sourceMap: false,
shadowMode: false
}
},
/* config.module.rule(‘stylus’).oneOf(‘vue’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘stylus’).oneOf(‘vue’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘stylus’).oneOf(‘vue’).use(‘stylus-loader’) */
{
loader: ‘stylus-loader’,
options: {
sourceMap: false,
preferPathResolver: ‘webpack’
}
}
]
},
/* config.module.rule(‘stylus’).oneOf(‘normal-modules’) */
{
test: /.module.\w+$/,
use: [
/* config.module.rule(‘stylus’).oneOf(‘normal-modules’).use(‘vue-style-loader’) */
{
loader: ‘//node_modules/vue-style-loader/index.js’,
options: {
sourceMap: false,
shadowMode: false
}
},
/* config.module.rule(‘stylus’).oneOf(‘normal-modules’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2,
modules: {
localIdentName: ‘[name][local][hash:base64:5]’
}
}
},
/* config.module.rule(‘stylus’).oneOf(‘normal-modules’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘stylus’).oneOf(‘normal-modules’).use(‘stylus-loader’) */
{
loader: ‘stylus-loader’,
options: {
sourceMap: false,
preferPathResolver: ‘webpack’
}
}
]
},
/* config.module.rule(‘stylus’).oneOf(‘normal’) */
{
use: [
/* config.module.rule(‘stylus’).oneOf(‘normal’).use(‘vue-style-loader’) */
{
loader: ‘//node_modules/vue-style-loader/index.js’,
options: {
sourceMap: false,
shadowMode: false
}
},
/* config.module.rule(‘stylus’).oneOf(‘normal’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘stylus’).oneOf(‘normal’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘stylus’).oneOf(‘normal’).use(‘stylus-loader’) */
{
loader: ‘stylus-loader’,
options: {
sourceMap: false,
preferPathResolver: ‘webpack’
}
}
]
}
]
},
/* config.module.rule(‘js’) */
{
test: /.m?jsx?$/,
exclude: [
function () { /* omitted long function */
}
],
use: [
/* config.module.rule(‘js’).use(‘cache-loader’) */
{
loader: ‘//node_modules/cache-loader/dist/cjs.js’,
options: {
cacheDirectory: ‘//node_modules/.cache/babel-loader’,
cacheIdentifier: ‘5b579faa’
}
},
/* config.module.rule(‘js’).use(‘babel-loader’) */
{
loader: ‘//node_modules/babel-loader/lib/index.js’
}
]
},
/* config.module.rule(‘eslint’) */
{
enforce: ‘pre’,
test: /.(vue|(j|t)sx?)$/,
exclude: [
/node_modules/,
‘//node_modules/@vue/cli-service/lib’
],
use: [
/* config.module.rule(‘eslint’).use(‘eslint-loader’) */
{
loader: ‘//node_modules/eslint-loader/index.js’,
options: {
extensions: [
‘.js’,
‘.jsx’,
‘.vue’
],
cache: true,
cacheIdentifier: ‘5359bed4’,
emitWarning: false,
emitError: false,
eslintPath: ‘//node_modules/eslint’,
formatter: undefined
}
}
]
}
]
},
// 代码分割
optimization: {
splitChunks: {
cacheGroups: {
// node_modules被打包成chunk-vendors
vendors: {
name: ‘chunk-vendors’,
test: /[\/]node_modules[\/]/,
priority: -10,
chunks: ‘initial’
},
// 其他模块如果被引用超过两次，被打包成chunk-common
common: {
name: ‘chunk-common’,
minChunks: 2,
priority: -20,
chunks: ‘initial’,
reuseExistingChunk: true
}
}
},
// 压缩选项
minimizer: [
/* config.optimization.minimizer(‘terser’) */
new TerserPlugin(
{
terserOptions: {
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
},
mangle: {
safari10: true
}
},
sourceMap: true,
cache: true,
parallel: true,
extractComments: false
}
)
]
},
// 插件
plugins: [
/* config.plugin(‘vue-loader’) */
new VueLoaderPlugin(),
/* config.plugin(‘define’) */
new DefinePlugin(
{
‘process.env’: {
NODE_ENV: ‘“development”’,
BASE_URL: ‘“/”’
}
}
),
/* config.plugin(‘case-sensitive-paths’) */
new CaseSensitivePathsPlugin(),
/* config.plugin(‘friendly-errors’) */
new FriendlyErrorsWebpackPlugin(
{
additionalTransformers: [
function () { /* omitted long function */
}
],
additionalFormatters: [
function () { /* omitted long function */
}
]
}
),
/* config.plugin(‘html’) */
new HtmlWebpackPlugin(
{
title: ‘02.vue_cli’,
templateParameters: function () { /* omitted long function */
},
template: ‘//public/index.html’
}
),
/* config.plugin(‘preload’) */
// 预加载，提高资源下载权重，优先下载
new PreloadPlugin(
{
rel: ‘preload’,
include: ‘initial’,
fileBlacklist: [
/.map$/,
/hot-update.js$/
]
}
),
/* config.plugin(‘prefetch’) */
// 预加载，空闲时刻加载
new PreloadPlugin(
{
rel: ‘prefetch’,
include: ‘asyncChunks’
}
),
/* config.plugin(‘copy’) */
new CopyPlugin(
[
{
from: ‘//public’,
to: ‘//dist’,
toType: ‘dir’,
ignore: [
‘.DS_Store’,
{
glob: ‘index.html’,
matchBase: false
}
]
}
]
)
],
// 打包入口
entry: {
app: [
‘./src/main.js’
]
}
}
生产环境配置文件
webpack.dev.js
module.exports = {
mode: ‘production’,
context: ‘/’,
// 错误提示
devtool: ‘source-map’,
node: {
setImmediate: false,
process: ‘mock’,
dgram: ‘empty’,
fs: ‘empty’,
net: ‘empty’,
tls: ‘empty’,
child_process: ‘empty’
},
// 使用contenthash做缓存
output: {
path: ‘//dist’,
filename: ‘js/[name].[contenthash:8].js’,
publicPath: ‘/’,
chunkFilename: ‘js/[name].[contenthash:8].js’
},
resolve: {
alias: {
‘@’: ‘//src’,
vue$: ‘vue/dist/vue.runtime.esm.js’
},
extensions: [
‘.mjs’,
‘.js’,
‘.jsx’,
‘.vue’,
‘.json’,
‘.wasm’
],
modules: [
‘node_modules’,
‘//node_modules’,
‘//node_modules/@vue/cli-service/node_modules’
],
plugins: [
/* config.resolve.plugin(‘pnp’) */
{}
]
},
resolveLoader: {
modules: [
‘//node_modules/@vue/cli-plugin-babel/node_modules’,
‘node_modules’,
‘//node_modules’,
‘//node_modules/@vue/cli-service/node_modules’
],
plugins: [
/* config.resolve.plugin(‘pnp-loaders’) */
{}
]
},
module: {
noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
rules: [
/* config.module.rule(‘vue’) */
{
test: /.vue$/,
use: [
/* config.module.rule(‘vue’).use(‘cache-loader’) */
{
loader: ‘//node_modules/cache-loader/dist/cjs.js’,
options: {
cacheDirectory: ‘//node_modules/.cache/vue-loader’,
cacheIdentifier: ‘b478494a’
}
},
/* config.module.rule(‘vue’).use(‘vue-loader’) */
{
loader: ‘//node_modules/vue-loader/lib/index.js’,
options: {
compilerOptions: {
whitespace: ‘condense’
},
cacheDirectory: ‘//node_modules/.cache/vue-loader’,
cacheIdentifier: ‘b478494a’
}
}
]
},
/* config.module.rule(‘images’) */
{
test: /.(png|jpe?g|gif|webp)(?.*)?$/,
use: [
/* config.module.rule(‘images’).use(‘url-loader’) */
{
loader: ‘//node_modules/url-loader/dist/cjs.js’,
options: {
limit: 4096,
fallback: {
loader: ‘//node_modules/file-loader/dist/cjs.js’,
options: {
name: ‘img/[name].[hash:8].[ext]’
}
}
}
}
]
},
/* config.module.rule(‘svg’) */
{
test: /.(svg)(?.*)?$/,
use: [
/* config.module.rule(‘svg’).use(‘file-loader’) */
{
loader: ‘//node_modules/file-loader/dist/cjs.js’,
options: {
name: ‘img/[name].[hash:8].[ext]’
}
}
]
},
/* config.module.rule(‘media’) */
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
use: [
/* config.module.rule(‘media’).use(‘url-loader’) */
{
loader: ‘//node_modules/url-loader/dist/cjs.js’,
options: {
limit: 4096,
fallback: {
loader: ‘//node_modules/file-loader/dist/cjs.js’,
options: {
name: ‘media/[name].[hash:8].[ext]’
}
}
}
}
]
},
/* config.module.rule(‘fonts’) */
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/i,
use: [
/* config.module.rule(‘fonts’).use(‘url-loader’) */
{
loader: ‘//node_modules/url-loader/dist/cjs.js’,
options: {
limit: 4096,
fallback: {
loader: ‘//node_modules/file-loader/dist/cjs.js’,
options: {
name: ‘fonts/[name].[hash:8].[ext]’
}
}
}
}
]
},
/* config.module.rule(‘pug’) */
{
test: /.pug$/,
oneOf: [
/* config.module.rule(‘pug’).oneOf(‘pug-vue’) */
{
resourceQuery: /vue/,
use: [
/* config.module.rule(‘pug’).oneOf(‘pug-vue’).use(‘pug-plain-loader’) */
{
loader: ‘pug-plain-loader’
}
]
},
/* config.module.rule(‘pug’).oneOf(‘pug-template’) */
{
use: [
/* config.module.rule(‘pug’).oneOf(‘pug-template’).use(‘raw’) */
{
loader: ‘raw-loader’
},
/* config.module.rule(‘pug’).oneOf(‘pug-template’).use(‘pug-plain-loader’) */
{
loader: ‘pug-plain-loader’
}
]
}
]
},
/* config.module.rule(‘css’) */
{
test: /.css$/,
oneOf: [
/* config.module.rule(‘css’).oneOf(‘vue-modules’) */
{
resourceQuery: /module/,
use: [
/* config.module.rule(‘css’).oneOf(‘vue-modules’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘css’).oneOf(‘vue-modules’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2,
modules: {
localIdentName: ‘[name][local][hash:base64:5]’
}
}
},
/* config.module.rule(‘css’).oneOf(‘vue-modules’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
}
]
},
/* config.module.rule(‘css’).oneOf(‘vue’) */
{
resourceQuery: /?vue/,
use: [
/* config.module.rule(‘css’).oneOf(‘vue’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘css’).oneOf(‘vue’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘css’).oneOf(‘vue’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
}
]
},
/* config.module.rule(‘css’).oneOf(‘normal-modules’) */
{
test: /.module.\w+$/,
use: [
/* config.module.rule(‘css’).oneOf(‘normal-modules’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘css’).oneOf(‘normal-modules’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2,
modules: {
localIdentName: ‘[name][local][hash:base64:5]’
}
}
},
/* config.module.rule(‘css’).oneOf(‘normal-modules’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
}
]
},
/* config.module.rule(‘css’).oneOf(‘normal’) */
{
use: [
/* config.module.rule(‘css’).oneOf(‘normal’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘css’).oneOf(‘normal’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘css’).oneOf(‘normal’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
}
]
}
]
},
/* config.module.rule(‘postcss’) */
{
test: /.p(ost)?css$/,
oneOf: [
/* config.module.rule(‘postcss’).oneOf(‘vue-modules’) */
{
resourceQuery: /module/,
use: [
/* config.module.rule(‘postcss’).oneOf(‘vue-modules’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘postcss’).oneOf(‘vue-modules’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2,
modules: {
localIdentName: ‘[name][local][hash:base64:5]’
}
}
},
/* config.module.rule(‘postcss’).oneOf(‘vue-modules’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
}
]
},
/* config.module.rule(‘postcss’).oneOf(‘vue’) */
{
resourceQuery: /?vue/,
use: [
/* config.module.rule(‘postcss’).oneOf(‘vue’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘postcss’).oneOf(‘vue’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘postcss’).oneOf(‘vue’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
}
]
},
/* config.module.rule(‘postcss’).oneOf(‘normal-modules’) */
{
test: /.module.\w+$/,
use: [
/* config.module.rule(‘postcss’).oneOf(‘normal-modules’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘postcss’).oneOf(‘normal-modules’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2,
modules: {
localIdentName: ‘[name][local][hash:base64:5]’
}
}
},
/* config.module.rule(‘postcss’).oneOf(‘normal-modules’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
}
]
},
/* config.module.rule(‘postcss’).oneOf(‘normal’) */
{
use: [
/* config.module.rule(‘postcss’).oneOf(‘normal’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘postcss’).oneOf(‘normal’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘postcss’).oneOf(‘normal’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
}
]
}
]
},
/* config.module.rule(‘scss’) */
{
test: /.scss$/,
oneOf: [
/* config.module.rule(‘scss’).oneOf(‘vue-modules’) */
{
resourceQuery: /module/,
use: [
/* config.module.rule(‘scss’).oneOf(‘vue-modules’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘scss’).oneOf(‘vue-modules’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2,
modules: {
localIdentName: ‘[name][local][hash:base64:5]’
}
}
},
/* config.module.rule(‘scss’).oneOf(‘vue-modules’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘scss’).oneOf(‘vue-modules’).use(‘sass-loader’) */
{
loader: ‘sass-loader’,
options: {
sourceMap: false
}
}
]
},
/* config.module.rule(‘scss’).oneOf(‘vue’) */
{
resourceQuery: /?vue/,
use: [
/* config.module.rule(‘scss’).oneOf(‘vue’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘scss’).oneOf(‘vue’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘scss’).oneOf(‘vue’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘scss’).oneOf(‘vue’).use(‘sass-loader’) */
{
loader: ‘sass-loader’,
options: {
sourceMap: false
}
}
]
},
/* config.module.rule(‘scss’).oneOf(‘normal-modules’) */
{
test: /.module.\w+$/,
use: [
/* config.module.rule(‘scss’).oneOf(‘normal-modules’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘scss’).oneOf(‘normal-modules’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2,
modules: {
localIdentName: ‘[name][local][hash:base64:5]’
}
}
},
/* config.module.rule(‘scss’).oneOf(‘normal-modules’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘scss’).oneOf(‘normal-modules’).use(‘sass-loader’) */
{
loader: ‘sass-loader’,
options: {
sourceMap: false
}
}
]
},
/* config.module.rule(‘scss’).oneOf(‘normal’) */
{
use: [
/* config.module.rule(‘scss’).oneOf(‘normal’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘scss’).oneOf(‘normal’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘scss’).oneOf(‘normal’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘scss’).oneOf(‘normal’).use(‘sass-loader’) */
{
loader: ‘sass-loader’,
options: {
sourceMap: false
}
}
]
}
]
},
/* config.module.rule(‘sass’) */
{
test: /.sass$/,
oneOf: [
/* config.module.rule(‘sass’).oneOf(‘vue-modules’) */
{
resourceQuery: /module/,
use: [
/* config.module.rule(‘sass’).oneOf(‘vue-modules’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘sass’).oneOf(‘vue-modules’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2,
modules: {
localIdentName: ‘[name][local][hash:base64:5]’
}
}
},
/* config.module.rule(‘sass’).oneOf(‘vue-modules’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘sass’).oneOf(‘vue-modules’).use(‘sass-loader’) */
{
loader: ‘sass-loader’,
options: {
sourceMap: false,
sassOptions: {
indentedSyntax: true
}
}
}
]
},
/* config.module.rule(‘sass’).oneOf(‘vue’) */
{
resourceQuery: /?vue/,
use: [
/* config.module.rule(‘sass’).oneOf(‘vue’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘sass’).oneOf(‘vue’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘sass’).oneOf(‘vue’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘sass’).oneOf(‘vue’).use(‘sass-loader’) */
{
loader: ‘sass-loader’,
options: {
sourceMap: false,
sassOptions: {
indentedSyntax: true
}
}
}
]
},
/* config.module.rule(‘sass’).oneOf(‘normal-modules’) */
{
test: /.module.\w+$/,
use: [
/* config.module.rule(‘sass’).oneOf(‘normal-modules’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘sass’).oneOf(‘normal-modules’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2,
modules: {
localIdentName: ‘[name][local][hash:base64:5]’
}
}
},
/* config.module.rule(‘sass’).oneOf(‘normal-modules’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘sass’).oneOf(‘normal-modules’).use(‘sass-loader’) */
{
loader: ‘sass-loader’,
options: {
sourceMap: false,
sassOptions: {
indentedSyntax: true
}
}
}
]
},
/* config.module.rule(‘sass’).oneOf(‘normal’) */
{
use: [
/* config.module.rule(‘sass’).oneOf(‘normal’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘sass’).oneOf(‘normal’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘sass’).oneOf(‘normal’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘sass’).oneOf(‘normal’).use(‘sass-loader’) */
{
loader: ‘sass-loader’,
options: {
sourceMap: false,
sassOptions: {
indentedSyntax: true
}
}
}
]
}
]
},
/* config.module.rule(‘less’) */
{
test: /.less$/,
oneOf: [
/* config.module.rule(‘less’).oneOf(‘vue-modules’) */
{
resourceQuery: /module/,
use: [
/* config.module.rule(‘less’).oneOf(‘vue-modules’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘less’).oneOf(‘vue-modules’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2,
modules: {
localIdentName: ‘[name][local][hash:base64:5]’
}
}
},
/* config.module.rule(‘less’).oneOf(‘vue-modules’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘less’).oneOf(‘vue-modules’).use(‘less-loader’) */
{
loader: ‘less-loader’,
options: {
sourceMap: false
}
}
]
},
/* config.module.rule(‘less’).oneOf(‘vue’) */
{
resourceQuery: /?vue/,
use: [
/* config.module.rule(‘less’).oneOf(‘vue’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘less’).oneOf(‘vue’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘less’).oneOf(‘vue’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘less’).oneOf(‘vue’).use(‘less-loader’) */
{
loader: ‘less-loader’,
options: {
sourceMap: false
}
}
]
},
/* config.module.rule(‘less’).oneOf(‘normal-modules’) */
{
test: /.module.\w+$/,
use: [
/* config.module.rule(‘less’).oneOf(‘normal-modules’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘less’).oneOf(‘normal-modules’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2,
modules: {
localIdentName: ‘[name][local][hash:base64:5]’
}
}
},
/* config.module.rule(‘less’).oneOf(‘normal-modules’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘less’).oneOf(‘normal-modules’).use(‘less-loader’) */
{
loader: ‘less-loader’,
options: {
sourceMap: false
}
}
]
},
/* config.module.rule(‘less’).oneOf(‘normal’) */
{
use: [
/* config.module.rule(‘less’).oneOf(‘normal’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘less’).oneOf(‘normal’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘less’).oneOf(‘normal’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘less’).oneOf(‘normal’).use(‘less-loader’) */
{
loader: ‘less-loader’,
options: {
sourceMap: false
}
}
]
}
]
},
/* config.module.rule(‘stylus’) */
{
test: /.styl(us)?$/,
oneOf: [
/* config.module.rule(‘stylus’).oneOf(‘vue-modules’) */
{
resourceQuery: /module/,
use: [
/* config.module.rule(‘stylus’).oneOf(‘vue-modules’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘stylus’).oneOf(‘vue-modules’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2,
modules: {
localIdentName: ‘[name][local][hash:base64:5]’
}
}
},
/* config.module.rule(‘stylus’).oneOf(‘vue-modules’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘stylus’).oneOf(‘vue-modules’).use(‘stylus-loader’) */
{
loader: ‘stylus-loader’,
options: {
sourceMap: false,
preferPathResolver: ‘webpack’
}
}
]
},
/* config.module.rule(‘stylus’).oneOf(‘vue’) */
{
resourceQuery: /?vue/,
use: [
/* config.module.rule(‘stylus’).oneOf(‘vue’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘stylus’).oneOf(‘vue’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘stylus’).oneOf(‘vue’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘stylus’).oneOf(‘vue’).use(‘stylus-loader’) */
{
loader: ‘stylus-loader’,
options: {
sourceMap: false,
preferPathResolver: ‘webpack’
}
}
]
},
/* config.module.rule(‘stylus’).oneOf(‘normal-modules’) */
{
test: /.module.\w+$/,
use: [
/* config.module.rule(‘stylus’).oneOf(‘normal-modules’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘stylus’).oneOf(‘normal-modules’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2,
modules: {
localIdentName: ‘[name][local][hash:base64:5]’
}
}
},
/* config.module.rule(‘stylus’).oneOf(‘normal-modules’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘stylus’).oneOf(‘normal-modules’).use(‘stylus-loader’) */
{
loader: ‘stylus-loader’,
options: {
sourceMap: false,
preferPathResolver: ‘webpack’
}
}
]
},
/* config.module.rule(‘stylus’).oneOf(‘normal’) */
{
use: [
/* config.module.rule(‘stylus’).oneOf(‘normal’).use(‘extract-css-loader’) */
{
loader: ‘//node_modules/mini-css-extract-plugin/dist/loader.js’,
options: {
hmr: false,
publicPath: ‘…/’
}
},
/* config.module.rule(‘stylus’).oneOf(‘normal’).use(‘css-loader’) */
{
loader: ‘//node_modules/css-loader/dist/cjs.js’,
options: {
sourceMap: false,
importLoaders: 2
}
},
/* config.module.rule(‘stylus’).oneOf(‘normal’).use(‘postcss-loader’) */
{
loader: ‘//node_modules/postcss-loader/src/index.js’,
options: {
sourceMap: false,
plugins: [
function () { /* omitted long function */
}
]
}
},
/* config.module.rule(‘stylus’).oneOf(‘normal’).use(‘stylus-loader’) */
{
loader: ‘stylus-loader’,
options: {
sourceMap: false,
preferPathResolver: ‘webpack’
}
}
]
}
]
},
/* config.module.rule(‘js’) */
{
test: /.m?jsx?$/,
exclude: [
function () { /* omitted long function */
}
],
use: [
/* config.module.rule(‘js’).use(‘cache-loader’) */
{
loader: ‘//node_modules/cache-loader/dist/cjs.js’,
options: {
cacheDirectory: ‘//node_modules/.cache/babel-loader’,
cacheIdentifier: ‘bf6c8644’
}
},
/* config.module.rule(‘js’).use(‘thread-loader’) */
{
// 多线程打包
loader: ‘//node_modules/thread-loader/dist/cjs.js’
},
/* config.module.rule(‘js’).use(‘babel-loader’) */
{
loader: ‘//node_modules/babel-loader/lib/index.js’
}
]
},
/* config.module.rule(‘eslint’) */
{
enforce: ‘pre’,
test: /.(vue|(j|t)sx?)$/,
exclude: [
/node_modules/,
‘//node_modules/@vue/cli-service/lib’
],
use: [
/* config.module.rule(‘eslint’).use(‘eslint-loader’) */
{
loader: ‘//node_modules/eslint-loader/index.js’,
options: {
extensions: [
‘.js’,
‘.jsx’,
‘.vue’
],
cache: true,
cacheIdentifier: ‘6340a568’,
emitWarning: false,
emitError: false,
eslintPath: ‘//node_modules/eslint’,
formatter: undefined
}
}
]
}
]
},
optimization: {
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
}
}
},
minimizer: [
/* config.optimization.minimizer(‘terser’) */
new TerserPlugin(
{
terserOptions: {
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
},
mangle: {
safari10: true
}
},
sourceMap: true,
cache: true,
parallel: true,
extractComments: false
}
)
]
},
plugins: [
/* config.plugin(‘vue-loader’) */
new VueLoaderPlugin(),
/* config.plugin(‘define’) */
new DefinePlugin(
{
‘process.env’: {
NODE_ENV: ‘“production”’,
BASE_URL: ‘“/”’
}
}
),
/* config.plugin(‘case-sensitive-paths’) */
new CaseSensitivePathsPlugin(),
/* config.plugin(‘friendly-errors’) */
new FriendlyErrorsWebpackPlugin(
{
additionalTransformers: [
function () { /* omitted long function */
}
],
additionalFormatters: [
function () { /* omitted long function */
}
]
}
),
/* config.plugin(‘extract-css’) */
new MiniCssExtractPlugin(
{
filename: ‘css/[name].[contenthash:8].css’,
chunkFilename: ‘css/[name].[contenthash:8].css’
}
),
/* config.plugin(‘optimize-css’) */
new OptimizeCssnanoPlugin(
{
sourceMap: false,
cssnanoOptions: {
preset: [
‘default’,
{
mergeLonghand: false,
cssDeclarationSorter: false
}
]
}
}
),
/* config.plugin(‘hash-module-ids’) */
new HashedModuleIdsPlugin(
{
hashDigest: ‘hex’
}
),
/* config.plugin(‘named-chunks’) */
new NamedChunksPlugin(
function () { /* omitted long function */
}
),
/* config.plugin(‘html’) */
new HtmlWebpackPlugin(
{
title: ‘02.vue_cli’,
templateParameters: function () { /* omitted long function */
},
minify: {
removeComments: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeScriptTypeAttributes: true
},
template: ‘//public/index.html’
}
),
/* config.plugin(‘preload’) */
new PreloadPlugin(
{
rel: ‘preload’,
include: ‘initial’,
fileBlacklist: [
/.map$/,
/hot-update.js$/
]
}
),
/* config.plugin(‘prefetch’) */
new PreloadPlugin(
{
rel: ‘prefetch’,
include: ‘asyncChunks’
}
),
/* config.plugin(‘copy’) */
new CopyPlugin(
[
{
from: ‘//public’,
to: ‘//dist’,
toType: ‘dir’,
ignore: [
‘.DS_Store’,
{
glob: ‘index.html’,
matchBase: false
}
]
}
]
)
],
entry: {
app: [
‘./src/main.js’
]
}
}
比较
生产环境css相关loader有些变化，js进行多线程打包，加了一些插件
loader本质上是函数，webpack在调用的时候会将文件传递到函数中，函数处理完成后将结果返回
即：loader是对文件做处理的函数
如果用use指定使用多个loader，那么loader的执行顺序是从下向上（从右向左/从后向前）。
但是loader中可以指定pitch函数，pitch会从前向后执行
module.exports.pitch = function () {
xxx
}
即：在loader中，module.exports函数，会从后向前依次执行，但是module.exports.pitch函数，会从前向后执行
// loader本质上是一个函数
// 同步loader
// module.exports = function (content, map, meta) {
// console.log(111);
// return content;
// }
module.exports = function (content, map, meta) {
console.log(111);
this.callback(null, content, map, meta);
}
module.exports.pitch = function () {
console.log(‘pitch 111’);
}
loader可以使用异步loader，使用this.async()，并使用callback接收。后续可以做一些异步操作，做完后执行callback才会执行后续操作。
// loader本质上是一个函数
// 异步loader
module.exports = function (content, map, meta) {
console.log(222);
const callback = this.async();
setTimeout(() => {
callback(null, content);
}, 1000)
}
module.exports.pitch = function () {
console.log(‘pitch 222’);
}
在使用loader的时候，会使用options传递一些参数
{
loader: ‘loader3’,
options: {
name: ‘jack’,
age: 18
}
}
可以使用loader-utils库进行接收参数。
使用方法
// loader本质上是一个函数
const { getOptions } = require(‘loader-utils’);
module.exports = function (content, map, meta) {
// 获取options
const options = getOptions(this);
console.log(333, options);
return content;
}
module.exports.pitch = function () {
console.log(‘pitch 333’);
}
可以使用schema-utils库进行参数校验。
使用方法：
- 定义
schema.json确定格式，确定格式描述是否允许追加等信息
{
“type”: “object”,
“properties”: {
“name”: {
“type”: “string”,
“description”: “名称～”
}
},
“additionalProperties”: false
}
其中additionalProperties表示是否可以追加其他属性
- 在loader中进行校验
// loader本质上是一个函数
const {getOptions} = require(‘loader-utils’);
const {validate} = require(‘schema-utils’);
const schema = require(‘./schema’);
module.exports = function (content, map, meta) {
// 获取options
const options = getOptions(this);
console.log(333, options);
// 校验options是否合法
validate(schema, options, {
name: ‘loader3’
})
return content;
}
module.exports.pitch = function () {
console.log(‘pitch 333’);
}
validate接收三个参数，第一个是校验规则，第二个是参数，第三个指定当前loader名称。
自定义babelLaoder
- 定义校验规则
babelSchema.json
{
“type”: “object”,
“properties”: {
“presets”: {
“type”: “array”
}
},
“additionalProperties”: true
}
- 定义babelLoader
const { getOptions } = require(‘loader-utils’);
const { validate } = require(‘schema-utils’);
const babel = require(‘@babel/core’);
const util = require(‘util’);
const babelSchema = require(‘./babelSchema.json’);
// babel.transform用来编译代码的方法
// 是一个普通异步方法
// util.promisify将普通异步方法转化成基于promise的异步方法
const transform = util.promisify(babel.transform);
module.exports = function (content, map, meta) {
// 获取loader的options配置
const options = getOptions(this) || {};
// 校验babel的options的配置
validate(babelSchema, options, {
name: ‘Babel Loader’
});
// 创建异步
const callback = this.async();
// 使用babel编译代码
transform(content, options)
.then(({code, map}) => callback(null, code, map, meta))
.catch((e) => callback(e))
}
Tapable
const {SyncHook, SyncBailHook, AsyncParallelHook, AsyncSeriesHook} = require(‘tapable’);
class Lesson {
constructor() {
// 初始化hooks容器
this.hooks = {
// 同步hooks，任务回依次执行
// go: new SyncHook([‘address’])
// SyncBailHook：一旦有返回值就会退出～
go: new SyncBailHook([‘address’]),
// 异步hooks
// AsyncParallelHook：异步并行
// leave: new AsyncParallelHook([‘name’, ‘age’]),
// AsyncSeriesHook: 异步串行
leave: new AsyncSeriesHook([‘name’, ‘age’])
}
}
tap() {
// 往hooks容器中注册事件/添加回调函数
this.hooks.go.tap(‘class0318’, (address) => {
console.log(‘class0318’, address);
return 111;
})
this.hooks.go.tap(‘class0410’, (address) => {
console.log(‘class0410’, address);
})
this.hooks.leave.tapAsync(‘class0510’, (name, age, cb) => {
setTimeout(() => {
console.log(‘class0510’, name, age);
cb();
}, 2000)
})
this.hooks.leave.tapPromise(‘class0610’, (name, age) => {
return new Promise((resolve) => {
setTimeout(() => {
console.log(‘class0610’, name, age);
resolve();
}, 1000)
})
})
}
start() {
// 触发hooks
this.hooks.go.call(‘c318’);
this.hooks.leave.callAsync(‘jack’, 18, function () {
// 代表所有leave容器中的函数触发完了，才触发
console.log(‘end~~~’);
});
}
}
const l = new Lesson();
l.tap();
l.start();
每一个plugin调用的时候都是通过new进行调用的，所以每一个plugin都是一个构造函数或者类。
每一个插件类中必须有一个apply函数，因为插件是通过这个函数进行调用的，接受compiler参数
插件就是在webpack不同生命周期内执行不同操作
class Plugin1 {
apply(complier) {
complier.hooks.emit.tap(‘Plugin1’, (compilation) => {
console.log(‘emit.tap 111’);
})
complier.hooks.emit.tapAsync(‘Plugin1’, (compilation, cb) => {
setTimeout(() => {
console.log(‘emit.tapAsync 111’);
cb();
}, 1000)
})
complier.hooks.emit.tapPromise(‘Plugin1’, (compilation) => {
return new Promise((resolve) => {
setTimeout(() => {
console.log(‘emit.tapPromise 111’);
resolve();
}, 1000)
})
})
complier.hooks.afterEmit.tap(‘Plugin1’, (compilation) => {
console.log(‘afterEmit.tap 111’);
})
complier.hooks.done.tap(‘Plugin1’, (stats) => {
console.log(‘done.tap 111’);
})
}
}
module.exports = Plugin1;
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
n/20210619091430579.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0thaVNhckg=,size_16,color_FFFFFF,t_70)
- 在loader中进行校验
// loader本质上是一个函数
const {getOptions} = require(‘loader-utils’);
const {validate} = require(‘schema-utils’);
const schema = require(‘./schema’);
module.exports = function (content, map, meta) {
// 获取options
const options = getOptions(this);
console.log(333, options);
// 校验options是否合法
validate(schema, options, {
name: ‘loader3’
})
return content;
}
module.exports.pitch = function () {
console.log(‘pitch 333’);
}
validate接收三个参数，第一个是校验规则，第二个是参数，第三个指定当前loader名称。
自定义babelLaoder
- 定义校验规则
babelSchema.json
{
“type”: “object”,
“properties”: {
“presets”: {
“type”: “array”
}
},
“additionalProperties”: true
}
- 定义babelLoader
const { getOptions } = require(‘loader-utils’);
const { validate } = require(‘schema-utils’);
const babel = require(‘@babel/core’);
const util = require(‘util’);
const babelSchema = require(‘./babelSchema.json’);
// babel.transform用来编译代码的方法
// 是一个普通异步方法
// util.promisify将普通异步方法转化成基于promise的异步方法
const transform = util.promisify(babel.transform);
module.exports = function (content, map, meta) {
// 获取loader的options配置
const options = getOptions(this) || {};
// 校验babel的options的配置
validate(babelSchema, options, {
name: ‘Babel Loader’
});
// 创建异步
const callback = this.async();
// 使用babel编译代码
transform(content, options)
.then(({code, map}) => callback(null, code, map, meta))
.catch((e) => callback(e))
}
Tapable
const {SyncHook, SyncBailHook, AsyncParallelHook, AsyncSeriesHook} = require(‘tapable’);
class Lesson {
constructor() {
// 初始化hooks容器
this.hooks = {
// 同步hooks，任务回依次执行
// go: new SyncHook([‘address’])
// SyncBailHook：一旦有返回值就会退出～
go: new SyncBailHook([‘address’]),
// 异步hooks
// AsyncParallelHook：异步并行
// leave: new AsyncParallelHook([‘name’, ‘age’]),
// AsyncSeriesHook: 异步串行
leave: new AsyncSeriesHook([‘name’, ‘age’])
}
}
tap() {
// 往hooks容器中注册事件/添加回调函数
this.hooks.go.tap(‘class0318’, (address) => {
console.log(‘class0318’, address);
return 111;
})
this.hooks.go.tap(‘class0410’, (address) => {
console.log(‘class0410’, address);
})
this.hooks.leave.tapAsync(‘class0510’, (name, age, cb) => {
setTimeout(() => {
console.log(‘class0510’, name, age);
cb();
}, 2000)
})
this.hooks.leave.tapPromise(‘class0610’, (name, age) => {
return new Promise((resolve) => {
setTimeout(() => {
console.log(‘class0610’, name, age);
resolve();
}, 1000)
})
})
}
start() {
// 触发hooks
this.hooks.go.call(‘c318’);
this.hooks.leave.callAsync(‘jack’, 18, function () {
// 代表所有leave容器中的函数触发完了，才触发
console.log(‘end~~~’);
});
}
}
const l = new Lesson();
l.tap();
l.start();
每一个plugin调用的时候都是通过new进行调用的，所以每一个plugin都是一个构造函数或者类。
每一个插件类中必须有一个apply函数，因为插件是通过这个函数进行调用的，接受compiler参数
插件就是在webpack不同生命周期内执行不同操作
class Plugin1 {
apply(complier) {
complier.hooks.emit.tap(‘Plugin1’, (compilation) => {
console.log(‘emit.tap 111’);
})
complier.hooks.emit.tapAsync(‘Plugin1’, (compilation, cb) => {
setTimeout(() => {
console.log(‘emit.tapAsync 111’);
cb();
}, 1000)
})
complier.hooks.emit.tapPromise(‘Plugin1’, (compilation) => {
return new Promise((resolve) => {
setTimeout(() => {
console.log(‘emit.tapPromise 111’);
resolve();
}, 1000)
})
})
complier.hooks.afterEmit.tap(‘Plugin1’, (compilation) => {
console.log(‘afterEmit.tap 111’);
})
complier.hooks.done.tap(‘Plugin1’, (stats) => {
console.log(‘done.tap 111’);
})
}
}
module.exports = Plugin1;
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-wMquGwK6-1715709180781)]
[外链图片转存中…(img-TjMEKO3U-1715709180781)]
[外链图片转存中…(img-0BfKs6Pq-1715709180781)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
