const
path
=
require
(
'
path
'
)
const
HTMLplugin
=
require
(
'
html-webpack-plugin
'
) //页面生成工具
const
webpack
=
require
(
'
webpack
'
)
const
MiniCssExtractPlugin
=
require
(
'
mini-css-extract-plugin
'
)
//处理css工具
const
isDev
=
process
.
env
.
NODE_ENV
===
'
development
'
const
config
=
{
target:
'
Web
'
,
entry:
path
.
join
(
__dirname
,
'
./src/index.js
'
),
output:
{
filename:
'
bundle.[hash:8].js
'
,
path:
path
.
join
(
__dirname
,
'
dist
'
)
},
module:
{
rules:
[
{
test:
/
\.vue$
/
,
loader:
'
vue-loader
'
},
{
test:
/
\.(gif
|
jpg
|
jpeg
|
png
|
svg)$
/
,
use:
[
{
loader:
'
url-loader
'
,
//url-loader 是对file-loader的封装,它可以把图片转换为base64编码直接写在js文件里面,这样可以减少http请求,limit是对文件大小的限制
options:
{
limit:
1024
,
name:
'
[name].[ext]
'
}
}
]
}
]
},
plugins:
[
new
webpack
.
DefinePlugin
({
'
process.env
'
:
{
NODE_ENV:
isDev
?
'
"development"
'
:
'
"production"
'
}
}),
new
HTMLplugin
()
]
}
if
(
isDev
)
{
config
.
mode
=
'
development
'
config
.
module
.
rules
.
push
(
{
test:
/
\.css$
/
,
use:
[
'
style-loader
'
,
'
css-loader
'
]
},
)
config
.
devtool
=
'
#cheap-module-eval-sourece-map
'
config
.
devServer
=
{
port:
8080
,
host:
'
0.0.0.0
'
,
overlay:
{
//处理错误
errors:
true
,
},
// open: true, //自动打开浏览器
hot:
true
,
//启动热更新
}
config
.
plugins
.
push
(
new
webpack
.
HotModuleReplacementPlugin
(),
//热更新依赖插件
new
webpack
.
NoEmitOnErrorsPlugin
()
)
}
else
{
config
.
mode
=
"
production
"
config
.
output
.
filename
=
'
[name].[chunkhash:8].js
' //hash生成名称,便于浏览器长期缓存
config
.
module
.
rules
.
push
(
{
test:
/
\.css$
/
,
use:
[
MiniCssExtractPlugin
.
loader
,
'
css-loader
'
]
},
);
config
.
plugins
.
push
(
new
MiniCssExtractPlugin
({
filename:
"
[name].css
"
,
chunkFilename:
"
styles.[contentHash:8].css
" //把css文件单独打包
}),
new
webpack
.
optimize
.
RuntimeChunkPlugin
({
// 打包和webpack打包相关的代码
name:
'
runtime
'
})
)
config
.
optimization
=
{
splitChunks:
{
cacheGroups:
{
vendor:
{
//打包类库
test:
/
node_modules
/
,
chunks:
"
initial
"
,
name:
'
vue
'
,
priority:
10
,
enforce:
true
},
commons:
{
//打包重复代码
chunks:
'
initial
'
,
minChunks:
2
,
maxInitialRequests:
5
,
minSize:
0
}
}
}
}
}
module
.
exports
=
config
const
path
=
require
(
'
path
'
)
const
MiniCssExtractPlugin
=
require
(
'
mini-css-extract-plugin
'
)
const
HtmlWebpackPlugin
=
require
(
'
html-webpack-plugin
'
)
const
CleanWebpack
=
require
(
'
clean-webpack-plugin
'
)
const
webpack
=
require
(
'
webpack
'
)
module
.
exports
=
{
entry:
{
'
app
'
:
'
./app/index.js
'
,
'
login
'
:
'
./login/index.js
'
,
},
output:
{
filename:
'
[name]/[name].js
'
,
path:
__dirname
+
'
/dist
'
,
// publicPath: '/dist'
},
module:
{
rules:
[{
test:
/
\.js$
/
,
use:
[
'
babel-loader
'
],
exclude:
path
.
resolve
(
__dirname
,
'
node_modules
'
)
},
{
test:
/
\.css$
/
,
use:
[
MiniCssExtractPlugin
.
loader
,
'
css-loader
'
]
},
{
test:
/
\.(png
|
jpeg
|
jpg
|
svg)$
/
,
loader:
'
file-loader
'
,
options:
{
name:
'
img/[name].[hash:8].[ext]
'
,
//服务器
publicPath:
'
/
'
,
//本地环境
// publicPath: path.join(__dirname, 'dist')
}
}
]
},
// watch: true,
devServer:
{
historyApiFallback:
true
,
open:
true
,
hot:
true
,
// contentBase: path.join(__dirname, 'dist'),
// publicPath: __dirname,
compress:
true
,
// proxy: {
// '/': {
// target: 'http://localhost:8080/dist/app/app.html'
// }
// }
},
plugins:
[
new
webpack
.
NamedModulesPlugin
(),
new
webpack
.
HotModuleReplacementPlugin
(),
new
MiniCssExtractPlugin
({
filename:
'
[name]/[name]_[contenthash:8].css
'
,
chunckFilename:
'
[id].css
'
,
}),
new
HtmlWebpackPlugin
({
filename:
'
app/app.html
'
,
inject:
true
,
chunks:
[
'
app
'
,
'
commons
'
,
'
vendors
'
,
'
manifest
'
]
}),
new
HtmlWebpackPlugin
({
filename:
'
login/login.html
'
,
inject:
true
,
chunks:
[
'
login
'
,
'
vendors
'
,
'
commons
'
,
'
manifest
'
]
}),
new
CleanWebpack
(
'
dist/*.*
'
,
{
root:
__dirname
,
verbose:
true
,
dry:
false
})
// new webpack.DefinePlugin({
// 'process.env': {
// NODE_ENV: JSON.stringify('production')
// }
// }),
// new UglifyJsPlugin({
// uglifyOptions: {
// warnings: false,
// output: {
// comments: false,
// beautify: false,
// }
// }
// }),
],
optimization:
{
minimize:
true
,
splitChunks:
{
cacheGroups:
{
commons:
{
name:
'
commons
'
,
chunks:
"
initial
"
,
minChunks:
2
,
maxInitialRequests:
5
,
// The default limit is too small to showcase the effect
minSize:
0
// This is example is too small to create commons chunks
},
vendors:
{
test:
/
node_modules
/
,
chunks:
"
all
"
,
name:
"
vendors
"
,
}
}
},
runtimeChunk:
{
name:
'
manifest
'
}
},
mode:
'
none
'
}