webpack4.0从入门到放弃

一、入坑初探

1. 设置项目为私有

我们只需要在package.json文件中配置，因为是私有项目不需要向外部暴露的，所以我们可以去掉main: index.js

"private": true

2. 运行webpack

一般我们安装webpack时会同时安装webpack-cli，它的作用是使我们可以在命令行使用webpack命令，在命令行中执行

npx webpack --config webpack.config.js

--config指定webpack执行的文件，如果没有，默认是webpack.config.js，因为我们是在命令行中执行，所以需要npx，如果我们写在package.json文件中，则只需要"bundle": "webpack"就可以了。

3. webpack简单配置

webpack只能识别后缀是.js的文件，如果是其它类型的文件，就需要引入loader来帮助我们编译。
下面我们来做一个简单的对图片和css的打包配置：

rules: [
    {
        test: /\.(jpg|png|gif)$/,
        use: {
        loader: 'url-loader',
        options: { // loader额外参数配置
            name: '[name]_[hash].[ext]', // name: 原来的名字 ext:原来的后缀
            outputPath: 'images/', // 输出路径
            limit: 10240 // 限制，大于10240kb时才进行此操作，否则直接打到js文件中
         }
      } 
      },{
          test: /\.scss$/,
          use: [
                'style-loader',  // 将css挂载到header中
                // options: {
                    // insertAt: 'top' // 插到顶部
                // },
            'css-loader',  // 分析当前有几个css文件，将css文件整合，分析@import这种语法
            'sass-loader',
            'postcss-loader'
          ]
     }
]

file-loader和url-loader的区别是url-loader会把图片等(任何文件)文件直接打包到js中，如果图片很小，我们可以使用这种方式，如果图片较大，我们就需要将图片打包到统一的images目录中，在上面代码中我们做了一个限制，当图片大于10kb时，就打包到images目录中，否则直接打包到js中

注意loader执行顺序是从下到上执行的，如css这里，执行顺序为:
postcss-loader->sass-loader->css-loader->style-loader

最后我们再来看打包完命令行中的展示，如下图所示：

image.png

Chunks: 打包的js的id，
Chunk Names: 打包的js名字

二、loader篇

1. css相关loader

{
    test: /\.scss$/,
    use: [
        'style-loader', 
        {
            loader: 'css-loader',
            options: {
                importLoaders: 2, // 如果当前引入的scss文件又引入了其它scss文件，让引入的scss文件也需要通过postcss-loader,sass-loader编译，如果不加，就会直接走css-loader，2代表前两个，几就代表前几个
                modules: true // 开启css模块化，开启后css需要用模块化引入的写法
            }
        },
        'sass-loader',
        'postcss-loader'
    ]
}

关于配置css-next的方法查看postcss-loader的文档：https://webpack.js.org/loaders/postcss-loader

2. 打包字体文件

{
    test: /\.(eot|ttf|svg)$/,
    use: {
        loader: 'file-loader'
    } 
}

打包字体文件用file-loader把字体文件打包到dist目录中就可以了

三、webpack基础

plugins相当于vue，react中的钩子，可以在webpack运行到某个时刻的时候，帮助我们做一些事情

1. html-webpack-plugin

我们需要自动生成一个html文件，把打包生成的js自动引入到这个html文件中

plugins: [
    new HtmlWebpackPlugin({
        template: 'src/index.html' // 指定模版文件
    })

2. CleanWebpackPlugin

我们需要在每次打包后删掉上一次的打包文件

new CleanWebpackPlugin(['dist'])]

关于dist目录和webpack配置文件不在同一个根目录下，我们需要如下解决方法

new CleanWebpackPlugin(['dist'], {
    root: path.resolve(__dirname, '../')
})

2. copyWebpackPlugin

有些时候我们需要拷贝一些静态资源文件到dist目录

new CopyWebpackPlugin([
   {from: 'doc', to: './'}
])

2. bannerPlugin

版权声明插件，可以在我们打包生成的文件前生成一些版权信息等

new webpack.BannerPlugin('[email protected]')

3. 打包多份js，指定cdn引用路径

首先我们需要配置多入口

