-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
164 lines (158 loc) · 5.79 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//兼容性问题所以用MiniCssExtractPlugin
const CopyWebpackPlugin = require('copy-webpack-plugin');
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const glob = require("glob");
//消除冗余的css
const purifyCssWebpack = require("purifycss-webpack");
//打包之前删除之前的打包文件
const cleanWebpackPlugin = require('clean-webpack-plugin');
//解除相互占用err
const CircularDependencyPlugin = require('circular-dependency-plugin');
const ouputfileName = 'outPutPage';
//获取列表
let pageL =require('./pageList');
module.exports = {
context: __dirname, //基础目录,绝对路径,用于从配置中解析入口起点(entry point)和 loader
mode: 'production', //或者production 这里选择模式(会影响生成js的结构)
entry: {
login: './src/entryPage/Login/main',
Index: './src/entryPage/Index/main',
jquery: 'jquery'
},
output: {
path: path.resolve(__dirname, ouputfileName),
filename: 'js/[name]-[hash].js',
// publicPath:'http://cdn.com/'//替换为cdn地址
},
devServer: {
'contentBase': "./" + ouputfileName,
'inline': true, //不让显示inline信息(server连接信息)
'port': '8888',
// 'host': '0.0.0.0',//开发手机端
// hot: true, // 热更新 需要new webpack.HotModuleReplacementPlugin()
open: true, //启动自动打开浏览器(open: 'Google Chrome'),写true打开默认浏览器
openPage: '', //打开导航的页面
overlay: { //当存在编译器错误或警告时,在浏览器中显示全屏覆盖。默认情况下禁用。
warnings: true,
errors: true
},
proxy: { //代理
"/api": {
target: "http://192.168.123.77:9092",
changeOrgin: true,
pathRewrite: {
'^/api': '/'
}
},
//可以多个代理
},
},
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: path.resolve(__dirname, "node_modules"),
include: path.resolve(__dirname, "src")
},
{
test: /\.html$/,
loader: 'html-loader',
query: {
minimize: true
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
// use: [{
// loader: MiniCssExtractPlugin.loader,
// options: {
// minimize: true,
// // you can specify a publicPath here
// // by default it use publicPath in webpackOptions.output
// publicPath: '../'
// }
// },
// "css-loader"
// ]
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!postcss-loader!less-loader',
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: ['url-loader?limit=200000000&name=assets/[name]-[hash:5].[ext]',
'image-webpack-loader'
],
},
]
},
// 提取js,vendor名字可改
// optimization: {
// splitChunks: {
// cacheGroups: {
// chunks: "initial",
// vendor: {
// test: /Index\//,
// name: "page/index",
// priority: 10,
// enforce: true
// }
// }
// }
// },
resolve: {
alias: { //配置别名
"@": path.resolve(__dirname, 'src/'),
"Templates": path.resolve(__dirname, 'src/components/')
}
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery"
}),
//css分离插件 1:ExtractTextPlugin、2:MiniCssExtractPlugin
new ExtractTextPlugin('css/[name]/styles.css'),
// new MiniCssExtractPlugin({
// filename: "css/[name]/styles.css" //如果需要将css文件单独放入css文件夹中需要../
// }),
//静态资源放入
new CopyWebpackPlugin([{
from: path.resolve(__dirname, 'public'),
to: 'public',
ignore: ['.*']
}]),
new CircularDependencyPlugin({
// exclude detection of files based on a RegExp
exclude: /a\.js|node_modules/,
// add errors to webpack instead of warnings
failOnError: true,
// set the current working directory for displaying module paths
cwd: process.cwd(),
}),
// 消除冗余的css代码 (遗留配置)
// new purifyCssWebpack({
// // glob为扫描模块,使用其同步方法
// paths: glob.sync(path.join(__dirname, "src/*.html"))
// }),
// 清除插件
new cleanWebpackPlugin([ouputfileName]),
...pageL
],
performance: { //做一些限制
hints: "warning", // 枚举
maxAssetSize: 30000000, // 整数类型(以字节为单位)
maxEntrypointSize: 50000000, // 整数类型(以字节为单位)
assetFilter: function(assetFilename) {
// 提供资源文件名的断言函数
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
};