06-webpack提取CSS为单独文件

最新推荐文章于 2024-07-21 08:57:04 发布

CaRuJan

最新推荐文章于 2024-07-21 08:57:04 发布

阅读量268

点赞数

分类专栏：学习文章标签： webpack

本文链接：https://blog.csdn.net/qq_33290233/article/details/115374403

版权

学习专栏收录该内容

37 篇文章 1 订阅

订阅专栏

css内容是打包在js文件中的，可以使用”mini-css-extract-plugin”插件提取成单独的CSS文件。

下载插件
npm i mini-css-extract-plugin -D
在webpack.config.js 中引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
在plugins模块中使用插件

module: {                  //css打包规则
        rules: [{
            test: /\.css$/,        //把项目中所有以.css结尾的文件打包,插入到html里
            use: [MiniCssExtractPlugin.loader,"css-loader"]  //css兼容loader，单独的css文件
        }, {
            test: /\.less$/,
            use: ["style-loader","css-loader","less-loader"]   //从右到左,内联样式
        },{
            test: /\.scss$/,
            use: ["style-loader","css-loader","sass-loader"]
        }]
    },
//打包成单独的css文件
plugins: [
        //打包成单独的css文件
        new MiniCssExtractPlugin({
        //通过参数 filename重新命名提职的css文件名
            filename: "./css/demo.css"
        })
    ]

webpack.config.js

const {resolve} = require("path")   //从path中接收resolve方法
const htmlWebpackPlugin = require("html-webpack-plugin")      //引入html打包插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin")         //提取成单独的CSS文件的插件
module.exports={
    entry: {
        vendor: ["./src/js/jq.js","./src/js/common.js"],
        index: "./src/js/index.js",
        cart: "./src/js/chart.js"
    },
    output: {
        path: resolve(__dirname, "./build"),    //输出路径
        filename: "[name].js"    //输出文件名
    },
    mode: "development",       //webpack使用相应的模式配置
    module: {                  //css打包规则
        rules: [{
            test: /\.css$/,        //把项目中所有以.css结尾的文件打包,插入到html里
            use: [MiniCssExtractPlugin.loader,"css-loader"]  //css兼容loader，单独的css文件
        }, {
            test: /\.less$/,
            use: ["style-loader","css-loader","less-loader"]   //从右到左,内联样式
        },{
            test: /\.scss$/,
            use: ["style-loader","css-loader","sass-loader"]
        }]
    },
    plugins: [
        //默认创建一个空的html，目的就是自动引入打包的资源js/css
        new htmlWebpackPlugin({              //引用插件
            template: "./src/index.html",           //index.html不用加script，也可以自动引入js文件
            filename: "index.html",           //输出的打包的文件名
            chunks: ['index','vendor'],
            // 压缩html代码
            minify: {
                //移除空格
                collapseWhitespace: true,
                //移除注释
                removeComments: true

            }
        }),
        //打包成单独的css文件
        new MiniCssExtractPlugin({
        //通过参数 filename重新命名提职的css文件名
            filename: "./css/demo.css"
        })
    ]
}