-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.common.js
116 lines (112 loc) · 3.29 KB
/
webpack.common.js
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const htmlPlugin = new HtmlWebpackPlugin({
// 生成的html的title
title: 'Sycamore',
// 生成的html的文件名
filename: 'index.html',
// 注入bundle到body中
inject: 'body',
favicon: './favicon.ico',
template: './src/index.html'
});
const config = {
entry: {
app: './src/main.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
},
{
test: /\.vue$/,
loader:'vue-loader'
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader'
]
},
{
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader', 'less-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, './src/variables.less')
]
}
}
]
},
{
test: /\.(png|jpg|gif|jpeg|ttf)$/,
loader: 'url-loader'
},
{
test: /\.md$/,
loader: 'raw-loader'
}
]
},
plugins: [
htmlPlugin,
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: "css/style.css",
chunkFilename: "css/[name].css"
})
],
resolve: {
extensions: ['*', '.js', '.vue', '.json'],
alias: {
"@src": path.resolve("src"),
"@component": path.resolve("src/component"),
"@pages": path.resolve("src/pages"),
"@assets": path.resolve("src/assets"),
"@utils": path.resolve("src/utils"),
}
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
},
vendor: {
// 使用正则匹配所有加载路径为 node_modules 路径下的模块
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: "initial"
},
}
},
minimizer: [
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
canPrint: true
}),
]
}
};
module.exports = config;