entry: {
    main: './src/index.js',
    sub: './src/index.js'
}

出口处我们不能写死一个名字，否则会因打包处两份相同的文件而报错

output: {
    publicPath: 'http://cdn.com.cn', // 设置前缀(cdn地址)
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
}

4. sourceMap

devtool: 'cheap-module-eval-source-map'  // development
devtool: 'cheap-module-source-map'  // production

一般在开发环境中我们使用cheap-module-eval-source-map，在线上环境使用cheap-module-source-map，如果要关闭sourceMap我们需要把devtool置为none
cheap：指我们的业务代码
module： 第三方模块代码
具体用法参考官方文档：https://webpack.js.org/configuration/devtool/#devtool

5. 热启动

5.1 通过shell脚本

"watch": "webpack --watch",

我们只需要在package.json文件中设置watch即可，但是这种方法存在很多缺陷，如果我们需要开启一个本地服务，那么我们需要使用webpack-dev-server

5.2. webpack-dev-server

devServer: {
    contentBase: './dist',
    open: true, // 是否打开浏览器
    port: 8080
}

我们需要注意的是，使用webpack-dev-server时我们并未发现有dist目录，这时因为webpack-dev-server将打包好的文件隐藏到计算机的内存中了，这样执行更快。
关于webpack-dev-server的更多配置参考官网：https://webpack.js.org/configuration/dev-server

下面我们来实现一个简单的webpack-dev-server

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
// 在node中直接使用webpack
// 在命令行里使用webpack
const complier = webpack(config);
const app = express();
app.use(webpackDevMiddleware(complier, {}));
app.listen(3000, () => {
    console.log('server is running');
});

6. Hot Module Replacement 热模块更新

当我们每次修改代码时，页面都会整个刷新，这样岂不是很麻烦，有没有办法只更新被修改的部分，而不刷新整个页面，这时我们需要用到HotModuleReplacementPlugin

const webpack = require('webpack');
module.exports = {
    ...
    devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true,
        hotOnly: true
    },
    ...
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}

这里我们要注意的是，必须在devServer加上hot: true,hotOnly: true，Hot Module Replacement才会生效

这时修改了某个文件后，我们就需要手动去更新了

if(module.hot) {
    module.hot.accept('./number', () => {
        document.body.removeChild(document.getElementById('number'));
        number();
    })
}

然而我们平常用css，vue和react等的时候并没有这么去做，这是因为是因为css-loader，vue-loader，react-loader中自动帮我们实现了

7. Babel 处理 ES6 语法

这里我们要参考babel官方文档：https://babeljs.io/setup#installation，下面我们先来做一个简单的配置：

{ 
    test: /\.js$/, 
    exclude: /node_modules/, 
    // include: path.resolve(__dirname, '../src'), // 只检测某个目录，exclude除掉某个目录
    loader: 'babel-loader',
    options: {
        presets: [['@babel/preset-env', { // @babel/preset-env将es6转为es5
            useBuiltIns: 'usage'
        }]]
    }
}

这里我们需要注意，我们需要配置exclude: /node_modules/, 否则这里也会去匹配node_modules中的js文件，同时我们可以看到，如果所有配置都写在webpack.config.js中，那将会变得非常复杂，所以这里建议新建一个.babelrc文件，将babel-loader中的配置放在.babelrc中，如下所示：

{
    presets: [
        [
            "@babel/preset-env", {
                targets: {
                    chrome: "67", // 支持哪个版本以上的浏览器
                },
                useBuiltIns: 'usage' // 实现按需加载
            }
        ]
    ]
}

在有些低版本浏览器中是不支持es5的一些语法的，这时我们需要@babel/polyfill帮我们解决，我们直接在入口文件中main.js引入@babel/polyfill即可

import "@babel/polyfill";

但是我们怎么实现按需加载呢，我们再.babelrc中添加useBuiltIns: 'usage'

参见官网：https://babeljs.io/docs/en/babel-polyfill

8. 类库的配置

当我们写一个类库时，我们可以用@babel/plugin-transform-runtime，相比@babel/polyfill，它是通过闭包实现依赖注入，这样做不会污染全局环境

