Preface: This article is just a small white entry, wrong place many advice (good life peace, yao yao da)

The preparatory work

1. You need to know these things first.

Official Webpack documentation, of course.

And this thing react official documentation

And this ES6 document

Finally, you can also learn about the use of “less”

2. We can start now

Of course, you should first ensure that your Node + NPM is available for a series of things, this ape is not guaranteed.

(1) First open your black window (to show that you are a qualified programmer)

// Create a folder mkdir webpack-democdWebpack-demo // Create a NPM project without pressing enter... npm init -yCopy the code

(2) Now comes the business

// You can use NPM, CNPM,yarn... Are all broad drops, NPM install --save-dev webpack NPM install --save-dev webpack NPM install --save-dev webpack-cliCopy the code

Ok, so now that your WebPack is ready, what’s the next thing you need to do to configure it so you know where to write your own code

This is when my lazy cancer kicks in

// add webpack-demo/dist/index.html <! Doctype HTML > < HTML > <head> <title> Start </title> </head> <body> <script SRC ="main.js"></script>
    </body>
</html>
Copy the code
// Add webpack-demo/ SRC /index.js //function component() {
    const element = document.createElement('div');


    element.innerHTML = 'hello,handsome boy/beautiful girl';

    return element;
}

document.body.appendChild(component());
Copy the code
// Webpack-demo /webpack.config.js //'path');

module.exports = {
    mode: 'development', // Development or production (which model you want to choose) Entry:'./src/index.js'Output: {// export filename:'main.js',
        path: path.resolve(__dirname, 'dist')}};Copy the code

If you want to see how your hello appears, perform the following steps

// webpack-demo/package.json
scripts:{
    "build": "webpack"} // Then run NPM run build to open your HTML file in distCopy the code

You should be able to see it if it’s okay, and you’re probably thinking, I’m a little stupid to just run the command line to the browser and open the page, but don’t worry, it’s almost there

Webpack-dev-server NPM install --save-dev webpack-dev-server // webpack-demo/webpack.config.js const path = require('path');

module.exports = {
    mode: 'development', // Development or production (which model you want to choose) Entry:'./src/index.js'Output: {// export filename:'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer:{
        contentBase: './dist'}};Copy the code

One step

// webpack-demo/package.json
{
  "name": "webpack-demo"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."build": "webpack"."start": "webpack-dev-server --open"// this --open wide to help us open files directly in the browser},"keywords": []."author": ""."license": "ISC"."dependencies": {
    "clean-webpack-plugin": "^ 3.0.0"."html-webpack-plugin": "^ 3.2.0"."webpack": "^ 4.41.5"."webpack-cli": "^ 3.3.10"."webpack-dev-server": "^ 3.10.1"}}Copy the code

Let’s add some plugins to the Webpack

NPM install --save-dev html-webpack-plugin // webpack-demo/webpack.config.js const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development', // Development or production (which model you want to choose) Entry:'./src/index.js'Output: {// export filename:'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Surprise'
        })
    ],
    devServer:{
        contentBase: './dist'}};Copy the code

Of course, if you want to see what this thing is doing, you have to do it before you execute the command

// change webpack-demo/dist/index.html <! DOCTYPE html> <html> <head> <meta charset="UTF-8">
    + <title>test</title>
  </head>
  <body>
  <script type="text/javascript" src="main.js"></script></body> </ HTML > then execute NPM run build and you can see the effectCopy the code

HtmlWebpackPlugin can pay attention to other articles to understand a HtmlWebpackPlugin click here HtmlWebpackPlugin can understand, or pay attention to my subsequent articles

Note: this is not the end of the HTML problem because the files you leave behind each time you pack will be in dist

NPM install clean-webpack-plugin --save-dev // At this point your webpack-demo/webpack.config.js will look like this const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    mode: 'development', // Development or production (which model you want to choose) Entry:'./src/index.js'Output: {// export filename:'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    devServer:{
        contentBase: './dist'}};Copy the code

At this time explain a sentence, according to the official document may explode, pay attention to the writing and usage, about the reason, later have the opportunity to explain

OK! We are done with the first step and we will continue to write about adding react,less… A series of things that you might use in your development process

You can find my next article here