Summary of Webpack introductory configuration

preface

My configuration version number is as follows:

 "devDependencies": {
    "css-loader": "^ 3.2.0"."dart-sass": "^ 1.23.7"."file-loader": "^ 5.0.2"."html-webpack-plugin": "^ 3.2.0"."less": "^ 3.10.3"."less-loader": "^ 5.0.0"."mini-css-extract-plugin": "^ 0.8.0"."sass-loader": "^ 8.0.0." "."style-loader": "^" 1.0.1."webpack": "^ 4.41.2"."webpack-cli": "^ 3.3.10"."webpack-dev-server": "^ 3.9.0"
  },
Copy the code

Reference: the official Webpack documentation, which I will post links to when configuring each section

Configure the build in package.json

  "scripts": {
    "build": "rm -rf dist && webpack"
  },
Copy the code

Initialize the webpack. Config. Js

Mode differences:

module.exports = {
  mode: 'development'  // Developer mode Note that many comments are not compressed when looking at dist/main.js
};
Copy the code

module.exports = {
  mode: 'production'  Dist /main.js code is compressed,
};  
Copy the code

Import file and export file configuration:

var path = require('path');

module.exports = {
  mode: 'development'.// Developer mode
  entry: './src/index.js'.// Package the entry file
  output: {
    path: path.resolve(__dirname, 'dist'),  Dist file by default
       filename: 'index.[contenthash].js'  // Package the export file name with index.20 random digits/letter. Js file name}};Copy the code

The Webpack plugin automatically generates HTML:

Webpack document links: webpack.js.org/plugins/htm… And github.com/jantimon/ht…

This will generate an index.html in the dist file

npm install --save-dev html-webpack-plugin
Copy the code

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [new HtmlWebpackPlugin()]  
};
Copy the code

Configuration contents:

 plugins: [new HtmlWebpackPlugin({ 
    // You can omit the filename attribute and generate index.html by default
    / / configuration here the title to the title tags within the HTML files in the template configuration < % = htmlWebpackPlugin. Options. The title % >
    title: 'Wang-pf'.template: 'src/assets/index.html' // Which is the generated template
  })]
Copy the code

Webpack introduces CSS:

Method 1: use JS to generate style

Webpack document links: webpack.docschina.org/loaders/css…

To install dependent plug-ins, you must install style-loader.

npm install --save-dev  style-loader css-loader 
Copy the code

The idea is that webpack by default puts the.css ending in the style tag.

 module: {
    rules: [{
      test: /\.css$/i.// end with.css
      use: ["style-loader"."css-loader"].// Rely on plug-ins},],}Copy the code

Method 2: Split the CSS into files

Install dependencies first,

npm install --save-dev mini-css-extract-plugin
Copy the code

configuration

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
     new MiniCssExtractPlugin({
      // Similar to the options in webpackOptions.output
      // All options are optional
      filename: '[name].[contenthash].css'.chunkFilename: '[id].[contenthash].css'.ignoreOrder: false.// Ignore warnings about order conflicts}),].module: {
    rules: [{test: /\.css$/,
       use: [{
          loader: MiniCssExtractPlugin.loader,
          options: {
            // You can specify a specific publicPath here
            // publicPath in webPackOptions. output is used by default
            publicPath: '.. / ',}},'css-loader',],},],},};Copy the code

Use of WebPack dev-server

Webpack dev – server document links: www.webpackjs.com/guides/deve…

1. Installing a plug-in

npm install --save-dev webpack-dev-server
Copy the code

2. Webpack. Config. Js configuration

  devServer: {
  	contentBase: './dist'
  },
Copy the code

3. Configure the following start in package.json

 "start": "webpack-dev-server --open".Copy the code

Error: Cannot find module ‘webpack-cli/bin/config-yargs’ Error: Cannot find module ‘webpack-cli/bin/config-yargs’

The solution is to change the version number as follows:

"webpack": "^ 4.41.2"."webpack-cli": "^ 3.3.10"."webpack-dev-server": "^ 3.9.0"
Copy the code

Different modes use different WebPack Config

We already know that patterns have developer mode and production mode, so we should use different plug-ins in different modes.

For example, in the production mode, CSS method is introduced to use style, because in this way, a CSS file is not generated, which makes the efficiency higher. In developer mode, we need to split CSS into files.

Create a webpack configuration file: webpack.config.prod.js for use in production mode.

Create a webpack configuration file: webpack.config.base.js for common properties for development and production modes

And reconfigure the build in package.json file.

 "build": "rm -rf dist && webpack --config webpack.config.prod.js"
Copy the code

Differences between webPack Loader and Webpack Plugin

• Loader: Used to load certain files, such as JS files, which can be converted to JS supported by the lower version, or CSS, which can be loaded using the corresponding loder, which can be placed in the style tag on the page, and other processing. It can also be used to load images and to optimize images.
• Plugin (plug-in) : the extension of webpack function, such as the use of HtmlWebpackPlugin to generate HTML files, the use of miniCssExtractPlugin to generate CSS files.

The introduction of sass

Reference links: webpack.docschina.org/loaders/sas…

Use datr-sass instead of Node-sass (obsolete)

npm install sass-loader dart-sass --save-dev
Copy the code

Webpakc. Config configuration:

 rules: [{
      test: /\.scss$/i,
      use: [
        "style-loader"."css-loader",
        {
          loader: "sass-loader".options: {
            // 'dart-sass' is preferred
            implementation: require("dart-sass"),},},],},Copy the code

Change CSS file to SCSS file can be used.

The introduction of less

Document links: webpack.js.org/loaders/les…

Install the loader

npm install less less-loader --save-dev
Copy the code

  {
      test: /\.less$/,
      loader: ["style-loader"."css-loader"."less-loader"].// compiles Less to CSS
    },
Copy the code

Stylus is consistent with the introduced less method and is no longer written.

Import images using file-loader

Reference: webpack.js.org/loaders/fil…

The installation

 npm install file-loader --save-dev
Copy the code

My version number:

"file-loader": "^ 5.0.2".Copy the code

Webpack. Config configuration:

module.exports = {
  module: {
    rules: [{test: /\.(png|jpe? g|gif)$/i,
        use: [
          {
            loader: 'file-loader',},],},],},};Copy the code

Then you can import it into your HTML page.

Webpack impor() lazily loads

Not so much looking at the code

inedx.js

// index.js
const btn = document.createElement('button')
btn.innerText = 'Lazy loading'
btn.onclick = () = >{
 const promise = import('./lazy.js')
  promise.then((module) = >{
    const fn = module.default
    fn()
  },() = >{
    console.log('Lazy loading module failed to load')
  })
}

div.appendChild(btn)
Copy the code

lazy.js

export  default function lazy() {
  console.log('I'm a lazy stranger.')}Copy the code

How to use import() for lazy loading

Load the file with import(), get a promise, and call lazy.js with module.default() on success