-
Notifications
You must be signed in to change notification settings - Fork 4
/
webpack.config.js
111 lines (107 loc) · 2.88 KB
/
webpack.config.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
const path = require('path');
const webpack = require('webpack');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
let isProd = process.env.NODE_ENV === 'production';
// 解析路径
const resovle = (...dir) => path.join(__dirname, ...dir);
// webpack config
const getWebpackConfig = () => ({
entry: resovle('src/index.js'),
output: {
path: resovle('dist'),
filename: `navify${isProd ? '.min' : ''}.js`,
library: 'navify',
libraryTarget: 'umd', // 输出格式
umdNamedDefine: true,
},
resolve: {
// 补全扩展名
extensions: ['.js', '.vue'],
// 别名
alias: {
'@': resovle('src'),
vue$: 'vue/dist/vue.esm.js', // 运行时构建支持template模版编译
},
},
module: {
rules: [
{
test: /\.js$/,
use: { loader: 'babel-loader' },
include: [resovle('src')],
},
{
test: /\.vue/,
use: { loader: 'vue-loader' },
},
{
test: /\.(less|css)$/,
use: [
{ loader: 'vue-style-loader' },
{ loader: 'css-loader' + (isProd ? '?minimize' : '') },
{ loader: 'postcss-loader' },
{ loader: 'less-loader' },
],
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{ loader: 'url-loader' },
...(isProd
? [
{
// 压缩图片:https://github.com/tcoopman/image-webpack-loader
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
},
},
]
: []),
],
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: { loader: 'url-loader' },
},
],
},
plugins: [
new ProgressBarPlugin(),
new VueLoaderPlugin(),
...(isProd
? [
new UglifyJsPlugin({
uglifyOptions: {
output: { comments: false },
},
}),
]
: [
new webpack.HotModuleReplacementPlugin(),
new FriendlyErrorsPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
]),
],
devServer: {
port: 22001, // 开发端口
contentBase: resovle('test'), // 本地服务器加载页面目录
publicPath: '/dist/', // 打包文件路径
inline: true, // 实时刷新
hot: true, // 开启热模块替换
quiet: true, // 开启friendly-errors-webpack-plugin
overlay: {
// 开启页面报错笼罩
warnings: false,
errors: true,
},
historyApiFallback: false, // History模式路由
},
});
module.exports = (env, argv) => {
isProd = argv.mode === 'production';
return getWebpackConfig();
};