webpack热更新
webpack watch
在该模式下，webpack依赖图中的文件，只要有一个发生了更新，那么代码将被重新编译
- 在导出的配置中，添加watch:true;
- 在启动webpack的命令中，添加--watch的标识；
在package.json中，添加
"scripts": {
"build": "webpack --watch"
},
webpak-cli会去帮助处理
webpack-dev-server
上述的方式可以监听文件的变化，但是事实上它本身没有自动刷新浏览器的功能的。
安装webpack-dev-server
npm install webpack-dev-server -D
"scripts": {
"build": "webpack",
"serve": "webpack serve"
},
执行npm run serve 会创建一个地址，基于express框架
devServer配置
在webpack.config.js中添加devServer可以修改端口号、服务器地址等信息
devServer: {
hot: true, //热模块替换,当一个模块改变时，只改变那个模块下的内容
port: "6769", //端口号
open: true, //自动打开浏览器
compress: true, //开启gzip压缩,但好像不开启默认gzip?
proxy: {
"/api": {
target: "http://localhost:8888", //对于'/api/moment'这个地址会映射到'http://localhost:8888/api/moment'
pathRewrite: {
"^/api": "" //路径重写.对于'/api/moment'这个地址会映射到'http://localhost:8888/moment'
},
secure: false, //默认情况不接收转发到https服务器上,如果希望支持,可以设置为false
changeOrigin: true //一般设置true
}
}
},
resolve
webpack.config.js中配置
resolve: {
extensions: [".js",".json", ".vue", ".ts", ".jsx", ".tsx"], //引入文件的时候就不用写后缀名
alias: {
"@": path.resolve(__dirname,"./src") //@替代src下文件
}
},
区分开发及生产环境 创建不同的config.js
"scripts": {
"build": "webpack --config ./config/webpack.prod.config.js",
"serve": "webpack serve --config ./config/webpack.prod.config.js"
},
在命令中指定执行哪个config文件