{
    "plugins": [["@babel/plugin-transform-runtime", {
        "corejs": 2, // 设为2可以实现按需引入而不是全局引入，设为2后需要安装@babel/runtime-corejs2
        "helpers": true,
        "regenerator": true,
        "useESModules": false
    }]]
}

9. watch用法

watch: true,
watchOptions: { // 监控的选项
    poll: 1000, // 每秒监控多少次
    aggregateTimeout: 500, // 防抖，停止输入500ms后再打包
    ignored: /node_modules/ // 不需要监控的文件夹
}

四、Webpack进阶

1. Tree-shaking

Tree-shaking大意就是只打包我们有使用的代码，将无用的部分去掉，举例如下：
我们有一个math.js的方法库，内容如下

export const add = (a, b) => {
    console.log( a + b );
}

export const minus = (a, b) => {
    console.log( a - b );
}

然后我们在index.js中使用math.js的add方法

import { add } from './math.js';

add(1, 7);

这里有一点我们需要注意，Tree-shaking只支持import这种ES Module，不支持require这种形式的。
虽然我们只引入了add方法,但是webpck默认把math.js中所有的文件都帮我们打包了，如何做到只打包我们使用的部分代码呢？这时我们需要在webpack中作如下配置

plugins: [],
...
optimization: {
    usedExports: true
},

然后我们需要在package.json文件中这样配置：

"sideEffects": [
    "@babel/polly-fill",
    "*.css"
]

首先来解释下它是什么意思，即忽略掉哪些模块不做Tree-shaking，首先我们要忽略所有的css文件，其次如果像import @babel/polyfill这种形式的，我们没有引入任何东西，webpack会自动帮我们忽略掉，这样打包文件就出错了

在生产环境tree shaking 是自动生效的，不用再webpack中做配置，但是我们依然需要在package.json中需要配置

"sideEffects": false // false代表没有需要忽略的文件

2. Develoment 和 Production

我们仿照create-react-app，创建build目录存放我们的weback配置文件，首先我们将公用文件提到webpack.common.js，然后我们用webpack-merge合并，如下所示：

const commonConfig = require('./webpack.common.js');
const devConfig = {
  ...
}
module.exports = merge(commonConfig, devConfig);

因为我们将webpack配置文件放在了build目录中，此时dist与webpack配置文件不在同一根目录下，这是我们需要解决dist和webpack不在同一个根目录下而产生的clean插件无法删除dist目录问题，解决方法如下：

new CleanWebpackPlugin(['dist'], {
    root: path.resolve(__dirname, '../')
})

3. Code Splitting代码分割

3.1 多入口打包方法

如果我们想把引入的模块单独打包，我们需要单独创建一个文件引入这个包，然后挂载到window上，再在入口处引入这个文件
这里我们以lodash为例：
新建lodash.js文件，内容如下：

import _ from 'lodash';
window._ = _;

然后我们在entry引入这个包，

entry: {
    lodash: './src/lodash.js',
    main: './src/index.js'
}

3.2 配置optimization

在webpack中我们可以配置chunks来自动帮我们做(同步)代码分割

optimization: {
    splitChunks: {
        chunks: 'all'
    }
}

3.3 异步模块打包

异步模块不需要我们做任何配置，webpack会自动帮我们将异步代码打包到另一个文件中。
在使用异步加载的写法时(vue中懒加载模块)，我们需要安装babel-plugin-dynamic-import-webpack，然后在.babelrc中配置

{
    presets: [
        [
            "@babel/preset-env", {
                targets: {
                    chrome: "67",
                },
                useBuiltIns: 'usage'
            }
        ]
    ],
    plugins: ["dynamic-import-webpack"]
}

异步代码写法

function getComponent() {
    return import('lodash').then(({ default: _ }) => {
        var element = document.createElement('div');
        element.innerHTML = _.join(['Dell', 'Lee'], '-');
        return element;
    })
}

getComponent().then(element => {
    document.body.appendChild(element);
});
// es7写法
async function getComponent() {
    const { default: _ } = await import(/* webpackChunkName:"lodash" */ 'lodash');
    const element = document.createElement('div');
    element.innerHTML = _.join(['Dell', 'Lee'], '-');
    return element;
}

