ok，至此，我们第一步也是最重要的一步已经完成了，由于开发项目的时候不可能每次改动代码都构建一次，这样时间成本太大了，我们想要实时看到改变的内容，这个时候就要用webpack4.0提供的devServer了，它使得我们项目可以支持热更新和热模块替换，我们需要在开发环境下对其进行配置，具体如下： 首先安装开发服务器模块：
npm install webpack-dev-server -D
接着配置dev文件：
webpack.dev.js const base = require('./webpack.base'); const merge = require('webpack-merge'); const webpack = require('webpack'); module.exports = merge({ mode: 'development', module: { rules: [ { test: /\.(css|less)$/, use: [ // loader解析的顺序是从下到上，从右到左的顺序 'style-loader', //使用MiniCssExtractPlugin时就不能使用style-loader了 'vue-style-loader', { loader: 'css-loader', options: { importLoaders: 2 //该方式可以让@import引入的css文件再次执行一边css打包loader } }, // 'sass-loader', 'less-loader', 'postcss-loader', ] } ] }, // 服务器配置 devServer: { port: '8081', // 当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html historyApiFallback: true, // 解决单页面路由问题， contentBase: '../dist', open: true, //自动打开浏览器 hot: true, // 开启热替换, css代码跟新不刷新页面 // hotOnly: true 开启后只有手动配置才能更新，即使hot为true也不刷新浏览器 proxy: { index: '', // 将index设置为空，可以对根路径进行转发 'api/get': 'xxxx.com/api', // 第一种方式，直接代理到api路径 'api/vue': { // 第二种方式，在路径需要临时替换时使用 target: 'xxxx.com/api', pathRewrite: { 'head': 'demo' //此时访问head路径将被代理到demo下 }, secure: false, //对https请求的配置，false为支持https changeOrigin: true //做代理分发时允许访问其他网站，突破网站限制，建议在开发环境使用 }, } }, plugins: [ new webpack.HotModuleReplacementPlugin() ], output: { filename: '[name].js', chunkFilename: '[name].js', } }, base)
以上代码中，要使用热模块替换，我们需要用到webpack自己集成的插件webpack.HotModuleReplacementPlugin，在devServer中，我们还可以设置开发环境中的代理proxy，这已经是目前开发的默认模式了，代码中一些属性的用法和含义我都做了注释，如果大家有兴趣，可以查看webpack原版官方文档，那里有更详细的配置信息。 我们再来修改package.json,添加开发环境的运行指令：
// 在script里面添加 "start": "webpack-dev-server --config ./build/webpack.dev.js",
我们执行 npm start，此时会自动打开浏览器，运行我们的项目。
到此，我们基本的一个支持ES6+Less/css+JQuery的单页应用打包工具已经做好了，当然这只是基础，后面的多页应用，vue/react/typescript都是在这个基础上构建的，让我们拭目以待。
多页面应用：
我们开发多页面应用还是需要用到之前使用的html-webpack-plugin插件，此时我们需要定义多个入口：
// webpack.base.js entry: { main: './src/index.js', about: './src/about.js' } plugins: [ new HtmlWebpackPlugin( { template, title: 'webpack打包但单应用', chunks: ['vender', 'main']， filename: 'index.html' } ), new HtmlWebpackPlugin( { template, title: '关于我们', chunks: ['vender', 'about']， filename: 'about.html' } ), ]
template是我们定义的public下的html路径，title是我们要植入html模版中的titl标签中的内容，我们在index.html中这么使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title><%= htmlWebpackPlugin.options.title %></title> <link href="https://www.jb51.net/article/favicon.ico" > </head> <body> <div></div> </body> </html>