4.webpack处理html

最新推荐文章于 2024-09-23 09:50:24 发布

原创最新推荐文章于 2024-09-23 09:50:24 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #html in webpack

webpack 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用html-webpack-plugin和clean-webpack-plugin优化Webpack配置，实现HTML文件的压缩与自动引入打包后的JS和CSS，同时确保每次打包仅保留最新结果。通过MiniCssExtractPlugin分离CSS，结合less-loader、css-loader和postcss-loader进行样式处理。

html-webpack-plugin：打包压缩html，并自动引入本次打包的js、css文件等

clean-webpack-plugin：只保存本次打包的结果

安装 cnpm install html-webpack-plugin clean-webpack-plugin -D

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        indent: 'postcss',
                        plugins: [
                            require('postcss-cssnext')(),
                            require('cssnano')()
                        ]
                    }
                } ,'less-loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[hash:5].css'
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html', //模板
            minify: {
                removeComments: true ,  //清理注释
                collapseWhitespace: true, //清理空格
            }
        }),
        new CleanWebpackPlugin()
    ],
    mode: 'development'
}