webpack中Development和Production模式的区分打包
2024-09-26 19:25:08
当我们在开发一个项目的时候,我们一般用development这个环境进行项目的开发,在这个环境下,webpack使用dev-server,帮我们启用一个服务器,然后这个服务器里面还集成了一些,比如hmr这样的特性,只要我更改了代码,他会帮我们重新打包,然后我们代码的内容会实时的展示在对应的页面上,所以开发环境上,development这样的模式非常的方便,但是一旦我们的代码开发完成了,我们需要把我们的代码打包上线,这个时候主要用刀production模式,那么production模式和development模式差异主要在几个方面。
首先在开发环境中,source-map他是非常全的,这样的话可以帮助我们快递定位问题,但是在production环境下,代码已经要上线了,这个时候source-map并不那么重要了,这个时候的source-map会更佳简洁一些
另外一点,在开发环境下,我们的代码不压缩,一旦代码上线,我们希望我们的代码被压缩。
所以在开发环境下,我们webpack.config.js里面
mode: 'development',
devtool: 'cheap-module-eval-source-map',
在上线环境下
mode: 'production',
devtool: 'cheap-module-source-map',
每次开发上线,我们需要不断的去更改webpack.config.js的内容,这样就比较麻烦了,要像解决这个问题,我们这样做,我们给他改一个名字。开发坏境下我们使用webpack.dev.js。线上环境用webpack.prod.js。
然后在package.json里面配置
"scripts": {
"dev": "webpack-dev-server --config webpack.dev.js",
"build": "webpack --config webpack.prod.js",
},
然后开发环境运行npm run dev。打包运行 npm run build
我们发现dev和build存在很多相同的代码。比如entry,modules,output。这样就会出现大量重复代码,为了解决这个问题,我们新建一个webpack.common.js。把公共的抽出来,抽出来之后,这个时候直接这样肯定不行,npm run dev就只有webpack.dev.js这里面的文件。我们需要跟它们做一个合并。安装
npm install webpack-merge -D
然后webpack.dev.js和webpack.prod.js引入merge模块
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$/,
// 如果你的这个js文件在node_modules里面,就不使用babel-loader了
exclude: /node_modules/,
loader: 'babel-loader' ,
},{
// 假设是以jpg结尾的,我需要一个load帮助我们去打包
test: /\.jpg|png|gif$/,
use: {
loader: 'url-loader',
options: {
// 原来是什么名字,打包好还是什么名字
name: '[name]_[hash].[ext]',
// 当我碰到jpg,png,gif的时候,打包到根目录下到imgs文件夹里
outputPath: 'imgs/',
limit: 2048
}
}
},{
test: /\.eot|ttf|svg|woff$/,
use: {
loader: 'file-loader'
}
},{
// 假设是以css结尾的,我需要一个load帮助我们去打包
test: /\.scss$/,
// 需要两个loader,所以不能是个对象,需要是个数组
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
]
},{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
}]},
// HtmlWebpackPlugin会在打包结束后,自动生成一个html文件,并把打包生成的js自动引入到这个html文件中
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin()
],
// 打包文件要放到哪里去,就配置在output这个对象里
output: {
// 打包好的文件名字
filename: '[name].js',
/**
* 打包出的文件要把他放到哪一个文件夹下,path后面要放一个绝对路径
* __dirname指的是webpack.config.js所在的当前目录的这个路径
* 下面这个结合就是一个绝对路径
*/
path: path.resolve(__dirname, 'dist')
}
}
webpack.dev.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js'); const devConfig = {
/**
* 打包模式,不配置会警告,但底层还是会去配置默认的,就是production
* production: 压缩模式,被压缩的代码
* development: 开发模式,不压缩的代码
*
*/
mode: 'development',
/**
* cheap:在生成source-map的时候可以不带列信息,只带行信息就可以了
* 同时不要对我load代码的source-map。只要对我的业务代码进行source-map生成
* 这种方式提示的错误比较全,打包速度比较快,
*/
devtool: 'cheap-module-eval-source-map', // 起个服务器
devServer: {
// 这个意思是服务器要生成在哪个文件夹下
contentBase:'./dist',
// 启动的时候自动打开浏览器,然后自动访问这个服务器地址
open:true,
// 开启Hot Module Replacement
hot: true
},
// HtmlWebpackPlugin会在打包结束后,自动生成一个html文件,并把打包生成的js自动引入到这个html文件中
plugins: [
new webpack.HotModuleReplacementPlugin()
]
} module.exports = merge(commonConfig, devConfig);
webpack.prod.js
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js'); const prodConfig = {
/**
* 打包模式,不配置会警告,但底层还是会去配置默认的,就是production
* production: 压缩模式,被压缩的代码
* development: 开发模式,不压缩的代码
*
*/
mode: 'production',
/**
* cheap:在生成source-map的时候可以不带列信息,只带行信息就可以了
* 同时不要对我load代码的source-map。只要对我的业务代码进行source-map生成
* 这种方式提示的错误比较全,打包速度比较快,
*/
devtool: 'cheap-module-source-map'
}
module.exports = merge(commonConfig, prodConfig);
这样运行npm run dev, npm run build就没有问题了。
有时候第三方模块会给webpack进行一个整合,都放到build目录里。这两个时候package.json需要进行一个更改
"scripts": {
"dev": "webpack-dev-server --config ./build/webpack.dev.js",
"build": "webpack --config ./build/webpack.prod.js",
}
最新文章
- Warning: in_array() expects parameter 2 to be array, string given in D:\wamp\www\suiji.php on line 26
- Oracle 数据库对象
- JS中decodeURI()与decodeURIComponent()区别
- 监控Spark应用方法简介
- C++数据结构之List--线性实现
- android 开发进阶自定义控件 类似 TextView
- c++ read
- (转)实战Memcached缓存系统(7)Memcached的一些基础FAQ
- InfiniBand技术简介
- vim 学习相关记录
- MooTools 异步请求验证
- Keil C51.uew
- Web前端开发工程师为什么讨厌IE6!
- web:转盘抽奖
- java中File类的常用所有方法及其应用
- Android布局管理详解(1)—— LinearLayout 线性布局
- Windows安装nvm和node, 以及安装live-server
- 一个切换内外网IP地址的批处理BAT
- WebService 及 CXF 的进阶讲解
- 在JavaScript文件中用ajax方法实现省市区的三级联动