04- webpack打包css资源_npm在打包dev环境时,css变成了内联-CSDN博客

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

下载两个loader插件
npm i css-loader style-loader -D

css-loader 的作用是处理css中的 @import 和 url 这样的外部资源
style-loader 的作用是把样式插入到 DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的 innerHTML里，就是内联样式
如果rules只用一个loader, 就use:[] 写成loader: “css-loader”

使用插件

const {resolve} = require("path")   //从path中接收resolve方法
const htmlWebpackPlugin = require("html-webpack-plugin")      //引入html打包插件
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: ["style-loader","css-loader"]  
            // use数组中loader执行顺序：从右到左，从下到上 依次执行
            //style-loader 创建style标签，将js中的样式资源插入进行，添加到head中生效
            //css-loader 将css文件变成commonjs模块加载js中，里面内容是样式字符串
        }]
    },
    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

            }
        }),
        new htmlWebpackPlugin({              //引用插件
            template: "./src/chart.html",           //index.html不用加script，也可以自动引入js文件
            filename: "chart.html",           //输出的打包的文件名
            chunks: ['cart','vendor']
        })
    ]
}

body {
    margin: 0;
    padding: 0;
}
p {
    color: red;
    font-size: 25px;
}
h1 {
    color: blue;
    font-size: 88px;
}
.box {
    width: 100px;
    height: 150px;
    background-color: bisque;
    color: blueviolet;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>商城首页~~~~~~</h1>
<p>打包css</p>
<div class="box">
    this is a box1
</div>
<div class="box2">
    this is a box2
</div>
<div class="box3">
    this is a box3
</div>
</body>
</html>

index.js

//引入css文件（commonjs）
require("../css/style.css")
//也可以使用ES6的模块引入
//import "../css/style.css"
console.log("首页专用js文件");

执行webpack

css以内联样式插入到html文件里