前戏
每一次手动打包很麻烦，打包后还需要手动刷新浏览器。
采用 webpack 提供的工具： webpack-dev-server ，它允许在运行时更新所有类型的模块后，而无需手动打包和刷新页面，会自动打包和刷新页面。可以很大程度提高开发效率。
参考：https://webpack.docschina.org/guides/development/#使用-webpack-dev-server
安装
在当前项目下安装
npm install --save-dev webpack-dev-server
修改 webpack.config.js 配置
// 引入node中的path模块，处理文件路径 的小工具 const path = require('path') // 引入插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); // 导出一个webpack具有特殊属性配置的对象 module.exports = { mode: 'none', // 指定模式配置："development" | "production" | "none" // 入口 entry: './src/main.js', // 入口模块文件路径 // 出口 output: { // path: './dist/', 错误的，要指定绝对路径 path: path.join(__dirname, './dist/'), //打包的结果文件生成的目录要是绝对路径 filename: 'bundle.js' }, // 配置插件 plugins: [ new HtmlWebpackPlugin({ // 指定要打包的模板页面 // 就会将 index.html 打包到与 bundle.js 所在同一目录下面， // 同时在 index.html 中会自动的使用script 标签引入bundle.js template: './index.html' }) ], // 实时重新加载 devServer: { // 目标路径 contentBase: './dist' }, module: { rules: [ //配置转换规则 { test: /\.css$/, // 注意，不要有单引号，正则表达 式，匹配 .css 文件资源 use: [ // 根据外国人的习惯来的顺序，而且顺序不要写错 'style-loader', // js识别css 'css-loader' // css 转换为 js ] }, { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }, ] } }
修改 package.json 的 scripts
{ "name": "webpack-demo2", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "show": "webpack -v", "start": "node ./src/main.js", "build": "webpack", "watch": "webpack --watch", "dev": "webpack-dev-server --open" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^3.2.0", "file-loader": "^4.2.0", "html-webpack-plugin": "^3.2.0", "style-loader": "^1.0.0", "webpack": "^4.35.2", "webpack-cli": "^3.3.6", "webpack-dev-server": "^3.8.2" } }
在之前的基础上加上"dev": "webpack-dev-server --open"
--open 选项打包成功，自动打开浏览器
打包
npm run dev
测试，修改 style.css, 会自动打包且浏览器会自动刷新, 如下注释掉图片，就只有背景色了