document.addEventListener('click', () =>{
    getComponent().then(element => {
        document.body.appendChild(element);
    });
})

import(/* webpackChunkName:"lodash" */ 'lodash');

这是魔法注释，加上后，打包出来的js会是你注释的值，否则为一个id(如0)值

4. SplitChunksPlugin 配置参数

splitChunks默认配置,当我们写一个splitChunks: {}，默认等于如下

splitChunks: {
    chunks: "async", // async 只对异步代码生效， all同步异步都生效， initial同步生效
    minSize: 30000, // 文件大于多少时才会打包
    //maxSize: 0, // 会尝试对大于多少的文件再次分割为两个小文件
    minChunks: 1, // 当一个模块至少被用了几次后才做代码分割
    maxAsyncRequests: 5, // 最多分割几个包
    maxInitialRequests: 3, // 入口文件引入的库最多能分割成几个包
    automaticNameDelimiter: '~', // 生成文件名字中间的连接符
    name: true, // 使cacheGroups中设置的文件名有效
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10 // 优先级的意思，如果同时满足vendors和default，这个值谁大就打包到哪个组，-10大于-20
        },
        default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true // 如果引入的某个文件之前已经被打包过，就不会被打包了，会直接去复用之前的
        }
    }
}

chunks: "all"时我们需要注意，这时webpack会继续找到cacheGroups，vendors中的test表示被打包的文件是否在node_modules这个文件夹中，如果是的话，就会打包到vendors这个组中，这时打包出来的文件名字应该是vendors~main.js,main是定义的入口文件名字，如果我们想指定一个名字，可以在vendors中设置filename指定一个名字

default是指如果不符合vendors中的要求的文件，比如我们自己写的一个包，这个包并不在node_modules中，这时会分到default组中
cacheGroups作用是做一个缓存组，如果我们引入了多个包，就会分割成很多模块，而cacheGroups作用就是先将需要打包的文件缓存起来，然后统一打包到一个组中

vendors, default也可以设置为false

5. 打包分析，Preloading, Prefetching

5.1 打包分析

在package.json中设置一个下面的命令，然后运行

"dev-build": "webpack --profile --json > stats.json --config ./build/webpack.dev.js"

会生成一个stats.json文件，这是一个对打包过程的描述文件，借助一些工具我们可以进行分析。
参考analyse：https://github.com/webpack/analyse
参考官网：https://webpack.js.org/guides/code-splitting/#bundle-analysis

5.2 代码使用率

在浏览器调试工具中按command+shift+p，然后我们选择show coverage选项，可以查看代码的使用率，代码使用率越高说明优化的越好，所以我们开发时尽量多写异步的代码，这样代码使用的时候才会去加载
如下所示：

// click.js
function handleClick() {
    const element = document.createElement('div');
    element.innerHTML = 'Dell Lee';
    document.body.appendChild(element);
}

export default handleClick;

// index.js
document.addEventListener('click', () =>{
    import(/* webpackPrefetch: true */ './click.js').then(({default: func}) => {
        func();
    })
});

Prefetching是等主代码加载完才会加载，Preloading是与主代码同时加载

6. CSS代码分割

这里我们需要使用mini-css-extract-plugin
参考官网：https://webpack.js.org/plugins/mini-css-extract-plugin

6.1 我们先来看一下output内容：

output: {
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
    path: path.resolve(__dirname, '../dist')
}

这里说一下filename与chunkFilename的区别：
入口文件的打包用filename，chunk文件打包用chunkFilename

6.2 分割css

如果我们不分割css，webpack会默认把css打包到js文件中，这是我们不希望看到的，下面来看下mini-css-extract-plugin的使用方法。注意，如果打包失败，需要看一下是不是package.json文件中这里配置有误，可能是tree shaking影响了

"sideEffects": "false"
// 改为
"sideEffects": ["*.css"]

{
    test: /\.css$/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader'
    ]
}

plugins: [
    new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[name].chunk.css'
    })
]

6.3 css压缩

