这里是番外篇,下一篇是讲
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
。