webpack入门demo（二）打包css

模块开发，在我看来就是把一个文件模块的数据拿出来，另一个文件接收这个数据，就是特么不写在一起……对小项目来说，有点多此一举的感觉

commonJs规范让js也可以写后端，连数据库，写接口

require

exports

导入导出定义模块

讲这个好像跟webpack没什么关系……如果写过node项目的话应该可以理解

 

如何导入CSS样式模块：

cd到course-webpack文件夹

cnpm i css-loader -D

cnpm i style-loader -D

在同级文件夹写个style.css

在entry.js的最后加一个require样式文件

console.log("这是入口");
var msg="今天真开心";
document.getElementById("app").innerHTML+=msg

//在最后加这个require

require("./style.css")

创建一个webpack.config.js文件

module.exports={
    entry:"./entry.js",
    output:{
        filename:"bundle.js",
        path:__dirname,
    },
    module:{
        rules:[ //匹配规则
            {test:/\.css$/,loader:'style-loader!css-loader'}
        ]
    }
}

webpack entry.js bundle.js  再次打包

运行index.html  就会发现你的style.css生效啦！