安装依赖

"devDependencies": {"babel-core": "^6.26.3","babel-loader": "^8.0.6","babel-preset-env": "^1.7.0","html-webpack-plugin": "^3.2.0","webpack": "^4.35.0","webpack-cli": "^3.3.5","webpack-dev-server": "^3.7.2"}

配置指令

"dev": "webpack-dev-server --content-base dist/ --hot --config webpack.config.js --progress --display-modules --colors --display-reasons"

--hot  热更新

--config webpack.config.js  默认配置文件

--progress 显示进度

--display-module 显示加载的模块

--colors 显示不同的颜色

--display-reasons 显示原因

配置文件

 webpack.config.js

const path = require('path'),HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {mode: 'development',// 入口entry: './src/js/index.js',// 出口output: {path: path.resolve(__dirname, 'dist'),filename: 'js/bundle.js',},// 模块module: {rules: [{test: /\.js$/,loader: 'babel-loader',exclude: __dirname + '/node_modules/',include: __dirname + '/src',options: {presets: ['env'],},},],},// 插件plugins: [// html 压缩处理new HtmlWebpackPlugin({minify: {removeComments: true,collapseWhitespace: true},filename: 'index.html',template: path.resolve(__dirname, 'src/index.html'),excludeChunks: ['node_modules'],files: {js: ['js/bundle.js'],chunks: {'main': {'entry':  'dist/bundle.js'}}}})],// 本地服务配置devServer: {watchOptions: {ignored: /node_modules/,},host: 'localhost',port: 3000}
}