1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
'use strict'
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const isProd = process.env.NODE_ENV === 'production'
const plugins = []
if (isProd) {
const filename = 'css/[name].[contenthash:8].css'
plugins.push(
new MiniCssExtractPlugin({
filename,
chunkFilename: filename,
})
)
}
const genStyleRules = () => {
const cssLoader = {
loader: 'css-loader',
options: {
// how many loaders before css-loader should be applied to [@import]ed resources.
// stylePostLoader injected by vue-loader + postcss-loader
importLoaders: 1 + 1,
esModule: false, // css-loader using ES Modules as default in v4, but vue-style-loader support cjs only.
},
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [require('autoprefixer')]
},
},
}
const extractPluginLoader = {
loader: MiniCssExtractPlugin.loader,
}
const vueStyleLoader = {
loader: 'vue-style-loader',
}
function createCSSRule(test, loader, loaderOptions) {
const loaders = [cssLoader, postcssLoader]
if (isProd) {
loaders.unshift(extractPluginLoader)
} else {
loaders.unshift(vueStyleLoader)
}
if (loader) {
loaders.push({ loader, options: loaderOptions })
}
return { test, use: loaders }
}
return [
createCSSRule(/\.css$/),
createCSSRule(/\.p(ost)?css$/),
createCSSRule(/\.scss$/, 'sass-loader')
]
}
module.exports = {
plugins,
module: {
rules: genStyleRules(),
},
}
|
