1.生产模式介绍
生产模式是开发完成代码后，我们需要得到代码将来部署上线。
这个模式下我们主要对代码进行优化，让其运行性能更好。
优化主要从两个角度出发:
- 优化代码运行性能
- 优化代码打包速度
2.生产模式准备
我们分别准备两个配置文件来放不同的配置
├── 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 (包的依赖管理配置文件)
3.创建config文件夹来管理不同的config文件
注意：此时要修改生产模式配置中output中的path的路径，因为这个路径是绝对路径，会收到当前文件所处文件夹路径的影响
在开发模式的配置中可以不用定义output中的path，因为开发模式不会产生输出，但filename需要指定
然后修改所有绝对路径
然后修改所有绝对路径
生产模式还需要将mode改成production，并去除devServer配置，这样才能输出文件
const path = require('path');//nodejs用来处理路径问题的模块
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackDevServer = require('webpack-dev-server');
module.exports = {
/**入口 */
entry: './src/main.js',
/**输出 相对路径*/
output: {
/**文件输出路径 绝对路径*/
//__dirname 表示当前文件的文件夹目录
path: path.resolve(__dirname, '../dist'),//所有文件的输出目录
/**文件名 */
filename: 'static/js/dist.js',//入口文件输出文件名
clean: true,//在打包前将path整个目录内容情况
},
/**加载器 */
module: {
rules: [
//loader的配置
{
/**test 代表要检测的文件 */
test: /\.css$/, //只检测.css文件
use: ['style-loader', 'css-loader'],//对检测到文件使用哪些loader
},
{
test: /\.less$/,//只检测.less文件
//loader:'xxx',loader只能使用一个loader，use可以使用多个loader
use: ['style-loader', 'css-loader', 'less-loader'],//对检测到文件使用哪些loader
},
{
test: /\.s[ac]ss$/,//只检测.sass文件
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.styl$/,//只检测.stylus文件
use: ['style-loader', 'css-loader', 'stylus-loader']
},
{
test: /\.(png|jpe?g|gif|webp)$/,
type: 'asset/resource',
parser: {
dataUrlCondition: {
//小于10kb的图标转base64，减少请求数量
maxSize: 10 * 1024 // 10kb
}
},
generator: {
//输出图片名称
//[hash:10]hash值取前10位
filename: 'static/imgs/[hash:10][ext][query]'
}
},
/**图标字体相关配置 */
{
test: /\.(ttf|woff2?|mp3|mp4|avi)$/,//只对ttf、woff2资源起作用
type: 'asset/resource',//加上/resource表示将资源原封不动的打包出来
generator: {
filename: "static/media/[hash][ext][query]"
}
},
{
test: /\.js$/,
/**排除哪些文件 */
exclude: /(node_modules)/,
loader: 'babel-loader',
// options: {
// presets: ['@babel/preset-env'],
// },
},
]
},
/**插件 */
plugins: [
//plugin配置
new ESLintPlugin({
/** 检测哪些文件 */
context: path.resolve(__dirname, '../src')
}),
new HtmlWebpackPlugin({
/**模板 */
template: path.resolve(__dirname, '../src/public/index.html')
})
],
/**模式 */
mode: 'production'
}
4.执行命令运行配置进行打包
npx webpack serve --config ./config/webpack.dev.js
可以看到开发模式下不会有输出文件
npx webpack --config ./config/webpack.prod.js
可以看到生产模式下会有输出
注意生成模式的命令不要带serve
同时可以看到生产模式下打包后的js文件也被压缩了
5.配置脚本简化指令
修改package.json添加脚本启动指令
