webpack4系列笔记之（8）development 和production模式区分打包

最新推荐文章于 2024-07-22 09:05:19 发布

星雨668

最新推荐文章于 2024-07-22 09:05:19 发布

阅读量1k

点赞数 2

分类专栏： webpack 文章标签： webpack 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_42744920/article/details/125251125

版权

webpack 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了Webpack的开发(dev)和生产(prod)两种打包模式的区别，包括开发模式的调试和热更新特性，以及生产模式的代码优化。通过配置webpack.common.js，webpack.dev.js和webpack.prod.js来实现不同模式下的配置合并，并在package.json中配置了相应的构建命令.

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、webpack的打包模式mode

webpack 的打包模式mode被分为开发模式（development）、生产模式（production）；
开发模式应具有的特点是：方便调试（本地服务dev-server）、热更新(HNR)等；
生产模式应具有的特点是：代码包更小，更优化；
所以两者配置略有不同

二、development 和production模式区分配置

1、新建build目录，在build文件夹中新建一个文件webpack.common.js,存放两种模式公共部分

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
	entry: {
		main: './src/index.js'
	},
	module: {
		rules: [{ 
			test: /\.js$/, 
			exclude: /node_modules/, 
			loader: 'babel-loader',
		}, {
			test: /\.(jpg|png|gif)$/,
			use: {
				loader: 'url-loader',
				options: {
					name: '[name]_[hash].[ext]',
					outputPath: 'images/',
					limit: 10240
				}
			} 
		}, 
		{
			test: /\.scss$/,
			use: [
				'style-loader', 
				{
					loader: 'css-loader',
					options: {
						importLoaders: 2
					}
				},
				'sass-loader',
				'postcss-loader'
			]
		}, {
			test: /\.css$/,
			use: [
				'style-loader',
				'css-loader',
				'postcss-loader'
			]
		}]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: 'src/index.html'
		}), 
		new CleanWebpackPlugin(['dist'])
	],
	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	}
}

2、下载webpack-merge，合并webpack配置插件

npm i webpack-merge -D

3、在build文件夹下新建webpack.dev.js,配置development模式

const webpack = require('webpack');
// 引入webpack-merge
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

const devConfig = {
	mode: 'development',
	devtool: 'cheap-module-eval-source-map',
	devServer: {
		contentBase: './dist',
		open: true,
		port: 8080,
		hot: true
	},
	plugins: [
		// 使用热更新模块
		new webpack.HotModuleReplacementPlugin()
	],
	optimization: {
		// 开发模式下配置tree-shaking
		usedExports: true
	}
}
// 将公共配置和development配置合并，并输出
module.exports = merge(commonConfig, devConfig);

3、在build文件夹下新建webpack.prod.js配置production模式

// 引入webpack-merge
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

const prodConfig = {
	mode: 'production',
	devtool: 'cheap-module-source-map'
}
// 将公共配置和production配置合并，并输出
module.exports = merge(commonConfig, prodConfig);

4、package.json配置scripts快捷命令

{
  "sideEffects": ["*.css","*.sass"],   // 配置忽略tree-shaking的文件，如果sideEffects的值为false时，表示所有文件都要tree-shaking
  "scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
  },
}