webpack5开发环境、生产环境配置 (三)
开发环境：就是我们开发代码时使用的模式。
这个模式我们做两件事情：
1、编译代码，使浏览器能识别运行
2、代码质量检查，树立代码规范
生产环境：开发完成代码后，我们需要得到代码将来部署上线。
这个模式我们做两件事情：
- 优化代码运行性能
- 优化代码打包速度
准备工作
首先我们准备上面写的配置文件两份，分别命名：webpack.dev.js、webpack.prod.js放在config文件夹下，目录结构如下：
├── webpack-test (项目根目录)
├── config (Webpack配置文件目录)
│ ├── webpack.dev.js(开发模式配置文件)
│ └── webpack.prod.js(生产模式配置文件)
├── node_modules (下载包存放目录)
├── src (项目源码目录，除了html其他都在src里面)
│ └── 略
├── public (项目html文件)
│ └── index.html
├── .eslintrc.js(Eslint配置文件)
├── babel.config.js(Babel配置文件)
└── package.json (包的依赖管理配置文件)
2. 修改 webpack.dev.js 配置文件
修改的3处：
1、因为原来的webpack.config.js文件中位置发生了变化，所以配置中绝对的路径都要往上退回一层；
2、开发环境启用devserver开发服务器，会自动编译内容到内存环境，所以这里output的配置可以取消
3、注意mode设置为：development
const path = require('path');
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
module.exports = {
//入口文件
entry: {
index: './src/main.js',
admin: './src/main2.js',
},
//出口文件
output: {
path: undefined, // 开发模式没有输出，不需要指定输出目录
filename: "static/js/[name]main.js", // 将 js 文件输出到 static/js 目录中，注意这个是多入口文件，记得带上变量[name]
//clean: true, // 开发模式没有输出，不需要清空输出结果
},
module: {
rules: [{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /\.sass$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
}
},
//设置图片打包后的路径
generator: {
filename: 'dist/images/[hash:10][ext][query]'
}
},
],
},
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "src"),
}),
],
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否自动打开浏览器
},
//模式
mode: 'development',
}
运行开发模式的指令：
npx webpack serve --config ./config/webpack.dev.js
3. 修改 webpack.prod.js 配置文件
配置文件需要修改的有4处：
1、因为原来的webpack.config.js文件中位置发生了变化，所以绝对路径要要回退上一级目录。相对路径相对命令运行目录不需要改变。；
2、生产环境要配置文件编译输出目录，和文件清空上一次的配置。
3、mode设置为：development
4、生产环境中没有devServer配置
const path = require('path');
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
module.exports = {
//入口文件
entry: {
index: './src/main.js',
},
//出口文件
output: {
path: path.resolve(__dirname, "../dist"),
// 输出文件名
filename: "main.js",
clean: true, // 生产环境下需要清除内容
},
module: {
rules: [{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /\.sass$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
}
},
//设置图片打包后的路径
generator: {
filename: 'dist/images/[hash:10][ext][query]'
}
},
],
},
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "src"),
}),
],
// 开发服务器
// devServer: {
// host: "localhost", // 启动服务器域名
// port: "3000", // 启动服务器端口号
// open: true, // 是否自动打开浏览器
// },
//模式
mode: 'development',
}
运行生产模式的指令：
npx webpack --config ./config/webpack.prod.js
4. 配置运行指令
为了方便运行不同模式的指令，我们将指令定义在 package.json 中 scripts 里面
// package.json
{
// 其他省略
"scripts": {
"start": "npm run dev",
"dev": "npx webpack serve --config ./config/webpack.dev.js",
"build": "npx webpack --config ./config/webpack.prod.js"
}
}
以后启动指令：
- 开发模式：
npm start或npm run dev - 生产模式：
npm run build