一、development（开发环境）
当我们在开发项目的时候，一般是用development环境进行项目的开发，在这个打包环境下，webpack中我们使用了devServer可以帮我们启一个服务器，然后这个服务器里还集成了一些HRM（热模块更新）这样的特性。
只要更改了代码，它会帮我们重新打包，然后我们的代码的内容会实时的展示在服务器对应的网页上，所以在开发环境下，我们使用development模式会非常的方便
二、production（生产环境）
一旦我们的源代码开发完成了，需要把代码打包上线，这个时候就需要用production这个模式。
三、production模式和development模式的主要差异
- 开发环境中，
source map是非常全的，这样可以在调试过程中快速定位问题。
而生产环境中的source map不是那么重要了，就可以更加简洁一些，
或者生产环境中的source map我们可以生成一个.map文件来进行存储。
2.开发环境下，我们的代码一般打包生成之后，不需要进行压缩，
因为在开发环境下，我们希望不压缩代码，
可以看到打包生成的内容，
比较明显的看到里边一些具体的说明项；
但是一旦我们的代码要上线，
我们的目标则转向于关注更小的打包生成文件，
更轻量化的 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
// },
怎么解决？配置不同环境下的配置文件
webpack.dev.js //开发环境下的配置文件
webpack.prod.js //生产环境下的配置文件
把原来的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文件
之前我们配置的命令是
{
"name": "lesson",
"version": "1.0.0",
"description": "寻找2.0",
"author": "nobady",
"private": true,
"scripts": {
"dev": "webpack-dev-server "
}
}
运行npm run dev
会调用webpack-dev-server
帮我们启动一个webpack的服务器
使用哪一个webpck的文件来启这个服务器呢？
来做个配置
{
"name": "lesson",
"version": "1.0.0",
"description": "寻找2.0",
"author": "nobady",
"private": true,
"scripts": {
//表示的是如果启动一个webpack-dev-server进行开发
//那么我使用开发环境的webpack配置
"dev": "webpack-dev-server --config webpack.dev.js ",
"build": "webpack-dev-server --config webpack.prod.js ",
}
}
当我们运行npm run dev的时候，
会调用webpack-dev-server帮我们启动一个webpack的服务器，
--config webpack.dev.js的意思是，
使用webpack.dev.js这个开发环境的配置文件来帮我们启动这个服务器,
当我们的代码要打包上线的时候，
我们就要用到生产环境下的配置文件去打包了,
运行npm run build的时候，会调用webpack 帮我们打包，
打包的时候是根据webpack.prod.js这个生产环境下的配置文件来打包的,
运行和打包
配置好以后，我们运行npm run dev，
可以看到webpack-dev-server帮我们启动了一个服务器在localhost:8080端口上,
我们在浏览器上打开这个地址，
然后打开控制台，我们的业务代码输出了3，
证明我们打包成功了
去改变业务代码,
刷新页面，就看到输出6,
如果不想手动的刷新页面，把之前配置的hotOnly: true这个配置去掉，
如果没有没有写HMR那一段if(module.hot){...}代码，
那么hot:true会帮我们兜底，
会帮我们重新刷新一下浏览器,
(改变webpack配置，一定要手动重启服务器)
当再次修改业务代码，会看到浏览器会自动刷新并更输出内容,
由此可以看出webpack-dev-server环境下，
我们进行src目录下的源代码的开发会非常的便捷，
我们写的任何的内容，浏览器会马上产生效果，
当完成了开发，要做的就是把代码生成打包后的文件，
npm run build，
把打包生成的文件上传到服务器上，
和后端做结合，
就可以正常运行了，
运行完打包命令后npm run build，
生成的dist文件夹，里边有一个index.html，还有一个main.js和.map文件，
main.js里的代码都已经被压缩过了，
我们把这个dist文件夹丢到线上给后端使用就可以啦，
//-imgs插入
模拟一下，直接在浏览器上打开，打包生成的文件dist目录下的index.html
我们会发现webpack.dev.js和webpack.prod.js这两个配置文件里，有很多相同的代码
image
为了解决这个问题，
我们可以在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
之后再运行npm run build进行打包,把dist目录下的index.html放浏览器，也能正常输出
image
这就说明了，无论是开发环境还是线上生成环境，我们刚才对配置文件的修改，都是没问题的
有的时候，有些框架里，会建一个build文件夹，然后把三个配置文件，都放进去
image
因为我们移动了这三个文件的位置，所以package.json里要做一下修改,
当前目录下的build目录下的webpack.dev.js，
当前目录下的build目录下的webpack.prod.js，
1.png
然后我们再去运行打包，还是正常的。
