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