我们还可以对css进行压缩，这时我们需要用到optimize-css-assets-webpack-plugin
然后配置如下：

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
optimization: {
    minimizer: [new OptimizeCSSAssetsPlugin({})]
}

6.4 多入口的css打包到一个css中

这个配置意思是只要是css文件就打包到这个组中

optimization: {
    splitChunks: {
        cacheGroups: {
            styles: {
                name: 'styles',
                test: /\.css$/,
                chunks: 'all',
                enforce: true
            }
        }
    }
}

enforce为true表示忽略其它的默认参数

6.5 不同入口打包到不同组

参考官网：https://webpack.js.org/plugins/mini-css-extract-plugin

6.6 去掉性能上的警告

performance: false, // 去掉性能上的警告
output: {
    path: path.resolve(__dirname, '../dist')
}

7. runtimeChunk

配置runtimeChunk是因为在一些老版本的webpack中，manifest(包与包之间的关系)文件是加在main与vendors文件中的，这样会导致即使我们没有更改文件，但是包与包之间的关系变了而引起的contenthash发生变化，这时我们就需要这样配置将这部份代码抽离出来，在新版webpack中不会出现这个问题

optimization: {
    runtimeChunk: {
        name: 'runtime'
    },
    usedExports: true,
    splitChunks: {
        chunks: 'all',
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10,
                name: 'vendors',
            }
        }
    }
},

8. Shimming

一些第三方的库(library)可能会引用一些全局依赖(例如 jQuery 中的 $)。这些库也可能创建一些需要被导出的全局变量。这些“不符合规范的模块”就是 shimming 发挥作用的地方。

8.1 全局引入

new webpack.ProvidePlugin({
    $: 'jquery',
    _join: ['lodash', 'join']
})

当发现一个模块中用了$时，会在模块中默认引入jquery
如果需要使用模块中的某个方法，我们可以用一个数组的方式定义

8.2 修改this指向

每个模块的this指向的都是模块自身，如果想让this指向window,需要imports-loader插件，然后我们再做如下配置：

{ 
    test: /\.js$/, 
    exclude: /node_modules/,
    use: [{
        loader: 'babel-loader'
    }, {
        loader: 'imports-loader?this=>window'
}

9. 环境变量的使用

module.exports = (env) => {
    if(env && env.production) {
        return merge(commonConfig, prodConfig);
    }else {
        return merge(commonConfig, devConfig);
    }
}

然后在package.json中设置环境变量

"build": "webpack --env.production --config ./build/webpack.common.js"

五、webpack高级使用技巧

1. 类库代码打包

我们对package.json进行设置

"license": "MIT", // 开源

然后在output中做如下设置：

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'library.js',
    library: 'library', // 可以script标签引入，在全局挂载了一个library变量
    libraryTarget: 'umd' // 使支持amd,cmd,require等语法
}

还可以用如下写法

library: 'library', // 可以script标签引入，在全局挂载了一个library变量
libraryTarget: this' // 这两个配合就不支持amd等写法了，只会挂载一个全局变量

lodash : {
      commonjs: 'lodash', // 通过require(common.js)引入时，名字必须叫lodash
      amd: 'lodash',
      root: '_' // 通过script标签引入时必须在全局挂载一个_变量
}

const lodash = require('lodash')  // commonjs设置的意思是const后的名字必须叫lodash

如果我们编写的库中引入了其它包，我们不希望引入的包被打包，这时我们可以设置

module.exports = {
    ...
    externals: 'lodash',
    output: {
        ...
    }
}

这里写成一个数组，对象，字符串形式都可以，对象形式：

module.exports = {
    ...
    externals: {
        lodash: {
            commonjs: 'lodash'
        }
    },
    output: {
        ...
    }
}

参考官网：https://webpack.js.org/configuration/externals/#externals

最后我们需要把package.json的入口文件改为

"main": "./dist/library.js",

然后在npm注册一个账号，
然后npm adduser添加用户名和密码
再npm publish

2. PWA 的打包配置

安装workbox-webpack-plugin
在plugins中配置：

new WorkboxPlugin.GenerateSW({
    clientsClaim: true,
    skipWaiting: true
})

js文件为

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
        .then(registration => {
            console.log('service-worker registed');
        }).catch(error => {
            console.log('service-worker register error');
        })
    })
}

