Webpack 加载CSS

1. 加载CSS

为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中 安装并添加 style-loader 和 css-loader：

npm install --save-dev style-loader css-loader

webpack.config.js 添加规则

const path = require('path')
module.exports = {
    //默认是 production, 打包出来文件会被压缩, 设置为 development 代码就不会被压缩
    mode: 'development',  //不设置会报警告
    entry: {
        main: './src/index.js', //入口文件
    },
    output: {
        filename: 'bundle.js', //打包文件
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test:/\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

意思是先用 css-loader 加载 css 文件，再用 style-loader 添加在页面中。

webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这种情况下，以 .css 结尾的全部文件，都将被提供给 style-loader 和 css-loader。

2. Webpack做了什么呢

参考：https://www.cnblogs.com/itrena/p/9108922.html

webpack动态的添加了内敛样式在代码中。

如果多人协作开发的情况下，会有很大可能出现代码命名重复的情况，如果出现这种情况怎么办呢？

CSS Modules对我们的类名做了哈希处理，我们再也不用担心同事跟我们有相同的命名了。