Basic Webpack Code of Practice (Basic Package) :

As a front-end programmer, how can I not webpack, the following begins my show:Copy the code

1. Create an empty folder webpackDom
2. Init, NPM init if you don’t want to go step by step and hit enter, NPM init -y
3. Download webpack and webpack- CLI: NPM I -d webpack webpack-cli
4. Create a folder under webpackDom, bulid, and create webpack.config.js
5. Open package.json and configure the NPM run bulid command (pit, note configuration path ！！！！！)

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."bulid": "webpack --config bulid/webpack.config.js"
},
Copy the code

6. Go to webpack.config.js and start writing code

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin")     // NPM i-d html-webpack-plugin needs to be installed
const {CleanWebpackPlugin} = require('clean-webpack-plugin') // NPM i-d clean-webpack-plugin needs to be installed
function Url(test){
    return path.resolve(__dirname,test)
}
module.exports = {
    mode:'development'.// Select * from * /
    entry: [ Url('.. /src/main.js'),Url('.. /src/module1.js')].// Multi-entry file
    output: {
        filename: '[hash:8].js'.// The packaged file name
        path: path.resolve(__dirname,'.. /dist')  // The packaged directory
    },
    plugins: [// Set the processing mode of the packaged files
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,'.. /index.html') // HTML compositing template
        }),
        new CleanWebpackPlugin() // Clear the last packed data after packaging]}Copy the code

This version of the basic OK, file directory show (attached file directory for reference) :

Finally, run NPM run bulid and give it a try