Introduction: Here will record Webpack4 from 0, step by step to build a complete project, and their own in the actual project by common plug-ins and encountered a write problems and solutions, the basic concept is not explained here, small white can go to the official website to view, this tutorial is all practical application.

The current content

Build a simple build system

1. Use NPM init to initialize the project and generate package.json file

2. Install the WebPack package, which is of the specified version

NPM I [email protected] [email protected] [email protected] --saveCopy the code

3. Create a file directory structure

Create a SRC directory, create modules directory under SRC, and create demo.js

Create the webpack.config.js file

const path = require('path');

// Build the environment
const NODE_ENV = process.env.NODE_ENV;
let isProduction = NODE_ENV === 'production';

module.exports = {
    entry: './src/modules/demo.js'.output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'demo.bundle.js'
    },
    mode: NODE_ENV
}
Copy the code

5. Modify the configuration of scripts in package.json

"scripts": {
    "dev": "env NODE_ENV=development node_modules/.bin/webpack-cli --config ./webpack.config.js --progress --colors"
  },
Copy the code

6. Run NPM run dev

So far, we can simply package the JS files, but in a real project, we need to package the JS files into the corresponding template page, which will be covered in the next installment

Source address link