前言
webpack想必大家都不陌生,大都知道webpack是一个模块打包工具,现在很多项目的构建也都离不开webpack,但是我之前从没有去真正了解过Ta的配置,因为现有的框架基本都已经替我们完成了这部分的操作,学习这个的一个原因是,公司小程序框架是用gulp搭建的,功能不是很完善,打包的速度也不是很理想,所以想通过学习webpack搭建一个更优的小程序框架。这也是本次学习的一个终极目标。
核心概念
入口(entry): 指定一个入口起点,作为构建内部依赖的开始。
输出(output): 设置webpack处理后的包输出的路径以及如何命名这些文件,
loader: 处理非js文件,因为webpack自身只能识别js,loader将所有类型的文件转换成webpack能够处理的有效模块,这样就可以用webpack的打包能力,对文件进行处理。
test属性,用于标识[正则匹配]需要被对应的loader进行转换的文件;
use属性,表示进行转换时,应该使用哪一个loader;loader加载是从下到上,从右到左执行的。
插件(plugins):用于执行范围更广的任务,包括 从打包优化和压缩,一直到重新定义环境中的变量。可以处理各种任务。
模式: 通过选择
development
或production
之中的一个,来设置mode
参数,可以启用相应模式下的 webpack 内置的优化 。
简单配置
1 | const path = require('path'); |
SourceMap的配置
source-map 错误映射 打包出来的代码出错时定位源代码错误位置【如果不配置,错误定位是在打包后的目标文件中】
如果是开发环境(development)则用以下配置较好;如果是线上生产环境(production)去掉 eval较好;
1 | module.exports = { |
使用webpackDevServer提升开发效率
webpack –watch:通过在package.js中配置scripts,可以自动监听打包后的文件变化。但是不会启动本地服务。
webpackDevServer:通过在webpack.config.js中配置
devServer
;在package.js中的scripts下配置"start": "webpack-dev-server"
命令;可以在本地启一个服务,打包并自动监听代码变化,修改源代码会重新打包;配置
下载包 键入命令:
cnpm i webpack-dev-server -D
webpack.config.js
通过配置
devServer
会自动启一个本地服务,监听代码更改,自动刷新页面;open:true 自动打开本地默认浏览器;
port:端口配置【默认8080】
1
2
3
4
5
6
7module.exports = {
devServer: {
contentBase: './dist',
open: true,
port: 8888
},
}package.js
1
2
3
4"scripts": {
"watch": "webpack --watch",
"start": "webpack-dev-server"
},有了以上的配置,可以运行
npm run start
来打包运行项目;然后修改源代码,发现页面在浏览器已经自动更新。
热模块更新
模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。
配置
- 引入webpack模块
- 更新 webpack-dev-server 的配置,即增加
hot: true
- 在plugins里使用插件
1 | const webpack = require('webpack'); |
使用Babel处理ES6语法
下包 键入命令:
cnpm i babel-loader @babel/core -D
只用
babel-loader
是无法转换ES6语法的,需要下载语法转换的包键入命令
cnpm i @babel/preset-env -D
虽然用babel把ES6语法转为了ES5,但还会有些低版本的浏览器不兼容一些语法,需要下载polyfill包做补充;并在业务代码的最顶部引入 例:
import '@babel/polyfill';
【注:polyfill会污染全局环境】键入命令
cnpm i @babel/polyfill -D
配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/, // 表示如果匹配的js文件是node_modules文件下的,就没必要进行转换,因为该目录下的是第三方的模块,已经被转换了,不必重复操作。
use: 'babel-loader',
options: {
presets: [['@babel/preset-env', {
targets: {
chrome: '67' // 表示当项目运行的浏览器的版本大于指定的版本时,会判断当前浏览器版本是否支持ES6的语法,如果可以很好的支持ES6语法,则不再进行ES5的转换
},
useBuiltIns: 'usage' // 表示当在页面引入polyfill做语法补充的时候,根据当前的业务代码来决定是否添加,减少打包体积
}]]
}
},
]
}由于polyfill会污染全局环境,所以在开发类库和第三方模块的时候,不建议使用,取而代之的是
plugin-transform-runtime
组件下包 依次键入命令:
1
2
3cnpm i @babel/plugin-transform-runtime -D;
cnpm i @babel/runtime -S;
cnpm i @babel/runtime-corejs2 -S;配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader" ,
options:{
// 这里取代的是 是上面的 presets的配置
"plugins": [["@babel/plugin-transform-runtime",{
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}]]
}
}
]
}babel配置较多时,一般会把options配置放在项目根目录下的
.babelrc
文件中在根目录下创建一个名为
.babelrc
的文件;执行顺序:【从下往上 从右往左 】1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19{
presets: [['@babel/preset-env', {
targets: {
chrome: '67'
},
useBuiltIns: 'usage'
}]]
}
或
{
"plugins": [["@babel/plugin-transform-runtime",{
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}]]
}
webpack对React代码的打包配置
下包 键入命令:
cnpm i @babel/preset-react -D
配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14{
presets: [
[
'@babel/preset-env', {
targets: {
chrome: '67'
},
useBuiltIns: 'usage'
}
],
'@babel/preset-react'
]
}
// 执行顺序:从下往上,先对react代码进行转换,再对转换后的代码进行ES6 -> ES5的转换
总结
以上是webpack的常用基础配置,通过学习,对webpack有了进一步的了解,这里记录一下学习笔记。也希望能对大家有点帮助。