开发环境:就是我们开发代码时使用的模式。
这个模式我们做两件事情:
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