Our goals for this practice are:

Build a front-end automation engineering project using WebpackCopy the code

The functionality of the project needs to have the following functions

Automatic packaging 2. Automatic compression 3. Hot update 4Copy the code

Directory structure:

-demo
    -dist
    -build
        -webpack.base.config.js
        -webpack.dev.config.js
        -webpack.prod.config.js
    -src
        -html
        -js
        -css
        -images
    -package.json
Copy the code

(Using ES6 syntax and using SCSS for precompilation)

The Begin:

Under the new file, open the terminal in the folder and initialize the project

npm init
Copy the code

If you press Enter, the root directory of the folder will generate a package.json file

Install Webpack locally (globally installed by default)

npm i webpack webpack-cli webpack-dev-server webpack-merge  
Copy the code

Create the above three JS files in the build folder

// Install loader NPM I node-sass sass-loader CSs-loader babel-loader url-loader // Install HTML template plug-in and separated compressed CSS plug-in NPM I mini-css-extract-plugin html-webpack-pluginCopy the code

webpack.base.config.js

const MiniCssPlugin = require('mini-css-extract-plugin');

const htmlPlugin = require('html-webpack-plugin');

const path = require('path'); Module.exports = {// entry: {index: path.resolve(__dirname,)'.. /src/js/entry.js')
    },

    output: {
        publicPath: ' ',
        path: path.resolve(__dirname, '.. /dist'),
        filename: 'js/[name].[hash:8].js' 
    },

    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/i,
                use: [
                // Creates `style` nodes from JS strings
                {
                    loader: MiniCssPlugin.loader,
                    options: {
                        publicPath: '/'
                    }
                },
                // Translates CSS into CommonJS
                'css-loader',
                // Compiles Sass to CSS
                'sass-loader',]}, {test: /\.m? js$/, exclude: /node_modules/, use: { loader:'babel-loader',
                  options: {
                    presets: ['@babel/preset-env'}}}, // Handle static files {test: /\.(jpeg|jpg|png|gif|woff|ttf)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: 'images/[name].[ext]',
                    },
                  },
                ],
            },
        ]
    },

    plugins: [
        new htmlPlugin({
            template: path.resolve(__dirname, '.. /src/html/index.html'),
        }),

        new MiniCssPlugin({
            filename: 'css/[name].[hash:8].css',
            chunkFilename: 'css/index.[hash:8].css'}})]Copy the code

webpack.dev.config.js

const config = require('./webpack.base.config.js');

const merge = require('webpack-merge');

const webpack = require('webpack');

module.exports = merge(config, {
    mode: 'development',
    devtool: "#@inline-source-map",
    devServer: {
        port: '6688',
        contentBase: '.. /dist',
        hot: true,
        compress: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ]
})
Copy the code

webpack.prod.config.js

const config = require('./webpack.base.config');

const merge = require('webpack-merge');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = merge(config, {
    mode: 'production',

    plugins: [
        new CleanWebpackPlugin()
    ]
})
Copy the code

After the above files are configured, create a file with the corresponding name in the corresponding folder, open the package.json file in the root directory, and configure the two properties under scripts

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

// Start project NPM run dev // Package project NPM run buildCopy the code

After completion, you can enter the above command to run the project. If an error occurs, please check in detail whether there is any problem with your configuration. The file name can be rewritten according to your personal habits

Above, a simple automated front-end project is completed ️😸