Recommended reading

WebPack basics (a) : Everything can WebPack

WebPack Basics (2) : React project configuration

WebPack Basics (3) : Configuring ESLint

WebPack basic introduction (four) : packaging optimization to improve packaging speed

WebPack Basics (5) : Multi-environment configuration

Webpack basics (6) : multi-page packaging

preface

Front-end technology is changing with each passing day. There are a lot of frameworks emerging, including the three uI-oriented frameworks (React, Vue, Angular), and style related less and SASS. Syntax-related ES6 typescript and thousands of third-party toolkits on NPM offer new ideas and frameworks to improve development efficiency, but they all have one thing in common: they don’t run directly, they have to be transformed to work properly. WebPack does just that, converting source code into executable JavaScript HTML CSS code.

There are a lot of content about WebPack. I just pick out the ones I often use to take notes. There are five main sections:

  1. Webpack everything: Use WebPack to package common files
  2. React project: Package the React configuration
  3. Packaging Optimization 1
  4. Packaging optimization 2: Packaging optimization is divided into two sections to save packaging time.
  5. Multiple file packaging: How to configure multiple file entry

The four core

Here are my four cores:

  • Entry: Packaged entry file

  • **output: ** Output file after packaging

  • **module: ** code conversion; For example, less is converted to CSS and static resource packaging

  • Plugins: ** Complement modules, most of the features in WebPack itself use this plug-in interface. This makes WebPack more flexible.

Of course, webpack has a lot of very important content in addition to these, such as loader, mode, devTool, sourceMap and so on, other content we can cover in the surface.

Why are these four cores? Since these four contents can be used to package the various types of files we commonly see, let’s try them out:

Create a project

Before creating the project, we need to have node, NPM;

NPX is automatically installed when NPM is installed. In this project, a node_modules folder is generated. NPX is used to invoke dependencies for this project, not global dependencies.

  • NPM init initializes the project
mkdir webpack-demo
cd webpack-demo
npm init -y 
# -y indicates all defaultsNPM install --save-dev webpack webpack-cli # NPM I -d webpack webpack-cli# installation webpackCopy the code

Package. json is generated under the folder

  • Create the webpack.config.js file

Using NPX webpack will pack the files. The default package configuration is webpack.config.js. We create a SRC folder where all the files are stored.

  • Start the configuration
const path = require('path')

module.exports = {
  entry:'./src/index.js'.  output: {
 filename: '[name].js'. path: path.resolve(process.cwd(), 'dist'),  }, } Create a dist folder in your project, and pack the index files under SRC into the dist folder.# entry: Can be written as a string or as an object as followsmodule.exports = {  entry: { main:'./src/index.js'  },  output: {  filename: '[name].js'. path: path.resolve(process.cwd(), 'dist'),  }, } # output: [name] indicates the key in the entry, which in this case represents main, so the index under SRC is packaged as main, which defaults to main if the entry is a stringCopy the code
  • index.js
const element = document.createElement("div");
element.className = "custom";
element.innerText = "Hello World";

const dom = document.getElementById("root");
dom.appendChild(element)  # Can understand it allCopy the code
  • packaging

npx webpack

I created the index.html by myself, and then added main.js to the HTML

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
 <title>Document</title> </head> <body>  <div id="root"></div>  <script src="./main.js"></script> </body> </html> Copy the code
The packaged file
Pack and use

You can see that everything we wrote in JS is working

  • Using the loader

Loader is mainly used to translate code into source code that the browser can run

It’s packed with JS files so it doesn’t need to be translated. What if we use images, less, sass, font files in the project?

Therefore, loader is used. The following loader needs to be installed first

module.exports = {
  entry: './src/index.js'.  output: {
    filename: '[name].js'.    path: path.resolve(process.cwd(), 'dist'),
 }, Less loaders are read from right to left module: {  rules: [{  test: /\.css$/i. use: ['style-loader'.'css-loader'] # cs-loader reads CSS files and translates them into styles. Style-loader takes the styles into effect }, # less, read less file as CSS file, then use CSS -loader to read as style, style-loader to effect the style {  test: /\.less$/i. use: [  'style-loader'. {  loader: 'css-loader'. options: {  modules: true // style.className  }  },  'less-loader'. ]  }]  } } Copy the code
  • The use of plugins

All of the above operations package the file, then create an HTML, and import the packaged file into the HTML file. It’s a hassle, so you can use plugins to generate an HTML file every time you package and import it, without having to do it yourself.

Plugins: is an array

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
Install NPM i-d html-webpack-pluginmodule.exports = {
. plugins:[  new HtmlWebpackPlugin({  template: './index.html' // Use the current directory's index.html as the template, and each time you pack, import the packed file into the template file and pack it into dist  }),  ] } Copy the code

conclusion

This section simply said the next Webpack configuration, webpack is a drop in the sea, including the content of this section, I did not say too much, mainly configuration, more content also need to see the official documentation, this only belongs to an entry level. Welcome to the next section packaging the Configure React project.