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") } ] } } 操作步骤:
npm install
npm run dev
开始你的表演