webpack从零开始

摘要：一基础配置项目安装安装并新建文件，并初始化文件入口出口配置插件安装配置用来解析文件转译成浏览器可以识别的文件。以形式在页面中插入代码加载文件是否开启代码压缩。

mkdir react-webpack-demo
cd react-webpack-demo
mkdir src
mkdir dist
npm init -y

安装webpack,并新建webpack.js文件，并初始化文件

yarn add webpack  webpack-cli webpack-dev-server -D
mkdir config
touch config/webpack.common.js

module.exports = {
   
    entry: ["./src/index.js"],//入口
    output: { //出口
        path: paths.appBuild
    },
    module: {}, //配置 loader
    plugins: [], //插件
};

yarn add react react-dom

loaders
loader 用来解析文件转译成浏览器可以识别的文件。如.less、.jsx等这些文件浏览器是不能正常转译的，loaders的作用就是充当着"翻译"的作用。

babel 输入源码 => 输出编译后的代码，总共分为三个阶段：解析，转换，生成。
babel 本身不具有任何转化功能，它把转化的功能都分解到一个个 plugin 里面。因此当我们不配置任何插件时，经过 babel 的代码和输入是相同的。
插件总共分为两种:语法插件（Babel 解析（parse） 特定类型的语法，转换插件会自动启用语法插件）,转换插件(例如：箭头函数 (a) => a 就会转化为 function (a) {return a})

预设（Presets）
preset 可以作为 Babel 插件的组合；
Preset 是逆序排列的（从后往前）
@babel/preset-react就是一个官方 Preset

@babel/polyfill
1.babel 默认只转换 js 语法，而不转换新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。
2.babel-polyfill 会污染全局变量，给很多类的原型链上都作了修改，如果我们开发的也是一个类库供 其他开发者使用，这种情况就会变得非常不可控。
3.类库开发，通常我们会倾向于使用 babel-plugin-transform-runtime
4.@babel/preset-env 获取您指定的任何目标环境,,按需转码,引入相应的插件，默认使用browserslist

@babel/core-babel  核心模块    
@babel/preset-env  编译ES6等 
@babel/preset-react  转换JSX
@babel/preset-react  转换JSX
@babel/plugin-transform-runtime 避免 polyfill 污染全局变量，减小打包体积
@babel/polyfill  ES6 内置方法和函数转化垫片



   

配置

     {
    test: /.(js|jsx)$/,
    include: paths.appSrc,
    use: [
        {
            loader: "babel-loader",
            options: {
                presets: ["@babel/preset-react"],
                plugins: [
                    // 按需加载lodash
                    "lodash",
                    // babel-plugin-import
                    // true是less， 可以写"css" 如果不用less
                    ["import", { libraryName: "antd", libraryDirectory: "es", style: "less" }],
                    [
                        "@babel/plugin-transform-runtime",
                        {
                            absoluteRuntime: false,
                            corejs: false,
                            helpers: false,
                            regenerator: true, // generator不会污染全局的
                            useESModules: false, // 转换将使用无法运行的帮助程序
                        },
                    ],
                    // "@babel/plugin-syntax-dynamic-import"
                ],
                cacheDirectory: true,
                cacheCompression: isEnvProduction,
                compact: isEnvProduction,
            },
        },
    ],
}

Polyfill是一个js库，主要抚平不同浏览器之间对js实现的差异。根据浏览器不同的UA按需加载polyfill,国内浏览器支持不好。