3. TypeScript 的打包配置

我们需要安装ts-loader typescript
在rules中配置：

{
    test: /\.tsx?$/, // ?代表可有可无
    use: 'ts-loader',
    exclude: /node_modules/
}

同时创建tsconfig.json文件，做如下配置

{
    "compilerOpitons": {
        "outDir": "./dist",
        "module": "es6", // 使用es6的模块引入方法
        "target": "es5", // 转换为es5形式
        "allowJs": true // 允许ts中引入js文件
    }
}

一般库的typescript版本都是@types/名字，可以参考：https://github.com/DefinitelyTyped/DefinitelyTyped

4. WebpackDevServer 实现请求转发

注意本章只在开发环境生效，对生产环境没有影响

4. 1. 代理接口

proxy: {
        // index: '', // 如果要代理根路径，需要把index设置为false或者''
    '/react/api': {
        target: 'https://www.dell-lee.com', // 代理请求接口
        secure: false, // 如果是https网址，这里需要设置为false
        pathRewrite: { // 代理接口，访问header.json时会帮你请求demo.json
            'header.json': 'demo.json'
        },
        changeOrigin: true, // 后端可能设置了changeOrigin防止爬虫，这里我们设置true以后就可以避开这个限制了
        headers: { // 设置请求头
            host: 'www.dell-lee.com',
                        cookie: ....
        },
                bypass: function(req, res, proxyOptions) { // 拦截，如果请求的是一个html内容，则返回index.html
                    if (req.headers.accept.indexOf('html') !== -1) {
                          console.log('Skipping proxy for browser request.');
                          return '/index.html';
                    }
                }
    }
}

webpackdevserver proxy底层用了 http-proxy-middleware这个插件

如何使用mock数据

devServer: {
    before(app) {
        app.get('/user', (req, res) => {
            res.json(....)
        })
    }
}

4. 2. WebpackDevServer 解决单页面应用路由问题

当不使用hash路由时，我们可以设置以下内容

historyApiFallback: true, // 把对服务器的请求都转换为对跟路径的请求
historyApiFallback: {
      rewrites: [ // 访问abc.html时代理到index.html
        { from: /abc.html/, to: '/views/index.html' }
      ]
}

historyApiFallback: true相当于

historyApiFallback: {
      rewrites: [
        { from: /\.*\/, to: '/index.html' }
      ]
}

底层用了connect-history-api-fallback这个插件

5. EsLint 在 Webpack 中的配置

安装eslint
npx eslint --init

module.exports = {
    "extends": "airbnb", // 使用那个规则
    "parser": "babel-eslint", // 解析器
    "rules": {
        "react/prefer-stateless-function": 0,
        "react/jsx-filename-extension": 0
    },
    globals: {
        document: false // 不允许覆盖全局变量document
    }
};

在webpack中使用eslint
安装eslint-loader：https://webpack.js.org/loaders/eslint-loader

{ 
    test: /\.js$/, 
    exclude: /node_modules/, 
    use: ['babel-loader', 'eslint-loader']
}

同时配置overlay: true,eslint有错会在浏览器中提示

devServer: {
    overlay: true
}

设置force为pre代表强制先执行，fix会自动修复一些项目中eslint简单的错误

{ 
    test: /\.js$/, 
    exclude: /node_modules/, 
    use: [
        {
            loader: 'eslint-loader',
            options: {
                fix: true
            },
            force: 'pre'
         },
        'babel-loader'
    ]
}

六、webpack 性能优化

1. 经常更新版本

2. 使用loader时指定检测目录，图片没有必要

{ 
    test: /\.js$/, 
    include: path.resolve(__dirname, '../src'), // 只检测某个目录，exclude除掉某个目录
    use: [{
        loader: 'babel-loader'
    }]
}

3. 尽少使用plugin，尽可能精简并确保可靠

4. 合理配置resolve

resolve: {
    extensions: ['.js', '.jsx'],
    mainFIles: ['index', 'child']
},

