webpack4笔记

多页面配置

let path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
 
module.exports = {
    mode:"development",
    entry:{
       index:"./src/index.js",
       create1:"./src/js/create1.js",
    },
    devServer:{
        open:true,
        port:3001

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

    },
    module:{
       rules:[
           {
               test:/\.css$/,use:['style-loader','css-loader']
           },
           
           {
            test: /\.(jpg|png|gif)$/,
            use:[{
               loader: 'file-loader',
               options:{
                   name:"[name].[ext]",
                   outputPath:"imgs/"
               }
            }]
           

           },
           {
            test: /\.html$/,
            // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
            loader: 'html-loader'
          }

       ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html',
            chunks:['index']
        }),
        new HtmlWebpackPlugin({
            template:'./src/create1.html',
            filename:"create1.html",
            chunks:['create1']
        }),

    ]
    
}

将css文件单独打包出来，使用mini-css-extract-plugin，但是css会重复

let path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
module.exports = {
    mode:"development",
    entry:{
       index:"./src/index.js",
       create1:"./src/js/create1.js",
    },
    devServer:{
        open:true,
        port:3001

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

    },
    module:{
       rules:[
        {
            test: /\.css$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        // you can specify a publicPath here
                        // by default it use publicPath in webpackOptions.output
                        publicPath: '../'
                    }
                },
                // "style-loader",
                "css-loader"
            ]
        },
        //    {
        //        test:/\.css$/,use:['style-loader','css-loader']
        //    },
           
           {
            test: /\.(jpg|png|gif)$/,
            use:[{
               loader: 'file-loader',
               options:{
                   name:"[name].[ext]",
                   outputPath:"imgs/"
               }
            }]
           

           },
           {
            test: /\.html$/,
            // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
            loader: 'html-loader'
          }

       ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html',
            chunks:['index']
        }),
        new HtmlWebpackPlugin({
            template:'./src/create1.html',
            filename:"create1.html",
            chunks:['create1']
        }),
        new MiniCssExtractPlugin({
            filename: "css/[name].css",
            chunkFilename: "[id].css"
        })

    ]
    
}

打包出来会出现css重复打包