- 定义: webpack是一个模块打包工具。
- 打个比方，对esMoudle的处理.
- 假设在index.js中存在如下代码，如果把上面代码放在浏览器中，浏览器是不能解析的
import A from './A';
import B from './B';
import C from './C';
- 而webpack能够识别esMoudle，所以通过webapck对代码做构建
- webpack支持的模块：esMoudle、common.js、CMD、AMD
esMoudle: import -> export default
common.js: require -> moudle.export
AMD: 使用require.js.
// 定义模块 myModule.js
define(id?, dependencies?, factory);
id：可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）
dependencies：是一个当前模块依赖的模块名称数组
factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。
例子：
define('myModule', ['dependency'], function(){
return {};
});
// 加载模块
require([dependencies], function(){});
例子：
require(['myModule'], function (my){});
CMD: 使用SeaJS
// 定义模块 myModule.js
define(function(require, exports, module) {
module.exports = {
});
// 加载模块
seajs.use(['myModule.js'], function(my){});
+ AMD和CDM区别
通俗来说：
AMD在加载完成定义（define）好的模块就会立即执行，所有执行完成后，遇到require才会执行主逻辑。（提前加载）
CMD在加载完成定义（define）好的模块，仅仅是下载不执行，在遇到require才会执行对应的模块。（按需加载）
AMD用户体验好，因为没有延迟，CMD性能好，因为只有用户需要的时候才执行。
- webpack 最开始为js模块打包工具，后来随着发展webpack已经支持css、png/jpg....
npm init 以node规范的形式创建一个包文件，webpack管理需要符合node规范
npm install webpack webpack-cli -g 全局安装, 如果网络被墙，通过手机分享wifi热点, webpack-cli的作用就是让webpack命令可以在命令行中运行
不推荐全局安装，如果项目webpack3的项目和webpack4的项目，那么全局安装就会有冲突。
删除全局安装：npm uninstall webpack webpack-cli -g
npm install webpack webpack-cli --save-dev(-D)
npx webpack -v 此命令可以在当前项目的nodemoudles下找webpack
npm info webpack 查看所有webpack版本
npm [email protected] 安装webpack指定的4.2.1的版本
- 创建webpack.config.js, 配置一个最基本的配置.
const path = require('path');
moudle.export = {
mode: 'development(production)' development不压缩、production压缩、默认是production
entry: {
main: '入口文件'
},
output: {
filename: '打包的文件名称',
path: 输出路径-> path.resolve(__dirname, 'dist')
}
}
- 其实就是一个打包方案。它知道对于某些特定的文件知道怎么打包。而本身webpack并不知道对于这些文件应该怎么处理。
- 打包图片配置。
const jpgFile = require('img.jpg')
moudle.export = {
entry,
output,
module: {
rules: [{
test: '/\.jpg$/',
use: {
loader: 'file-loader'，
options: {
name: '[name][hash].[ext]'
}
}
}]
}
}
webpack在打包的时候如果遇到js的时候，webpack可以识别js打包。如果遇到jpg文件时候，把jpg打包交给file-loader去处理。
file-loader做了什么呢？ 1.当filer-loader发现文件里引入了jpg文件，它会把文件移动到dist目录下，改一个名字，之后返回
图片相对dist目录的地址。 然后把返回的地址，赋值给jpgFile变量。
moudle.export = {
entry,
output,
module: {
rules: [{
test: '/\.(jpg|png|gif)$/',
use: {
loader: 'file-loader'，
options: {
name: '[name][hash].[ext]',
outputPath: 'images/'
}
}
}]
}
}
[hash]代表输出添加hash、[ext]输出文件尾缀。
outputPath可以在打包目录下生成images、里面放入打包的图片资源。
- file-loader 可以 替换成 url-loader, url-loader作用是？
相当于把图片生成base64字符串放在了打包的js中。 使用场景，是打包1-2kb的适合url-loader，可以减少一次http请求。
rules: [{
test: '/\.(jpg|png|gif)$/',
use: {
loader: 'url-loader'，
options: {
name: '[name][hash].[ext]',
outputPath: 'images/',
limit: 2048
}
}
}]
limit限制小于1kb的就打成js。
- 一般打包css使用两个loader、 style-loader和css-loader，基本配置如下:
import css from './index.css'
rules: [{
test: '/\.css$/',
use: ['style-loader','css-loader']
}]
style-loader的作用:
把打包后的css文件挂载到head标签中。
css-loader的作用：
把所有css及上下文的css依赖整合成一个css。
import css from './index.scss'
rules: [{
test: '/\.scss$/',
use: ['style-loader','css-loader', 'scss-loader']
}]
npm install sass-loader node-sass webpack --save-dev sass 依赖 node-sass
scss-loader的作用:
把sass语法还原成css语法
- loader的执行顺序怎么样的？
- 如何处理css3的兼容前缀呢？
npm i -D postcss-loader
rules: [{
test: '/\.scss$/',
use: ['style-loader','css-loader', 'scss-loader', 'postcss-loader']
}]
- 项目根目录下创建postcss.config.js
npm i -D autoprefix
module.exports = {
require('autoprefixer')
}
- css-loader配置高级用法
- 场景分析：存在index.scss中通过 @import 引入 common.scss， 如果直接通过上面的配置，那么common.scss就
不会再走 postcss-loader 和 scss-loader。 解决方案如下.
npm i -D postcss-loader rules: [{ test: '/\.scss$/', use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 2, // 解决上述问题，表示如果遇到scss中import scss文件，则重新走下方loader modules: true } }, 'scss-loader', 'postcss-loader'] }]
rules: [{
test: '/\.(eot|ttf|svg)$/',
use: {
loader: 'file-loader'
}
}]
- 定义: plugin可以在webpack运行到某个时候的时候帮你做一些事情。
- 常用plugin及功能：
- HtmlWebpackPlugin: 自动在打包目录下生成index.html, 并把打包的js引入到index.html中
plugins: [
new HtmlWebpackPlugin({
template: 模版html
})
]
- clean-webpack-plugin: 打包之前可以删除某个文件
plugins: [
new CleanWebpackPlugin(['dist']）
]
moudle.export = {
entry: {
main: './index.js',
main2: './index.js'
},
output: {
publicPath: 'http:www.cnd.cn',
fliename: '[name].js', // 占位符name代表自动取entry配置的key值
path: path.resolve(__dirname, 'dist')
}
}
- 什么是sourceMap?
- sourceMap为一个映射关系，可以映射打包后的文件代码和源代码中的代码。
moudle.export = {
devtool: 'source-map'
}
inline-source-map: 会打包到js文件中，底部注释中
cheap-source-map: 当我们代码量很大，代码出错， source-map会告诉你哪行哪列出错，而cheap-source-map只能知道行，性能会加速
moudle-source-map: moudle能关联到第三方包里的错误。
eval: 性能最好
cheap-module-eval-source-map: 开发环境推荐配置
cheap-moudle-souce-map: 线上如果出问题，推荐配置
- 主要用于起node服务让项目做热加载更新
- 原始的方式可以通过在package.json 的 script 下添加 --watch属性做监听，只有webpack打包的文件发生变化就自动打包，但是需要重新刷新浏览器。
- devServer可以解决自动刷新浏览器，并且通过参数能自动打开浏览器
moudle.export = {
devServe: {
contentBase: '本地服务器路径 -> dist目录',
open: true, // 自动打开浏览器
index: '', // 如果想代理根路径,需要配置这个参数"/"
proxy: {
"react": {
target: "http://localhost:8081",
secure: false, // 如果转发的是https需要配置这个参数
pathRewrite: {
"header.json": "demo.js" // 假设本地服务是http://localhost:8080,请求的接口是：http://localhost:8080/react/api/header.json -> http://localhost:8081/react/api/demo.json
},
headers: {
host: 'www.dell-le.con', // 可以模拟host
cookie: 'zybBussXXX' // 模拟cookie
},
historyApiFallback: true, // 原理是对路径的请求都转为对跟路径的请求
historyApiFallback: { // 等价与上面，无论访问什么路径都访问index.htnl
rewrites: [{
from: /\.\/,
to: '/index.html'
}]
}, // 等价于上面写法
changeOrigin: true, //突破origin限制
bypass: function(req, res, proxyOptions) { //相当于代理的filter， 当前例子为，如果请求的是html就直接返回了。
if(res.header.accept.indexOf('html') !== -1) {
retrun false
}
}
}
}, // 接口代理
}
}
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware'); // 监听文件改变重新执行
const config = require('./webpack.config.js');
<!-- node中使用webpack返回编译器 -->
const complier = webpack(config); // 编译器，相当于执行一直编译器就自动打包一次代码
const app = express();
app.use(webpackDevMiddleware(complier, {
publicPath: config.output.publishPath
}));
app.listen(3000, () => {
console.log('serve is running')
})
- 热模块更新hmr (及改了css的文件，只更新css的文件更新，只改了js的文件，只更新js的文件更新)
moudle.export = {
devServe: {
hot: true, // 热加载生效
hotOnly: true //即使热加载不生效，浏览器也不刷新
}
}
- 同时配置插件 hotMoudleReplacementPlugin
plugins:[
new webpack.hotMoudleReplacementPlugin()
]
- 如果引入一些比较偏的文件，可能需要编写hmr代码，如下：
import moudleFile from './moudleFile'
if(module.hot) {
module.hot.accept('./moudleFile', () => {
moudleFile()
})
}
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill
@babel/core babel的核心模块
@babel/preset-env 中包含了所有es6转es5的翻译规则
@babel/polyfill 用于es6语法转换es5语法（兼容低版本兼容）不适合第三方组件库，因为它处理promise，map的时候，是通过全局变量的方式注入，因此会污染全局环境。
rules: [
{
test: /\.js$/
exclude: /node_moudules/,
loader: "babel-loader",
options: {
preset: [['@babel/preset-env', {
useBuiltIns: "usage" // 当做preset-env做版本填充时， 根据业务代码情况来动态填充。（按需引入）
}]]
}
}
]
- babel配置第三方库（比如说你写了一个第三方组件库）
npm install --save @babel/plugin-transform-runtime // 通过此插件不污染全局环境，通过必包的形式注入es6转换代码
npm install --save @babel/runtime-corejs2
rules: [
{
test: /\.js$/
exclude: /node_moudules/,
loader: "babel-loader",
options: {
"plugins": ["@babel/plugin-transform-runtime", {
"core.js": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}]
}
}
]
options中的内容也可以放在根目录下的.babelrc文件下，效果是相同的。
npm install --save-dev @babel/preset-react
rules: [
{
test: /\.js$/
exclude: /node_moudules/,
loader: "babel-loader",
options: {
preset: [
[
'@babel/preset-env', {
useBuiltIns: "usage" // 当做preset-env做版本填充时， 根据业务代码情况来动态填充。（按需引入）
}]
"@babel/preset-react"
}
}
]
babel配置执行顺序从下往上从右往左
- 举个例子, 假设有index.js，内部引入main.js的是 add 方法如下。
import { add } from './main.js'
add(1,2);
export function add( a, b ) {
return a + b;
}
export function menu() {
}
- 如果此时通过webpack打包， 会把menu也打入js中， 而webpack2以后引入Tree Shaking概念，就不会把menu打包进去，这样极大优化代码体积。可以把每个模块都理解为一个树结构，而Tree Shaking只引入需要的树节点。不用的被摇晃掉。
- 如何实现Tree Shaking?
- 首先Tree Shaking只支持es Moudle. 因为es Modle是静态引入。
- 开发环境下配置Tree Shaking, webpack.config.js
moudle.export = {
entry,
output,
plugins,
rules,
optimization: {
usedExports: true
}
}
"name": 'xxx',
"sideEffects": ['@babel/polyfill', '*.css'], 代表可以忽略使用 Three Shaking 的文件。
- 开发环境下配置Tree Shaking, 只需要配置package.js中的sideEffects，其余都自动帮你注入了配置。
- 区分 webpack.common.js、 webpack.dev.js、 webpack.prod.js 3个文件。 通过引入webpak-merge组合webpack.comm.js 和 webpack.dev.js 或 webpack.prod.js 做合并。
- code splitting
moudle.export = {
entry,
output,
plugins,
rules,
optimization: {
splitChunks: { // 底层实现了split-chunk-plugin插件
chunks: all
}
}
}
- 异步代码分割，不需要配置，不如如下代码，webpack会自动帮你分割
function getComponent() {
return import('lodash').then(({ defalut: _ }) => {
return '1'
})
}
getComponent().then(data => {
console.log(data)
})
- splitChunks参数总结
moudle.export = {
entry,
output,
plugins,
rules,
optimization: {
splitChunks: { // 底层实现了split-chunk-plugin插件
chunks: 'async', // 代码分割只适合异步代码（all所有 | async异步 | initial同步）
minsize: 30000, // 大于30kb才进行代码分割
maxSize: 0, // 可配置可不配置, 根据当前文件尝试做二次分割
minChunks: 1, // 代码import代码引入几次之后才做代码分割,
maxAsyncRequest: 5, // 文件分割超过几个不做代码分割。 一般不用配置
maxInitialRequest: 3, // 入口文件分割超过3个就不做代码分割。一般不用配置
automaticNameDelimiter: '~', // 组和入口文件生成的分割文件名称用什么连接
cacheGroup: { // 缓存组
vendors: { // 对代码分割进行分组，如果匹配到test的规则的，进行代码分割。
test: /[\\/]node_modules[\\/]/, //符合node_moudles目录下才行
priority: -10, // 优先级
fileName: 'vendors.js'
},
default: {
priority: -20,
fileName: 'common.js'
}
}
}
}
}
- webpack懒加载、懒加载其实就是通过import(模块) 去加载模块, 可以让页面加载更快. 懒加载其实是es的概念，只不过webpack能识别这种语法。
打包分析、preloading、prefetching
- 在线分析工具: https://github.com/webpack/analyse
- 插件方案： webpack-bundle-analyzer
- 如何查看代码的利用率？
- 通过web -> console -> command + shift + p (mac) + coverage 可以查看代码利用了
- 优化方案，通过拆分js文件 通过调用方法，动态import需要执行的业务逻辑即可。
- 什么是prefetching preloading？
- prefetching 利用空余时间加载import的js文件。（网络带宽空闲的时候）
- import(/* webpackPrefetch: true */， './a.js')
- preloading 和依赖文件一起加载（不推荐）
- import(/* preloading: true */， './a.js')
- 重点在做前端优化的时候，缓存并不是最重要的点，最重要的点其实是代码覆盖率。
- MiniCssExtractPlugin -> mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin);
module.export = {
rules: [{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'scss-loader'
]
}],
plugins: [
new MiniCssExtractPlugin({})
]
}
注意：package.json 需要配置，不让css去Tree Shaking
"sideEffects": ['*.css']
- 通过optimize-css-assets-webpack-plugin来做代码压缩
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin)
module.export = {
optimization: {
minimizer: [new optimizeCssAssetsWebpackPlugin({})] // 对抽离的css做代码压缩
}
}
package.json
"scripts": {
"build": "webpack --env.production --config ./build/webpack.prod.js"
}
- 通过在output配置占位符[contenthash]，每次内容改变，会重新生成hash处理缓存。
- 老版本webapck需要配置：
optimization: {
runtimeChunk: {
name: 'runtime' // 会把业务代码和第三方库的代码交互的代码做抽离，生成一个runtime.js
}
}
const webpack = require('webpack');
new webpack.ProvidePlugin({
$: 'jquery'
})
const webpack = require('webpack');
new webpack.ProvidePlugin({
$: 'jquery',
_join: ['loash', 'join']
})
moudle: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader'
},
{
loader: 'imports-loader?this=>window' // 可以把模块中的this指向window
},
]
}
]
}
- 核心配置如下，先安装 npm install eslint --save-dev， 通过命令npx eslint --init生成eslint配置文件.eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: ["plugin:vue/essential", "@vue/prettier"], // 走那种规范
rules: {
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
},
parserOptions: {
parser: "babel-eslint"
}
};
- 1、跟上技术迭代 (提升Node、npm、yarn的版本)
- 2、在尽可能少的模块 （合理使用exclude和include，让loader作用返回缩小）
- 3、plugin尽可能精简并确保可靠
- 4、resolve参数合理配置：
{
reslove: {
extensions: ['.js', '.jsx'] // 不用写后缀了
}
}
- 5、webpack.DllPlugin 插件优化。
- 通过把第三方包打成一个库，然后通过dllPlugin分析成mainfest.json文件
add-asset-html-webpack-plugin --save // 通过此插件可以往html中添加(挂载)某个js
plugins: {
new AddAssetHtmlWebpackPlugin({
filePath: path.resolve(__dirname, '../dll/vendor.dll.js')
})
new webpack.DllReferencePlugin({
mainfest: path.resolve(__dirname, '../dll/vendor.mainfest.json')
})
}
- 6、启用happypack多进程打包，parallel-webpack多页打包（适合多页）
- 7、合理使用sourceMap, sourceMap越详细，打包速度越快。
- 8、结合stats分析打包结果
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent