Webpack installation

  • NPM initialization, console input
npm init -y
Copy the code
  • Webpack installation
npm i webpack webpack-cli -D
Copy the code

New webpack. Config. Js

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

Mode: mode (optional: development, production) entry: file Output: file output (where to package)

Create SRC /index.js in the root directory

module.exports=function(){
    return 2
}
Copy the code

Package. json configuration starts

Because Webpack is not installed globally, it cannot be packaged using the webpack command. You can configure “build”:”webpack” in package.json:

{" 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"}}Copy the code

Here the simple Webpack has been configured and entered at the terminal

npm run build
Copy the code

You’ll notice that you have a dist/bundle.js file

/* * 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"); / * * * * * * * * * * * * / / /}) ();Copy the code

This is the packaged file, webpack default with common.js parsing, can be packaged directly

Loader configuration

If webpack needs to package CSS,img and other files, it needs to use loader configuration, in the module parameter configuration, the following uses several common loader configuration:

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 // Base64}}}, {test: /\.(eot|ttf|svg)$/, use: { loader: 'file-loader' } }] } }Copy the code

Loader is required to install:

npm i url-loader file-loader url-loader css-loader style-loader -D
Copy the code

HtmlWebpackPlugin plugin installation

HTML – webpack – the plugin installation

npm i html-webpack-plugin -D
Copy the code

The html-webpack-plugin can produce an index. HTML file in the dist folder and import the packaged JS file

Html-webpack-plugin configures in plugin:

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

After executing the NPM run build, you’ll notice that the dist file has an extra index.html and bundle.js

Babel’s configuration

  • Install Babel
npm install --save-dev babel-loader @babel/preset-env @babel/core
Copy the code

Configure the 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 } } ] } ... ] }...Copy the code
  • Create a.babelrc file
{
  "presets": ["@babel/preset-env"]
}

Copy the code

SRC /index.js write an ES6 syntax:

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

We can then execute NPM run build and see that const dist/bundle.js is converted to var. Although some syntaxies can be converted, promises are not converted when packaged like promises. So you need a polyfill

The use of @ Babel/polyfill

Handle similar to assign, includes, map, includes, the promise of the gasket

  • The installation
npm i @babel/polyfill -s
Copy the code
  • Babelrc configuration
{ "presets": [ [ "@babel/preset-env", { "debug": true, "useBuiltIns": "Usage "//usage: import polyfill as required, import all entries, false not import}]]}Copy the code

Babel is basically ready to convert to ES5.

The Runtime was created for developing components

The polyfill problem is fixed, but if you are developing an NPM component, you can’t use polyfill because polyfill contaminates global variables. Instead, use a plugin @babel/ plugin-transform-Runtime

  • The installation
npm install --save @babel/runtime
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime-corejs2 --save
Copy the code
  • .babelrc
{ "presets": [ [ "@babel/preset-env", { "debug": true, "useBuiltIns": "false" } ] ], "plugins": [["@babel/plugin-transform-runtime", {"corejs": 2}]],}Copy the code

Gitee address gitee.com/cat-ui