preface

The webpack used by the team was very powerful, and sometimes the compilation failed. I always turned to the author of the tool to solve the problem, and I seldom went to investigate the cause. I felt that my knowledge of WebPack was always half-understood. So, start this article by configuring WebPack from scratch and get a taste of the configuration process. The article is too simple for anyone who has experience with WebPack.

Release notes

The version of Webpack used for this article is: 4.30.0

Begin to build

The purpose of this article was to compile ES6 using WebPack, but the process was too simple.

Install node and NPM images

  • Install the node
  • Install NPM Taobao image

Install Webpack with WebPack – CLI

To open or create a new project, use the command line to install Webpack with webpack-CLI:

$ cnpm install --save-dev webpack-cli
Copy the code

Install the compiled components for ES6

Install babel-loader using the command line:

$ cnpm install --save-dev babel-loader @babel/core @babel/preset-env webpack
Copy the code

Creating a file Directory

I created the following file directory:

webpack-es6
  |- /dist
    |- index.html
  |- /src
    |- index.js
Copy the code

Define the entry and exit points for packaging

Create a new webpack.config.js file in the project directory and configure the entry and exit of the package according to the file directory:

const path = require('path'); module.exports = { entry: './ SRC /index.js', // define entry js, Path :path.resolve(__dirname,'dist') // Output js directory}};Copy the code

Add processing rules for JS files

Add rules for handling js files to webpack.config.js:

const path = require('path');
module.exports = {
    entry: './src/index.js'.output: {filename:'index.js'.path:path.resolve(__dirname,'dist')},// The following code is newly added
    module: {rules:[
            {
                test: /\.js$/.// Matches all js files
                loader: 'babel-loader' // Use babel-loader to process js files},]}};Copy the code

Add the NPM script

Add NPM script to package.json file:

{
    / /... Omit code
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"."build": "webpack" // To add this line, use build instead of NPX
    },
    / /... Omit code
  }
Copy the code

Configuration is complete

This completes the configuration of webPack es6, where the file directory is as follows:

webpack-es6
    |- node_modules
    |- /dist
        |- index.html
    |- /src
        |- index.js
    |- package.json
    |- package-lock.json
    |- webpack.config.js
    
Copy the code

Add code

Next, let’s add code to test whether the configuration is successful.

Add code to file./ SRC /index.js:

class Class{
  constructor() {
    this.str = 'success';
  }
  appendToBody(){
    const p = document.createElement('p');
    p.innerHTML = this.str;
    document.body.appendChild(p); }}const obj = new Class();
obj.appendToBody();
Copy the code

Add code to file./dist/index.html:

</html>
<body></body>
<script src="./index.js"></script>
</html>
Copy the code

compiler

Run the command line

$ npm run build
Copy the code

Open index.html. If success is displayed, es6 compilation is complete.

conclusion

The next step is to use WebPack to compile PostCSS.

Refer to the link

Webpack Chinese website: www.webpackjs.com/

More articles

  • Check out other articles of netease Creative Department: github.com/f2e-netease…
  • Check out more of my articles: github.com/ningbonb/bl…