关于前端:webpack-的安装配置以及-babel-的配置

npm 初始化, 控制台输出

npm init -y

webpack 装置

npm i webpack webpack-cli -D

const path = require('path')
module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,"dist")
    }
}

mode: 模式（可选：development，production）
entry: 入口文件
output: 打包输入文件（既打包到哪里）

在根目录新建 src/index.js

module.exports=function(){return 2}

因为 webpack 不是全局装置的，所以不能应用 webpack 命令进行打包。能够在 package.json 中配置 ”build”:”webpack”：

{
  "name": "webpackBabel",
  "version": "1.0.0",
  "description": "","main":"index.js","scripts": {"build":"webpack"},"keywords": [],"author":"",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.59.1",
    "webpack-cli": "^4.9.1"
  }
}

到这里简略的 webpack 曾经配置实现，在终端输出

npm run build

此时你就会发现多了个 dist/bundle.js 文件

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/******/     var __webpack_modules__ = ({

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/***/ ((module) => {eval("module.exports=function(){\r\n    return 2\r\n}\n\n//# sourceURL=webpack://webpackBabel/./src/index.js?");

/***/ })

/******/     });
/************************************************************************/
/******/     // The module cache
/******/     var __webpack_module_cache__ = {};
/******/
/******/     // The require function
/******/     function __webpack_require__(moduleId) {
/******/         // Check if module is in cache
/******/         var cachedModule = __webpack_module_cache__[moduleId];
/******/         if (cachedModule !== undefined) {
/******/             return cachedModule.exports;
/******/         }
/******/         // Create a new module (and put it into the cache)
/******/         var module = __webpack_module_cache__[moduleId] = {
/******/             // no module.id needed
/******/             // no module.loaded needed
/******/             exports: {}
/******/         };
/******/
/******/         // Execute the module function
/******/         __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }
/******/
/************************************************************************/
/******/
/******/     // startup
/******/     // Load entry module and return exports
/******/     // This entry module is referenced by other modules so it can't be inlined
/******/     var __webpack_exports__ = __webpack_require__("./src/index.js");
/******/
/******/ })()
;

这就是打包后的文件，webpack 默认自带 common.js 解析，能够间接打包

webpack 如果须要打包 css,img 等文件时候是须要借助 loader 配置，在 module 参数进行配置，以下用了几个罕用 loader 配置：

const path = require('path')
module.exports = {
    mode: "development",
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [// [style-loader](/loaders/style-loader)
                {loader: 'style-loader'},
                // [css-loader](/loaders/css-loader)
                {
                    loader: 'css-loader',
                    options: {modules: true}
                }
            ]
        }, {test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: {name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 10240 // 如果图片大小小于 10240 则采纳 base64
                }
            }
        }, {test: /\.(eot|ttf|svg)$/,
            use: {loader: 'file-loader'}
        }]
    }
}

loader 是须要进行装置的:

npm i url-loader file-loader url-loader css-loader style-loader -D

装置 html-webpack-plugin

npm i html-webpack-plugin -D

html-webpack-plugin 插件能够在 dist 文件夹下生产一个 index.html 文件并且引入打包后的 js 文件

html-webpack-plugin 配置在 plugin 中：

...
const HtmlWebpackPlugin = require("html-webpack-plugin")
...
plugins: [new HtmlWebpackPlugin()
    ]

执行 npm run build 后会发现 dist 文件下多了个 index.html 并且引入了 bundle.js

装置 babel

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

配置 babel-loader：

module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,// 不转换的文件
                use: [{loader: 'babel-loader'}]
            },
            {
            test: /\.css$/,
            use: [// [style-loader](/loaders/style-loader)
                {loader: 'style-loader'},
                // [css-loader](/loaders/css-loader)
                {
                    loader: 'css-loader',
                    options: {modules: true}
                }
            ]
        }
        ...
        ]
    }
    ...

新建.babelrc 文件

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

src/index.js 写一个 es6 语法：

module.exports=function(){
    const a = 1
    return a
}

而后执行 npm run build , 就会发现 dist/bundle.js 里的 const 被转换成了 var，尽管有些语法能够进行转换，然而遇到如 promise 打包过后 promise 并不会被转换，所以此时就须要垫片（polyfill）

解决相似 assign,includes,map,includes,promise 的垫片

装置

npm i @babel/polyfill -s

babelrc 配置

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "debug": true,
        "useBuiltIns": "usage"//usage 示意按需引入 polyfill，entry 全副引入，false 不引入
      }
    ]
  ]
}

到这 babel 根本能够实现到 es5 的转换了。

polyfill 问题是曾经解决了, 然而如果你是开发一个 npm 组件，此时就不能用 polyfill 了，因为 polyfill 会净化全局变量，这时候就要用到一个插件 @babel/plugin-transform-runtime

装置

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

.babelrc

{
  "presets": [
      [
          "@babel/preset-env",
          {
              "debug": true,
              "useBuiltIns": "false"
          }
      ]
  ],
  "plugins": [
      [
          "@babel/plugin-transform-runtime",
          {"corejs": 2 // 参考官网文档}
      ]
  ],
}

gitee 地址 https://gitee.com/cat-ui

关于前端:webpack-的安装配置以及-babel-的配置

webpack 装置

新建 webpack.config.js

package.json 配置启动

loader 配置

HtmlWebpackPlugin 插件的装置

babel 的配置

@babel/polyfill 的应用

runtime 为开发组件而生