这里是番外篇，下一篇是讲
Vue项目怎么搭建，包括服务端渲染，但是这刚了解完js、css就直接上手vue，还有服务端渲染，这已经是项目上的配置了，有点节奏太快，所以这里就弄个番外，当做过渡。番外主要学习（也是自己温习，其实之前的都会）
webpack开发环境和生产环境的配置，重用配置。
webpack配置合并
在我们日常开发的过程中，总是会围绕着两个环境，一个是开发环境，一个是生产环境。
开发环境：是指“猿”天天修改bug的环境，开发环境是不存在bug的。
生产环境：是指天天给“猿”提bug的环境，只有生产环境才有bug。上面说的都是玩笑话，反正大家都懂。
开发环境是不同于生产环境的，往往是为了提高开发效率，所以会引用很多额外的工具和配置来帮助“猿”们更加快速高效的进行开发。
生产环境更注重的是更快速和流畅的的访问，提高用户体验度，滞留住用户，所以也会使用额外的工具和配置来帮助“猿”们生成体积更小，访问更快的程序包。
所以就会有生产环境配置和开发环境配置这两个配置，但是他们大多数配置都是相似的，为了方便维护，所以他们相似的配置就需要合并，不同的配置就需要区分开。
webpack配置合并
- 生产环境和开发环境搭建
- 安装依赖：
npm i -D webpack-merge
这里我们需要用到
webpakc-merge来合并webpack的配置
- 根目录下新建一个
config的目录 - 新建一个
base.config.js的文件 - 将之前写的
webpack.config.js的内容全部复制过去，然后移除mode、rules.css、rules.less的那一段就好，如下
const path = require('path'); const EslintPlugin = require('eslint-webpack-plugin'); module.exports = { entry: { index: './src/index.js' }, output: { filename: '[name].js', path: path.resolve(__dirname, '../dist') }, module: { rules: [ { test: /.js$/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-typescript'] } } }, { test: /.ts$/, use: { loader: 'ts-loader' } } ] }, resolve: { extensions: ['.ts', '.js'], }, plugins: [ new EslintPlugin({ extensions: ['.ts', '.js'] }) ] }
- 然后新建一个开发环境的配置文件
webpack.dev.config.js，内容如下
const {merge} = require('webpack-merge'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const baseConfig = require('./base.config') module.exports = merge(baseConfig, { mode: 'development', module: { rules: [ { test: /.css$/, use: [ 'style-loader', { loader: "css-loader", options: { importLoaders: 1 } }, 'postcss-loader', ] }, { test: /.less$/, use: [ 'style-loader', { loader: "css-loader", options: { importLoaders: 1 } }, 'postcss-loader', 'less-loader', ] } ] }, plugins: [ new HtmlWebpackPlugin({ filename:'index.html', template:'./public/index.html' }) ] })
- 然后再新建一个生产环境的配置文件
webpack.prod.config.js，内容如下
const {merge} = require('webpack-merge'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const baseConfig = require('./base.config') module.exports = merge(baseConfig, { mode: 'production', module: { rules: [ { test: /.css$/, use: [ MiniCssExtractPlugin.loader, { loader: "css-loader", options: { importLoaders: 1 } }, 'postcss-loader', ] }, { test: /.less$/, use: [ MiniCssExtractPlugin.loader, { loader: "css-loader", options: { importLoaders: 1 } }, 'postcss-loader', 'less-loader', ] } ] }, plugins: [ new MiniCssExtractPlugin(), new HtmlWebpackPlugin({ filename:'index.html', // 生成的文件名，其实默认就是index.html template:'./public/index.html' // 引用的模板文件地址 }) ] })
这里解释一下，开发环境使用
style-loader，将css生成在.js文件中，不用单独生成一个.css文件，这样能加快构建速度和开发时的访问速度，因为使用MiniCssExtractPlugin会单独生成一个.css文件，每次修改就会多一次请求。生产环境则相反，使用
MiniCssExtractPlugin单独生成.css文件可以让浏览器有缓存能力，加快二次访问速度。然后接下来的开发环境还需要配合使用
html-webpack-plugin，所以不能放到base.config.js中，因为插件是叠加的，会有冲突。
- 根目录下面新建一个
public目录，然后下面新建一个index.html文件，内容随意，不做要求。 - 完了之后在
package.json文件中的scripts属性下面增加配置，如下
{ "scripts": { "dev": "npx webpack --config ./config/webpack.dev.config.js", "build": "npx webpack --config ./config/webpack.prod.config.js", "test": "echo "Error: no test specified" && exit 1" } }
使用
--config [配置文件]可以加载指定配置文件。在
package.json文件的scripts属性下面配置命令可以使用npm run [xxx]的方式运行。
- 然后就是大家熟悉的命令了：
- 开发环境：
npm run dev（生成的文件没有.css文件） - 生产环境：
npm run build（生成的文件有.css文件）
正式的开发环境
上面介绍的开发环境还是敲命令，生成文件，不能每次修改都敲一次命令然后在查看页面吧，接下来的环节就是
webpack-dev-server
- 配置正式的生产环境
- 安装依赖：
npm i -D webpack-dev-server - 然后修改
webpack.config.js的配置
module.exports = merge(baseConfig, { mode: 'development', module: { rules: [] }, // 关键代码 devServer: { hot: true, // 是否热更新 open: true // 是否自动打开浏览器 }, plugins: [] })
- 接下来修改一下
package.json文件的dev命令
"scripts": { "dev": "npx webpack serve --config ./config/webpack.dev.config.js" },
就是多加了一个
serve的命令，很简单的。
- 命令行运行：
npm run dev
这个时候如果一切ok就会自动打开浏览器，然后你可以选择修改一些页面样式试试热更新的功能。
总结
生产环境是不同于开发环境的，因为两者的需求差异，所以需要两套不同的配置来实现不同的需求。
生产环境追求快速的体验，所以会减小包的体积，会区分加载的资源，需要用到不同的技术来实现，这里只是简单的使用MiniCssExtractPlugin插件。
开发环境追求快速实时的更新，所以需要热更新，就简单的使用了一个webpack-dev-server。
