「本文正在参与技术专题征文Node.js进阶之路，点击查看详情」

这里根据真实项目，调教出最优的webpack配置

一、 Library 的打包

之前我们写的都是业务代码，我们现在开发一个通用的组件库，给其他人使用。

1) 创建一个library文件夹，`npm init -y`

2) library根目录创建src文件夹，创建`math.js、string.js 和index.js`

3) 根目录创建webpack.config.js

ouput:{
    library:'root',// <script> 引入时的变量名
    libraryTarget:'umd'// 'this'||'window',  当为umd是表示支持各种通用的模块引入方式， 当为this/window 时表示script引入时的全局对象
}

4）修改 `package.json`中的入口文件`"main":"./dist/library.js"`

5）npm官网注册一个账号

npm发布这一部分的可以参看 # 从构建自定义 cli（脚手架）到 npm 包的发布使用

上传打包的库给他人使用：

修改 package.json中的"main":"./dist/library.js"
npm官网注册一个账号
npm adduser 添加用户名密码
npm publish 将库发布到npm仓库

他人使用 npm install library（库名）

扩展：externals

webpack.js.org/configurati…

externals值为数组或对象，表示打包过程中要忽略打包的库，防止使用时用户重复引入库

例如：防止使用lodash时用户重复引入库

externals:['lodash']

也可以是对象

externals:{ 
    lodash:{ 
        commonjs:'lodash' // commonjs引入使用 lodash名字必须命名为lodash
    } 
}

二、 PWA 的打包配置

PWA全称Progressive Web App，即渐进式WEB应用。

PWA：是一种强缓存技术，访问过得页面及时服务器断开，也能通过缓存浏览之前访问的页面

1.安装 `npm install workbox-webpack-plugin -D`

// 来支持service-work 是为了缓存住页面即使在服务器挂掉了仍然能够访问页面

2.配置

    const WorkboxPlugin = require("workbox-webpack-plugin");

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

3. 注册使用

打包成功后，会在dist 目录下生成 service-worker.js

我们在页面中注册后就可以使用了

// 注册 service worker
      if ('serviceWorker' in navigator) {           
        navigator.serviceWorker.register('/service-worker.js', {scope: '/'}).then(function (registration) {
          // 注册成功
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }).catch(function (err) {                   
          // 注册失败 :(
          console.log('ServiceWorker registration failed: ', err);
        });
      }

三、 TypeScript 的打包配置

TS 官网：# TypeScript is JavaScript with syntax for types.

1. `npm install ts-loader typescript -D`

2.配置`tsconfig.js`

具体的配置需要到官方去查阅tsconfig官方文档

tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。

3.配置webpack的module

如果需要第三方的在我们使用的过程中也支持ts

需要安装对象的npm包例如： lodash 的 ts npm包 npm install @types/lodash --save-dev

问题来了，我们如何知道三方包是支持ts?

可以使用下面的方式查找 DefinitelyTyped

Type Search

Find npm packages that have type declarations, either bundled or on Definitely Typed.

四、使用 WebpackDevServer 实现请求转发

devServer 代理转发： webpack.docschina.org/configurati…

4.1 配置示例

proxy：{
    ‘/api': { 
        target: 'https://juejin.cn/', // 服务器域名
        secure： false, // 访问https接口，配置此项 
        pathRewrite: {
            'header.json' : 'demo.json' 
        }， //路径重写，便于测试服务器接口调试
        changeOrigin：true, // 对origin有限制网站进行访问，建议加上 
        header：{  // 更改请求头 
            host：'ww',
            cookie：'1',
        } 
    } 
}

六、 EsLint 在 Webpack 中的配置（1）

6.1 EsLint 作用

审查代码是否符合编码规范和统一的代码风格；
审查代码是否存在语法错误；

6.2 EsLint 使用

1. 在项目中安装eslint

npm install eslint --save-dev

2. 配置初始化生成的.eslint.js文件

npx eslint --init

执行完上面的内容，在项目中会生成.eslintrc.js文件

//.eslintrc.js
module.exports = {
    "extends": "airbnb" // 配置了Airbnb校验规则
}

3. 查看src里的文件是否符合eslint规范

npx eslint src

4. 规范react的规则

如果想要规范react的规则，需要再做一下其它设置：

进入es-lint官网，搜索react查看解决办法

需要安装 babel-eslint
- npm install babel-eslint --save-dev

eslint.js中配置parser: babel-eslint，也可以配置rules，去除掉一些不想遵循的规则

//.eslintrc.js
module.exports = {
    "extends": "airbnb",
    "parser": "babel-eslint"，
    rules: {
        // 1. 不允许使用 console.log，但是允许 console.warn 和 console.error
        'no-console': ['error', { allow: ['warn', 'error'] }],
        // 2. 允许引入 devDependencies 中的包，比如 webpack 相关的文件，这一个规则并不合理
        'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
        '@typescript-eslint/no-unused-vars': ['warn'],
        // 3. 不限制 ++ 这种写法
        'no-plusplus': 'off',
        // 4. 允许使用断路（&& 或 ||）或三元运算的方式代替 if else
        'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }],
        // 5. 不严格要求使用全等，因为现存代码中有大量的 ==，贸然改为 === 可能会导致 BUG。而且 == 有他的适用场景
        'eqeqeq': 'off',
        // ...
    },
     globals: { // 全局变量不允许被覆盖
        _global: false,
        React: false, // 见 webpack.common.js 中的 webpack.ProvidePlugin
        PropTypes: false, // 同上
    },
}

执行 npx eslint src 就可以生效了

看到eslint已经给出错误提示，给出需要优化修改的地方，并给出了提示

此时我们一行行修改会很麻烦

可以在编辑器下载eslint插件，直接有提示是否符合eslint规范。

6.3 使用webpack解决部分编辑器没有eslint插件的问题

使用webpack解决部分编辑器没有eslint插件的问题,

rulese: [{ 
    use:['babel-loader', 'eslint-loader'] // 可以通过force:pre来提升某一个loader的执行顺序 
}],
devServer: {
    // ...
    overlay: true, // 有错误会弹出来，会即时消失
}

可以通过force:pre来提升某一个loader的执行顺序

eslint-loader 官方配置

webpack 5 已经提供 EslintWebpackPlugin 插件用于eslint查找和修复 JavaScript 代码中的问题

6.4 最佳实践：

不在Webpack中配置，会降低打包速度。
使用git, "pre-commit": "lint-staged"

webpack 之 实战配置案例篇