1、常见的配置如下
module.
exports = {
context:
path.
resolve(
__dirname,
'../'),
entry: {
app:
'./src/main.js' //入口文件
},
devServer: {
clientLogLevel:
'warning',
historyApiFallback: { //跳转
rewrites: [
{
from:
/.
*
/,
to:
path.
posix.
join(
config.
dev.
assetsPublicPath,
'index.html') },
],
},
hot:
true,
contentBase:
false,
// since we use CopyWebpackPlugin.
compress:
true,
host:
HOST ||
config.
dev.
host,
port:
PORT ||
config.
dev.
port,
open:
config.
dev.
autoOpenBrowser,
overlay:
config.
dev.
errorOverlay
? {
warnings:
false,
errors:
true }
:
false,
publicPath:
config.
dev.
assetsPublicPath,
proxy:
config.
dev.
proxyTable,
quiet:
true,
// necessary for FriendlyErrorsPlugin
watchOptions: {
poll:
config.
dev.
poll,
}
},
output: {
path:
config.
build.
assetsRoot, //path告诉webpack结果存储在哪里
filename:
'[name].js', //出口名称
publicPath:
process.
env.
NODE_ENV ===
'production'
?
config.
build.
assetsPublicPath
:
config.
dev.
assetsPublicPath
},
resolve: { //处理文件的扩展名
extensions: [
'.js',
'.vue',
'.json'],
alias: {
'vue$'
:
'vue/dist/vue.esm.js',
'@'
:
resolve(
'src'),
}
},
module: { //module模块加载，用于将不同文件类型的load和import转换成浏览器可以识别的类型
rules: [
{
test:
/
\.
vue
$
/,
loader:
'vue-loader',
options:
vueLoaderConfig
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate:
false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram:
'empty',
fs:
'empty',
net:
'empty',
tls:
'empty',
child_process:
'empty'
},
plugins: [
new
webpack.
DefinePlugin({
'process.env'
:
require(
'../config/dev.env')
}),
new
webpack.
HotModuleReplacementPlugin(),
new
webpack.
NamedModulesPlugin(),
// HMR shows correct file names in console on update.
new
webpack.
NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new
HtmlWebpackPlugin({
filename:
'index.html', //生成的html文件
template:
'index.html', //模板文件
inject:
true,
//规定js是在头部还是body标签里，默认是body底部
minify:{
removeComents:true, //删除注释
collapsewhitespace:true //删除空白
}
}),
// copy custom static assets
new
CopyWebpackPlugin([
{
from:
path.
resolve(
__dirname,
'../static'),
to:
config.
dev.
assetsSubDirectory,
ignore: [
'.*']
}
])
]
}
2、webpack的优点
模块化、能够运行scss、less等预处理语言、类似typescript这种基于javascript开发的语言，将其转换或打包成合适的格式给浏览器使用。