当一个引入的文件没有后缀时，会识别它是不是.js，.jsx文件
引入一个目录，回去查找目录下是否有index，child文件
给文件或路径设置别名

resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
        child: path.resolve(__dirname, '../src/child')
    }
},

5. 第三方模块只打包一次

新建一个webpack.dll.js, 运行它对第三方模块单独打包，并生成vendors.manifest.json映射文件

const path = require('path');
const webpack = require('webpack');

module.exports = {
    mode: 'production',
     entry: {
        vendors: ['lodash'],
        react: ['react', 'react-dom'],
        jquery: ['jquery']
    },
    output: {
        filename: '[name].dll.js',
        path: path.resolve(__dirname, '../dll'),
        library: '[name]' // 将它暴露出去
    },
    plugins: [
        new webpack.DllPlugin({
            name: '[name]',
            path: path.resolve(__dirname, '../dll/[name].manifest.json'),
        })
    ]
}

然后再配置webpack.common.js

const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

new webpack.DllReferencePlugin({ // 查找vendors.manifest.json，如果发现这里有，就不会再重复打这个包
    manifest: path.resolve(__dirname, '../dll', '../dll/vendors.manifest.json')
})
new AddAssetHtmlWebpackPlugin({ // 向html中添加引入某个文件
    filepath: path.resolve(__dirname, '../dll',  '../dll/vendors.manifest.json')
})

自动化引入

const files = fs.readdirSync(path.resolve(__dirname, '../dll'));
files.forEach(file => {
    if(/.*\.dll.js/.test(file)) {
        plugins.push(new AddAssetHtmlWebpackPlugin({
            filepath: path.resolve(__dirname, '../dll', file)
        }))
    }
    if(/.*\.manifest.json/.test(file)) {
        plugins.push(new webpack.DllReferencePlugin({
             manifest: path.resolve(__dirname, '../dll', file)
        }))
    }
})

6. 控制包文件大小

7. thread-loader，parallel-webpack，happypack多线程打包

let happypack = require('happypack');

rules: [
  {
      test: /\.js$/,
      exclude: /node_modules/,
      include: path.resolve('src'),
      use: 'happypack/loader?id=js'
  }
]

plugins: [
    new happypack({
        id: 'js',
        use: [{
            loader: 'babel-loader',
            options: {
                ...
            }
        }]
    })
]

8. 合理使用sourceMap

9. 开发环境内存编译

webpackdevserver用的就是内存编译

10. 开发环境无用插件剔除

11. noParse

module: {
    noParse: /jquery/, 不去解析jquery中的依赖库
}

12. ignoreplugin

忽略掉我们不需要引入的包文件中的部分内容

// 我们不需要引入moment这个包里的/locale文件夹，就把它忽略掉
new webpack.IgnorePlugin(/\.\/locale/,/moment/)

七、多页面打包配置

多入口

entry: {
    index: './src/index.js',
    list: './src/list.js',
    detail: './src/detail.js',
}

生成多个html

new HtmlWebpackPlugin({
    template: 'src/index.html',
    filename: 'index.html',
    chunks: ['runtime', 'vendors', 'list'] // 指定引入文件
}), 
new HtmlWebpackPlugin({
    template: 'src/index.html',
    filename: 'list.html',
    chunks: ['runtime', 'vendors', 'list'] // 指定引入文件
}), 
new HtmlWebpackPlugin({
    template: 'src/index.html',
    filename: 'detail.html',
    chunks: ['runtime', 'vendors', 'list'] // 指定引入文件
}), 

自动化方式

const makePlugins = (configs) => {
    const plugins = [
        new CleanWebpackPlugin(['dist'], {
            root: path.resolve(__dirname, '../')
        })
    ];
    Object.keys(configs.entry).forEach(item => {
        plugins.push(
            new HtmlWebpackPlugin({
                template: 'src/index.html',
                filename: `${item}.html`,
                chunks: ['runtime', 'vendors', item]
            })
        )
    });
    return plugins;
}

八、webpack原理篇

1. 编写一个 Loader

1.1 同步操作

新建loader文件夹，在文件夹中新建replaceLoader.js文件

const loaderUtils = require('loader-utils');

