development（开发环境）
当我们在开发项目的时候，一般是用development环境进行项目的开发，在这个打包环境下，webpack中我们使用了devServer可以帮我们启用了一个服务器，然后这个服务器里还集成了一些HRM（热模块更新）这一类的特性。
只要我们更改了代码，它会帮我们重新打包，然后我们的代码的内容会实时的展示在服务器对应的网页上，所以在开发环境下，我们使用development模式会非常的方便。
production（生产环境）
一旦我们开发完成了，代码需要打包上线，这个时候就需要用production这个模式。
production模式和development模式的主要差异有哪些呢？
- 开发环境中，
source map是非常全的，这样可以在调试过程中快速定位问题。而生产环境中的source map不是那么重要了，就可以更加简洁一些，或者生产环境中的source map我们可以生成一个.map文件来进行存储 - 开发环境中，我们的代码一般打包生成之后，不需要进行压缩，因为在开发环境下，我们希望不压缩代码，可以看到打包生成的内容，比较明显的看到里边一些具体的说明项，但是一旦我们的代码要上线，我们的目标则转向于关注
更小的打包生成文件，更轻量化的 source map，更优化的资源以改善加载时间。所以生产环境下打包出的代码一般都是压缩过的
开发环境(development)和生产环境(production)的构建目标差异很大，但是截至到现在位置，我们的webpack配置文件只有一个，那就是 webpack.config.js文件，当我们在开发环境和生产环境下来回切换进行打包的时候，我们需要手动的去不停的修改webpack.config.js文件，这就很麻烦了
- 比如开发环境下，我们需要修改为如下：
mode: 'development'
devtool:'cheap-module-eval-source-map'
optimization: {
usedExports: true
},
- 当开发完成以后，要打包生成线上文件，我们就要切换到生产环境了，我们需要修改为如下：(然后运行npx webpack进行打包)
mode: 'production'
devtool:'cheap-module-source-map'
// optimization: {
// usedExports: true
// },
那要怎么解决这种麻烦呢？配置不同环境下的配置文件
image.png
把原来的
webpack.config.js修改为webpack.dev.js新增一个生产环境下的配置文件
webpack.prod.js,然后把webpack.dev.js里的代码复制一份过来，然后进行删改；打包线下的代码，首先mode要改为production；然后devtool要改为cheap-module-source-map；然后把devServer删除掉，因为打包生成线上代码的时候，我们只需要生成文件，上传到线上的服务器上就可以了，不想要devServer帮我生成一个服务起再启动服务器了；然后把热更新new webpack.HotModuleReplacementPlugin()也删除掉;还有就是要把optimization也删除掉；最终的
生产环境的打包配置文件如下
//webpack.prod.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpack = require('webpack');
module.exports = {
mode: "production",
devtool:'cheap-module-source-map',
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: /\.(eot|ttf|svg|woff)$/,
use: {
loader: 'file-loader'
}
},
{
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()
],
output: {
path:path.resolve(__dirname,'dist'),
filename: '[name].js'
}
}
- 开发环境的打包配置文件如下
// webpack.dev.js
const path = require('path') //path是node的核心模块，主要用来操作文件路径
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpack = require('webpack');
module.exports = {
mode: "development",
devtool:'cheap-module-eval-source-map',
entry: {
main: "./src/index.js"
},
devServer: {
contentBase: './dist',
open: true,
port: 8080,
hot: true, //让webpack开启 Hot Module Replace 的功能
hotOnly: true //即便是 Hot Module Replace 的功能没有生效，也不让浏览器自动重新刷新
},
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
//如果打包的图片超10kb的字节的话，就会像file-loader一样，给打包到dist目录下，
// 如果不超过，就会以base64形式打包到JS文件里
}
}
},
{
test: /\.(eot|ttf|svg|woff)$/,
use: {
loader: 'file-loader'
}
},
{
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(),
new webpack.HotModuleReplacementPlugin()
],
optimization: {
usedExports: true //这个配置的意思是，辨别哪些导出的模块被使用了，我们再进行打包
},
output: {
path:path.resolve(__dirname,'dist'),
filename: '[name].js'
}
}
然后优化 package.json文件
之前我们配置的命令是
image.png
也就是运行
npm run start的时候会调用
webpack-dev-server帮我们启动一个webpack的服务器
现在我们修改为如下命令
image.png
当我们运行
npm run dev的时候，会调用
webpack-dev-server帮我们启动一个webpack的服务器，
--config webpack.dev.js的意思是，使用
webpack.dev.js这个开发环境的配置文件来帮我们启动这个服务器
当我们的代码要打包上线的时候，我们就要用到生产环境下的配置文件去打包了；配置命令如下
image.png
让我们运行
npm run build的时候，会调用webpack 帮我们打包，打包的时候是根据
webpack.prod.js这个生产环境下的配置文件来打包的
配置好以后，我们运行npm run dev，可以看到webpack-dev-server帮我们启动了一个服务器在localhost:8080端口上,我们在浏览器上打开这个地址，然后打开控制台，可以看到，我们的业务代码输出了3，证明我们打包成功了
image.png
然后我们去改变我们的业务代码
image.png
刷新页面，就看到输出6
image.png
如果不想手动的刷新页面，就把之前配置的
hotOnly: true这个配置去掉就行了，如果没有没有写HMR那一段
if(module.hot){...}代码，那么
hot:true会帮我们兜底，会帮我们重新刷新一下浏览器。
当我们再次修改业务代码，会看到浏览器会自动刷新并更输出内容；由此可以看出webpack-dev-server环境下，我们进行src目录下的源代码的开发会非常的便捷，我们写的任何的内容，浏览器会马上产生效果。
当我们完成了开发，接下来我们要做的就是把我们的代码打包npm run build，把打包生成的文件上传到服务器上和后端结合，就可以运行了。
运行完打包命令后，我们来看一下生成的dist文件夹，里边有一个index.html，还有一个main.js和.map文件，main.js里的代码都已经被压缩过了，我们把这个dist目录丢到线上给后端使用就可以啦
image.png
到了这一步，我们会发现webpack.dev.js和webpack.prod.js这两个配置文件里，有很多相同的代码
image.png
为了解决这个问题，我们可以在lesson目录下，创建一个
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: /\.(eot|ttf|svg|woff)$/,
use: {
loader: 'file-loader'
}
},
{
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()
],
output: {
path:path.resolve(__dirname,'dist'),
filename: '[name].js'
}
}
拆分之后，webpack.dev.js里现在还剩下如下配置
//webpack.dev.js
const webpack = require('webpack');
module.exports = {
mode: "development",
devtool:'cheap-module-eval-source-map',
devServer: {
contentBase: './dist',
open: true,
port: 8080,
hot: true, //让webpack开启 Hot Module Replace 的功能
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
optimization: {
usedExports: true
}
}
webpack.prod.js还剩下如下配置
//webpack.prod.js
module.exports = {
mode: "production",
devtool:'cheap-module-source-map'
}
但是，如果仅仅是拆分，肯定是不行的，我们还需要把webpack.common.js和其他两个配置文件，做一个合并再输出，怎么做合并呢，我们需要引入一个第三方模块 webpack-merge
- 先安装
npm install webpack-merge -D
- 然后在
webpack.dev.js和webpack.prod.js文件里分别引入webpack-merge，还要再分别引入webpack.common.js最后把结合后的配置文件导出；
最终的 webpack.dev.js配置如下
const webpack = require('webpack');
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: {
usedExports: true
}
}
//最终导出的是 devConfig 和 commonConfig 结合的配置
module.exports = merge(commonConfig,devConfig)
最终的 webpack.prod.js配置如下
const merge = require('webpack-merge');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const prodConfig = {
mode: "production",
devtool:'cheap-module-source-map'
}
//最终导出的是 prodConfig 和 commonConfig 结合的配置
module.exports = merge(commonConfig,prodConfig)
配置好以后，我们先运行npm run dev进行打包，然后在localhost:8080页面控制台里打印了结果
image.png
之后再运行npm run build进行打包,把dist目录下的index.html放浏览器，也能正常输出
image.png
这就说明了，无论是开发环境还是线上生成环境，我们刚才对配置文件的修改，都是没问题的
有的时候，有些框架里，会建一个build文件夹，然后把三个配置文件，都放进去
image.png
因为我们移动了这三个文件的位置，所以
package.json里要做一下修改
image.png
然后我们再去运行打包，还是正常的。