从0搭建自己的webpack开发环境三

往期回顾：

从 0 搭建自己的 webpack 开发环境（一）

从 0 搭建自己的 webpack 开发环境（二）

1. 处理 JS 模块

1.1 将 es6 代码编译成 es5 代码

代码的转化工作要交给 babel 来处理

npm install @babel/core @babel/preset-env babel-loader --save-dev

@babel/core是 babel 中的核心模块，@babel/preset-env 的作用是 es6 转化 es5 插件的插件集合，而 babel-loader 是webpack和 loader 的桥梁。

const sum = (a, b) => {return a + b;};

增加 babel 的配置文件 .babelrc

{
    "presets": [["@babel/preset-env"]
    ]
}

配置 loader

module: {rules: [{ test: /\.js$/, use: "babel-loader"}]
},

现在打包已经可以成功的将 es6 语法转化成 es5 语法！

1.2 解析装饰器

npm i @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators --save-dev

"plugins": [["@babel/plugin-proposal-decorators", { "legacy": true}],
  ["@babel/plugin-proposal-class-properties",{"loose":true}]
]

legacy:true表示继续使用装饰器，loose 为 false 时会采用 Object.defineProperty 定义属性

• Plugin 会运行在 Preset 之前
• Plugin 会从第一个开始顺序执行，Preset 则是相反的

1.3 polyfill

根据 .browserslistrc 文件，转化使用到的浏览器 api

"presets": [
    ["@babel/preset-env",{
        "useBuiltIns":"usage", // 按需加载
        "corejs":2 // corejs 替代了以前的 pollyfill
    }]
]

安装 corejs

npm install core-js@2 --save

使用transform-runtime
A plugin that enables the re-use of Babel’s injected helper code to save on codesize. 可以帮我们节省代码。

npm install --save-dev @babel/plugin-transform-runtime @babel/runtime

在 .babelrc 中配置插件

"plugins": ["@babel/plugin-transform-runtime"]

1.4 添加 eslint

安装eslint

npm install eslint
npx eslint --init # 初始化配置文件

{
    test:/\.js/,
    enforce:'pre',
    use:'eslint-loader'
},

配置 eslint-loader 可以实时校验 js 文件的正确性，pre表示在所有 loader 执行前执行

2.source-map

• eval：生成代码 每个模块都被 eval 执行，每一个打包后的模块后面都增加了包含 sourceURL
• source-map：产生 map 文件
• inline：不会生成独立的 .map 文件，会以 dataURL 形式插入
• cheap：忽略打包后的列信息，不使用 loader 中的 sourcemap
• module：没有列信息，使用 loader 中的 sourcemap(没有列信息)

devtool:isDev?'cheap-module-eval-source-map':false

每个库中采用的 sourcemap 方式不一，可以根据自己的需要自行配置

3.resolve 解析

想实现使用 require 或是 import 的时候，可以尝试自动添加扩展名进行匹配

resolve: {extensions: [".js", ".jsx", ".json", ".css", ".ts", ".tsx", ".vue"]
},

4. 拷贝静态文件

有时候在打包时希望将一些静态资源文件进行拷贝，可以使用 copy-webpack-plugin 插件

安装插件

npm i copy-webpack-plugin --save-dev

使用拷贝插件

const CopyWebpackPlugin = require('copy-webpack-plugin');
new CopyWebpackPlugin([{from:path.resolve('./src/static'),to:path.resolve('./dist')},
])