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
// },
那要怎么解决这种麻烦呢?配置不同环境下的配置文件
把原来的
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文件
之前我们配置的命令是
也就是运行
npm run start
的时候会调用
webpack-dev-server
帮我们启动一个webpack的服务器
现在我们修改为如下命令
当我们运行
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-dev-server
环境下,我们进行src
目录下的源代码的开发会非常的便捷,我们写的任何的内容,浏览器会马上产生效果。
当我们完成了开发,接下来我们要做的就是把我们的代码打包npm run build
,把打包生成的文件上传到服务器上和后端结合,就可以运行了。
运行完打包命令后,我们来看一下生成的dist文件夹,里边有一个index.html
,还有一个main.js
和.map文件
,main.js
里的代码都已经被压缩过了,我们把这个dist
目录丢到线上给后端使用就可以啦
到了这一步,我们会发现webpack.dev.js
和webpack.prod.js
这两个配置文件里,有很多相同的代码
为了解决这个问题,我们可以在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
页面控制台里打印了结果
之后再运行npm run build
进行打包,把dist
目录下的index.html
放浏览器,也能正常输出
这就说明了,无论是开发环境还是线上生成环境,我们刚才对配置文件的修改,都是没问题的
有的时候,有些框架里,会建一个build
文件夹,然后把三个配置文件,都放进去
因为我们移动了这三个文件的位置,所以
package.json
里要做一下修改
然后我们再去运行打包,还是正常的。