Let me start with the plugins I used

Use webpack-dev-server

1. Download webpack-dev-server,webpack, and webpack4.0 before installing Webpack-CLI. Otherwise, an error message will be displayed

    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
Copy the code

Webpack – dev – server installation

NPM install webpack-dev-server -d // Local installationCopy the code

Install webpack

NPM install webpack -d // local install NPM install webpack -g // global installCopy the code

Install webpack – cli

NPM install webpack-cli -d // Local installCopy the code

2. Create a file in the root directorywebpack.config.js, the configuration is as follows

// exports of webpack module.exports = {entry: __dirname + '/ SRC /main.js', // import file output: {// export file publicPath: '/dist',// must add publicPath path: __dirname + './dist', filename: 'bundle.js'}, devServer: {host: 'localhost', // access address port: '8080', // access port open: true, // automatic pull browser hot: true // hot loading}, module: {rules: [{test: / \. CSS $/, use: [' style - loader ', 'CSS - loader]}}], plugins: [new webpack. HotModuleReplacementPlugin () / / hot update plugins]}Copy the code

To update the CSS file, use loader to convert it

You need to download CSS-loader and style-loader

npm install css-loader style-loader
Copy the code

I configured it in the Module

module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    },
Copy the code

3. Configure it in package.json

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack --mode development",
        "start": "webpack-dev-server"
    },
Copy the code

4. Run

npm run start
Copy the code

Finally, talk about the pit I met!!

I downloaded webpack, webpack-CLI, webpack-dev-serve not compatible!!

Went to the Internet to check the reason for a long time, the original is compatible problem

Later I changed the versions of Webpack, webpack-CLI, and webpack-dev-server and they ran successfully

If you see this screen, you’ve succeeded

Be sure to pay attention to compatibility