Webpack 3.8.0 getting started to configuration (go to his pit)

1. Pay attention to the webpack version

2. Initialization project

yarn init

3. Import loader

The installation command is not mentioned here. The installed loader is as follows.

4. Establish project structure (multi page application)


Note that there is no path problem after packaging. First, the directory structure of the file should be consistent with that of src. So be careful when configuring the packaged path in webpack.config.js.
Attach a directory structure article explaining multi page application Hyperlink

5. webpack.config.js configuration

In each directory, I create some new files for testing

//webpack.config.js configuration
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
    //Relative path available for entry file location
    entry: {
        index:'./src/js/index.js',
        comment:'./src/js/comment.js'
    },
    //Configure exit file location, only absolute path can be used
    output: {
        path: path.resolve(__dirname,'./dist'),
        filename: "js/[name].js",
    },
    module: {
        rules: [
            {
                test:/\.css$/,
                use: ['style-loader','css-loader']
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath:'/images/',//Specify output picture location
                        publicPath:'../images',//Specify the path of the packaged css file to reference the picture
                    }
                }]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/views/index.html',//Define the template file location to read
            filename:'views/index.html',//Define the location of the generated template
            chunks:['index'],
        }),
        new HtmlWebpackPlugin({
            template:'./src/views/comment.html',//Define the template file location to read
            filename:'views/comment.html',//Define the location of the generated template
            chunks:['comment'],
        }),
    ]
}

6. The command line input webpack can be packaged.

Tags: Webpack

Posted on Thu, 02 Apr 2020 08:15:01 -0700 by paqman