webpack 监听js自动打包并更新html

package.json

{
"name": "nim_web_sdk_v6.3.0",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open",
"watch": "webpack --watch --mode development",
"build": "webpack --mode production"
},
"author": "jonyguan",
"license": "ISC",
"dependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.7.0",
"webpack": "^4.30.0",
"webpack-dev-server": "^3.3.1"
},
"devDependencies": {
"html-webpack-plugin": "^4.0.0-beta.5",
"webpack-cli": "^3.3.1"
}
}


webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.resolve(__dirname, 'js/src/app.js'),
output: {
filename: 'app.min.js',
path: path.resolve(__dirname, 'js/dist'),
},
plugins: [
new HtmlWebpackPlugin()
],
devServer: {
port: 9000,
hot: true,
watchContentBase: true,
contentBase: path.resolve(__dirname, './'),
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env"
]
}
},
exclude: path.resolve(__dirname, "node_modules"),
include: path.resolve(__dirname, "src")
}
]
}
}

操作步骤:
  1. npm install

  2. npm run dev

  3. 开始你的表演