webpack打包css中的img和页面中的img

安装

• npm install css-minimizer-webpack-plugin mini-css-extract-plugin html-webpack-plugin --save-dev
• npm install html-withimg-loader --save-dev (注：html中的img打包)
• npm install style-loader css-loader --save-dev

目录结构 package.json目录

完整代码在下面

const path = require("path")
// 压缩css
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
// 打包css
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 打包html
var htmlWebpackPlugin=require("html-webpack-plugin")

module.exports = {
    module: "development",
    entry: {
        index: ['./src/js/index.js']
    },
    output: {
        path: path.resolve(__dirname, "./dist/"),
        filename: "js/[name].js"
    },
    module: {
        rules: [
            {
                test: /\.(htm|html)$/i,
                use: [
                  'html-withimg-loader'   // npm install html-withimg-loader --save-dev   安装
                ]
            },          
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader'],
                
            },
            {
                test:/\.(png|jpg|gif|jpeg|svg)$/,
                use:[
                    {
                        loader: "url-loader",
                        options: {
                            esModule: false,  //file-loader和 html-withimg-loader 冲突了 设为false即可
                            name: "img/[name].[hash:5].[ext]",
                            limit: 1024, // size <= 1kib
                            publicPath: "../"
                        }
                    }
                ]
            }
        ]
    },
    optimization: {
        minimize: true,
        minimizer: [new CssMinimizerPlugin()],
      },
    plugins: [
        // 打包html
        new htmlWebpackPlugin({
            template:"./index.html",
            filename:path.resolve(__dirname,"./dist/index.html")
        }),
        //可以打包在一个文件夹内
        new MiniCssExtractPlugin({
            filename:"css/[name].css"
        }),
    ],
}

总结

• dist是打包之后的！！！
• webpack4需要mini-css-extract-plugin来分开打包css文件，不能用extract-text-webpack-plugin 不支持了- webpack4
• 这样打包css 如果有多个css文件会打包成一个文件
• 如果图片太小的话会转成base64 不会再img文件中显示 limit 可以设置图片大小