4.webpack处理html

最新推荐文章于 2024-03-29 22:41:53 发布

QHQLemon

最新推荐文章于 2024-03-29 22:41:53 发布

阅读量206

点赞数

分类专栏： webpack 文章标签： webpack html in webpack

本文链接：https://blog.csdn.net/weixin_38022998/article/details/103662489

版权

webpack 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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'
}