module.exports = function(source) { // 注意这里不能使用箭头函数，我们需要变更this指向来调用this中的一些方法
    return source.replace('lee', 'world');
}

然后我们在webpack.config.js中引入

rules: [{
    test: /\.js/,
    use: [path.resolve(__dirname, './loaders/replaceLoader.js')]
}]

同时我们还可以传入一些参数

rules: [{
    test: /\.js/,
    use: [
        {
             loader: path.resolve(__dirname, './loaders/replaceLoader.js'),
            options: {
                name: 'zxh'
            }
        }
    ]
}]

这时我们就可以在replaceLoader.js，通过this.query可以接收到options中的内容

module.exports = function(source) { 
    return source.replace('hello',  this.query.name);
}

或者我们可以通过webpack官方提供的loader-utils模块，使用方法如下

const loaderUtils = require('loader-utils');
module.exports = function(source) {
    const result = source.replace('dell', options.name);
    return source.replace('hello',  options.name);
}

想要返回多个值时可以用this.callback

image.png

const loaderUtils = require('loader-utils');

module.exports = function(source) {
    const options = loaderUtils.getOptions(this)
    const result = source.replace('dell', options.name);
    this.callback(null, result, source, mata)
}

1.2 使用异步操作 this.async

const loaderUtils = require('loader-utils');

module.exports = function(source) {
   const options = loaderUtils.getOptions(this);
   const callback = this.async(); // 声明是异步操作

   setTimeout(() => {
       const result = source.replace('dell', options.name);
       callback(null, result);
   }, 1000);
}

引入模块时，会来node_modules中找，找不到了再来loaders文件夹中找，这时我们就可以像引入node_modules中的loader那样写了

entry: {
    main: './src/index.js'
},
resolveLoader: {
    modules: ['node_modules', './loaders']
},
module: {
    rules: [{
        test: /\.js/,
        use: [
            {
                loader: 'replaceLoader',
            }
        ]
    }]
}

2. 编写一个 Plugin

发布，订阅设计模式
https://webpack.js.org/api/compiler-hooks

class CopyrightWebpackPlugin {

    apply(compiler) {

        compiler.hooks.compile.tap('CopyrightWebpackPlugin', (compilation) => { // 同步，不用传callback
            console.log('compiler');
        })

        compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (compilation, cb) => { // emit是异步的，我们需要在后面写tapAsync，打包完放到文件夹时，compiler是所有打包文件，compilation是本次打包文件
            debugger;
            compilation.assets['copyright.txt']= {
                source: function() { // 内容
                    return 'copyright by dell lee'
                },
                size: function() { // 文件长度
                    return 21;
                }
            };
            cb(); // 最后必须调一下cb()
        })
    }

}

module.exports = CopyrightWebpackPlugin;

开启node调试工具

"debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js"

3. Bundler源码编写

安装cli-highlight：命令行高亮显示工具

const fs = require('fs');
const path = require('path');
const parser = require('@babel/parser'); // 帮助分析源代码
const traverse = require('@babel/traverse').default; // 帮助遍历module
const babel = require('@babel/core');

const moduleAnalyser = (filename) => {
    const content = fs.readFileSync(filename, 'utf-8'); // 读取文件内容
    const ast = parser.parse(content, { // 抽象语法树，ast
        sourceType: 'module' // 如果是es6模块方法，这里需要设置
    });
    const dependencies = {};
    traverse(ast, {
        ImportDeclaration({ node }) { // 如果有引入语句，就执行
            const dirname = path.dirname(filename);
            const newFile = './' + path.join(dirname, node.source.value); // 改为相对根目录的路径
            dependencies[node.source.value] = newFile;
        }
    });
    const { code } = babel.transformFromAst(ast, null, { // 将ast抽象语法树转换为浏览器可以识别的代码
        presets: ["@babel/preset-env"]
    });
    return {
        filename,
        dependencies,
        code
    }
}

const moduleInfo = moduleAnalyser('./src/index.js'); // 入口文件
console.log(moduleInfo);

vue-cli3多页面配置

image.png

参考：https://cli.vuejs.org/zh/config/