安装好webpack之后
在运行npm run build命令时,到底做了写什么?
- 首先这个命令会去运行package.json文件里面的scripts脚本
- scripts脚本首先通过babel把drag编译成.temp临时文文件
- 第三步是scripts会去执行webpack打包命令,该命令会去查找webpack.config.js配置文件中的entry和output,然后输出一个build/bunble.js文件4
- 然后就在本地可以打开index.html文件了
- 到了这一步,只完成了一小步,因此如果我修改一个文件,我还需要手动去运行上面的那个命令,然后在刷新浏览器,才能看到更改后的效果,这样开发效率就会大大降低。这时我们需要“热更新”来帮助我们快速开发。
配置热更新
安装webpack-dev-server
cnpm install webpack-dev-server --g
cnpm install webpack-dev-serve --save-dev
配置webpack.config.js文件
//引入webpack
const webpack = require('webpack');
//
output: {
publicPath: '/dist',
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'dist/' //必须加上
devServer: {
host: 'localhost',
port: '8080',
open: true, //自动拉起浏览器
hot: true, //热加载
//hotOnly:true
},
plugins: [
//热更新插件
new webpack.HotModuleReplacementPlugin()
],
####### 配置 package.json 文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production",
//加上
"start": "webpack-dev-server"
项目打包运行:npm run start
这个时候可能会有一片黄色的警告,详情点击:打包后warning