Actual combat of webpack construction project

npm i -D webpack webpack-cli

webpack can actually run without configuring scripts
File structure:

package.json

Add the webpack.config.js file

const path = require('path'); module.exports ={ mode: 'development', entry: path.resolve(__dirname,"../src/main.js"), //Absolute path of entry file output: { filename: '[name].[hash:8].js', //After packaging, the file name and hash value make the file name different each time path: path.resolve(__dirname,'../dist') //Packaged directory } }

Modify command

Install HTML webpack plugin

npm i -D html-webpack-plugin

Introducing and adding plug-ins

const HtmlWebpackPlugin = require('html-webpack-plugin'); ... pulgins:[ new HtmlWebpackPlugin({ template:path.resolve(__dirname,'../public/index.html') }) ] }

After build, you will find that the index.html file in the dist folder automatically introduces the packaged js file

• Multi entry file development

  Generate multiple HtmlWebpackPlugin instances and declare the chunks array. Multiple html files can be generated under dist

  plugins:[ new HtmlWebpackPlugin({ template:path.resolve(__dirname,'../public/index.html'), filename:'index.html', chunks:['main'] // Module name corresponding to the entry file }), new HtmlWebpackPlugin({ template:path.resolve(__dirname,'../public/header.html'), filename:'header.html', chunks:['header'] // Module name corresponding to the entry file }), ]

• clean-webpack-plugin

  Install and introduce the clean webpack plugin plug-in. After the instance, you can clear the files generated by the last package

  const = require('clean-webpack-plugin') module.exports = { plugins:[new CleanWebpackPlugin()] }

Install two loader s to handle. css files and. scss files

npm i -D style-loader css-loader sass sass-loader

Following the principle of right to left parsing, the process is as follows:
The SCSS source code is converted into CSS code through sass loader, and then the CSS code is handed over to CSS loader for processing.
CSS loader will find the import statements such as @ import and url() in CSS code and tell Webpack to rely on these resources. It also supports CSS Modules, compression CSS and other functions. After processing, submit the results to the style loader for processing.
The style loader will convert the CSS code into a string and inject it into the JavaScript code to add style to the DOM through JavaScript. If you want to extract CSS code into a separate file instead of mixing it with JavaScript, you can use the ExtractTextPlugin described in Plugin 1-5.

module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"], // Right to left parsing principle }, { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"], // Right to left parsing principle }, ], },

Open the packaged index.html file and find that the style files have been loaded successfully

• Add browser prefix to css file

  Complement the browser CSS3 prefix and be compatible with all browsers

  npm i -D postcss-loader autoprefixer

  There are two ways to use this:
  The first one can be written directly in webpack.cofig.js

  rules:[{ test:/\.less$/, use:['style-loader','css-loader',{ loader:'postcss-loader', options:{ plugins:[require('autoprefixer')] } },'less-loader'] // Right to left parsing principle }]

  However, the new version of postcss loader no longer supports the first writing method

  The second is to declare postcss loader in the webpack, create a postcss.config.js file in the root directory, and reference the autoprefixer plug-in,

  { test: /\.scss$/, use: ["style-loader", "css-loader", 'postcss-loader',"sass-loader"], // Right to left parsing principle },

  module.exports = { plugins: [require('autoprefixer')] // Just reference the plug-in }

• Split css

  CSS is extracted into a separate file, a CSS file is created for each JS file containing CSS, and the on-demand loading of CSS and SourceMaps is supported.

  npm i -D mini-css-extract-plugin

  
  

• Split multiple css

  //bash npm i -D extract-text-webpack-plugin@next // webpack.config.js const path = require('path'); const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin') let indexLess = new ExtractTextWebpackPlugin('index.sass'); let indexCss = new ExtractTextWebpackPlugin('index.css'); module.exports = { module:{ rules:[ { test:/\.css$/, use: indexCss.extract({ use: ['css-loader'] }) }, { test:/\.scss$/, use: indexLess.extract({ use: ['css-loader','sass-loader'] }) } ] }, plugins:[ indexLess, indexCss ] }

File loader moves the file to the output directory after some processing (mainly processing the file name and path, parsing the file url)
URL loader is generally used in combination with file loader. Its function is similar to that of file loader. If the file size is less than the limit, base64 encoding will be returned

{ test: /\.(jpe?g|png|gif)$/i, //Picture file use: [ { loader: "url-loader", options: { limit: 10240, fallback: { loader: "file-loader", options: { name: "img/[name].[hash:8].[ext]", }, }, }, }, ], }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, //Media files use: [ { loader: "url-loader", options: { limit: 10240, fallback: { loader: "file-loader", options: { name: "media/[name].[hash:8].[ext]", }, }, }, }, ], }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, // typeface use: [ { loader: "url-loader", options: { limit: 10240, fallback: { loader: "file-loader", options: { name: "fonts/[name].[hash:8].[ext]", }, }, }, }, ], },

babel can convert ES6/7/8 syntax into ES5 syntax. Of course, babel can also configure asking price. babekrc independently

npm i -D babel-loader @babel/preset-env @babel/core

However, babel cannot convert new API s (promise, Generator, Set, Maps, Proxy, etc.), and babel Polyfill needs to be installed

npm i @babel/polyfill

Add in rules

{ test: /\.js$/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"], }, }, exclude: /node_modules/, //For node_ Files in modules are not converted },

Entry array change configuration

entry: ["@babel/polyfill", path.resolve(__dirname, "../src/main.js")], //Absolute path of entry file

Final profile:

package.json

{ "name": "myWebpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack --config build/webpack.config.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.16.0", "@babel/preset-env": "^7.16.0", "autoprefixer": "^10.4.0", "babel-loader": "^8.2.3", "clean-webpack-plugin": "^4.0.0", "css-loader": "^6.5.0", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.5.0", "mini-css-extract-plugin": "^2.4.3", "postcss-loader": "^6.2.0", "sass": "^1.43.4", "sass-loader": "^12.3.0", "style-loader": "^3.3.1", "url-loader": "^4.1.1", "webpack": "^5.61.0", "webpack-cli": "^4.9.1" }, "dependencies": { "@babel/polyfill": "^7.12.1" } }

webpack.config.js

const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { mode: "development", entry: ["@babel/polyfill", path.resolve(__dirname, "../src/main.js")], //Absolute path of entry file output: { filename: "[name].[hash:8].js", //Packaged file name path: path.resolve(__dirname, "../dist"), //Packaged directory }, module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"], // Right to left parsing principle }, { test: /\.scss$/, use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"], // Right to left parsing principle }, { test: /\.(jpe?g|png|gif)$/i, //Picture file use: [ { loader: "url-loader", options: { limit: 10240, fallback: { loader: "file-loader", options: { name: "img/[name].[hash:8].[ext]", }, }, }, }, ], }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, //Media files use: [ { loader: "url-loader", options: { limit: 10240, fallback: { loader: "file-loader", options: { name: "media/[name].[hash:8].[ext]", }, }, }, }, ], }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, // typeface use: [ { loader: "url-loader", options: { limit: 10240, fallback: { loader: "file-loader", options: { name: "fonts/[name].[hash:8].[ext]", }, }, }, }, ], }, { test: /\.js$/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"], }, }, exclude: /node_modules/, //For node_ Files in modules are not converted }, ], }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, "../public/index.html"), }), new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: "[name].[hash].css", chunkFilename: "[id].css", }), ], };

31 October 2021, 13:35 | Views: 9163