1.基本概念:
配置方式:如果没有创建webpack.config.js或指定mode (production/development)会直接打包压缩生产模式。webpack配置文件的默认名称:webpack.config.js / webpackfile.js 一般选前一种
(1)入口entry/出口output:
entry可多入口,可构建多页面应用,设计多个html文件在根目录来一并打包实现;
output:单出口,如果是多页面用'[name].js',代表各个入口文件名
可以在webpack脚本中编写额外的代码来动态通过命令行参数修改entry/output构建定制化的打包逻辑
(2)loader:webpack默认只将JS文件模块化,loader可以将其他文件模块化导入
处理所有非js文件都支持import导入
loader支持链式传递
(3)plugin插件:执行更多包括工具、打包压缩、环境的任务
插件是构造函数,使用时需要new一个对象
2.核心配置
let path = require('path');
export default {
// 设置process.NODE_ENV的值为production或development,并启用相应模式下的插件
mode: 'production',
// 指定entry和output基础目录,分离配置文件用
context:path.resolve('../src'),
// 路径相关配置
resolve: {
// import 导入不带后缀名优先级
extensions: ['.js', '.vue', '.json'],
// 路径简写代理
alias: {
'@': '../src'
},
// 第三方代码目录 默认node_modules
modules:[]
},
entry:{
app:"./index.js"
},
output:{
// 加入hash值可生成不同版本的打包文件
path:`./dist/${Date.now()}`,
filename:'[name].js',
// publicPath用于修改项目中静态资源的引用绝对路径,开发环境默认/,线上环境可能是CDN
publicPath:process.NODE_ENV=='production'?'http://*****':"/"
},
// loader放入module字段下,使用前npm install安装
module:{
rules:[
// 正则:匹配该类型文件
test:/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
// 使用该loader处理该文件
loader:"url-loader",
// 配置
options:{
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
]
},
// 插件
plugin:[
new webpack.optimize.UglifyJsPlugin()
],
// devServer:启动http服务,同时启动webpack,通过websocket进行热更新 npm run dev其实执行的是webpack-dev-server命令
// 修改index.html文件无法触发热更新,因为webpack从entry开始监听
// 开发环境启动服务配置
devServer:{
// 地址
host:"",
// 端口
port:"",
// https证书
https:{},
// 对开发环境文件启用gzip压缩
compress:false,
// 启动后自动打开网页
open:true
},
// source map:代码检查(黑色背景的错误提示)
devtool: 'scource-map',
watchOptions: {
// 不监听的node_modules目录下的文件,这样做会大大减少性能,只是更新node_mudules时需要重启项目
ignored: /node_modules/
}
}