我们已经完成了基于React的脚手架工程的创建,现在让我们来进一步增强我们的工程,已方便日后的开发。
增强Webpack
清理 /dist 文件夹
dist文件夹里包含了我们生成的各种打包文件,我们更新生成配置后,如果不即使删除里面的残留文件,可能导致旧打包文件和新打包文件共存的情况。
我们可以在编译时添加脚本删除,如下所示:
"build": "rd /S /Q dist && webpack"
也可以通过Webpack的clean-webpack-plugin插件来实现。
安装插件yarn add -D clean-webpack-plugin
修改webpack.config.js文件,加入html-webpack-plugin插件
// 管理插件,通过插件实现增强功能
plugins: [
// 每次编译前清除dist文件夹
new CleanWebpackPlugin(),
],
区分开发和生成环境
开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中,我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中,我们的目标则转向于关注更小的 bundle,更轻量的 source map,以及更优化的资源,以改善加载时间。由于要遵循逻辑分离,我们通常建议为每个环境编写彼此独立的 webpack 配置。
基于以上原理,我们将原有的webpack.config.js一个配置文件分割为webpack.common.js,webpack.dev.js和webpack.prod.js三个配置文件。
首先安装yarn add -D webpack-merge
根据原有webpack.config.js文件将对应配置分散到三个配置文件中
webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack')
module.exports = {
// 入口文件
entry: './src/index.tsx',
// 需要解析的文件后缀名
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
// 管理插件,通过插件实现增强功能
plugins: [
// 自动清理dist
new CleanWebpackPlugin(),
// 根据模板生成html
new HtmlWebpackPlugin({
title: 'My App',
template: './src/index.html'
}),
],
// 配置项目处理的不同文件及模块
module: {
rules: [
{
test: /\.(ts|tsx)?$/,
loader: 'awesome-typescript-loader'
},
]
}
};
webpack.dev.js
const merge = require('webpack-merge')
const common = require('./webpack.common.js')
const webpack = require('webpack')
const path = require('path');
module.exports = merge(common, {
// 标识配置为开发用
mode: 'development',
// 控制是否生成,以及如何生成 source map
devtool: 'cheap-module-eval-source-map',
// 管理开发服务器
devServer: {
// 查找文件路径
contentBase: 'dist',
// 启用 HMR
hot: true,
},
plugins: [
// 当开启 HMR 的时候使用该插件会显示模块的相对路径,建议用于开发环境
new webpack.NamedModulesPlugin(),
// 启用 HMR 热更新,建议用于开发环境
new webpack.HotModuleReplacementPlugin()
],
// 管理输出
output: {
// 定义输出文件名规则
filename: '[name].bundle.js',
// 定义输出文件名路径
path: path.resolve(__dirname, 'dist'),
},
})
webpack.prod.js
const merge = require('webpack-merge')
const common = require('./webpack.common.js')
const webpack = require('webpack')
const path = require('path');
module.exports = merge(common, {
// 标识配置为生产用
mode: 'production',
// 控制是否生成,以及如何生成 source map
devtool: 'source-map',
// 管理输出
output: {
// 定义输出文件名规则
filename: '[name].[contenthash].js',
// 定义输出文件名路径
path: path.resolve(__dirname, 'dist'),
},
})
最后修改package.json:
"scripts": {
"build": "webpack --config webpack.prod.js",
"dev": "webpack-dev-server --config webpack.dev.js"
},
Source Map说明
Webpack的打包过程中,会对源代码进行压缩,合并,编译等操作,导致编译后的代码和源码差异较大。为了更容易地追踪错误和警告,通过JavaScript 提供的source map功能,能够将编译后的代码映射到源代码上,便于错误定位。
在Webpack中,是通过devtool配置项来指定构造的source map类型。配置项很多,但大致可以划分为5类,其余配置项可以是其任意组合。
- eval: 使用eval包裹模块代码,尾部通过souceURL来定位原始代码位置,不产生.map文件
- source-map: 产生.map文件,通过.map文件定位
- cheap: 不包含列信息(debug时注意点都在行数上,不用关心列数)也不包含loader的sourcemap(意味着如果使用了类似bable类编译工具,定位到的就是编译后的代码而非原始代码)
- module: 包含loader的sourcemap(比如babel的sourcemap)
- inline: 将.map作为DataURI嵌入,不单独生成.map文件
综上所示,我们在开发环境选用cheap-module-eval-source-map,就能够定位到各个原始文件上。生产环境则考虑使用source-map。
代码压缩
Webpack4的mode是production时,会自动开启js的压缩,不过这里我们还是使用uglifyjs-webpack-plugin插件。
安装
yarn add -D uglifyjs-webpack-plugin
修改webpack.prod.js文件
module.exports = merge(common, {
// 标识配置为生产用
mode: 'production',
// 控制是否生成,以及如何生成 source map
devtool: 'source-map',
plugins: [
new UglifyJSPlugin({
sourceMap: true
}),
],
// 管理输出
output: {
// 定义输出文件名规则
filename: '[name].[contenthash].js',
// 定义输出文件名路径
path: path.resolve(__dirname, 'dist'),
},
})
这里需要注意一点,UglifyJSPlugin压缩插件不能解析es6语法,需要引入bable来处理es6,es7的js文件的编译。
指定环境
程序中使用的某些第三方library可能会和process.env.NODE_ENV环境变量关联,比如在生产环境中增加额外的日志记录或测试,在生产环境中增加一些优化。因此我们根据不同的环境预设好process.env.NODE_ENV的值。NODE_ENV本质上是Node.js露给执行脚本的系统环境变量,同时并不能在Webpack.prod.js类似的构建脚本中预设NODE_ENV的值,但我们可以通过webpack内置的 DefinePlugin为所有的依赖定义这个变量。
对应环境的webpack配置文件中增加如下所示的插件配置:
// 预设程序执行环境
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
网友评论