webpack: 处理css文件

注意：该进阶在webpack[4]的基本上进行总结。

一、webpack为什么要处理css文件？

答：默认情况下，webpack 只识别 JSON, javasrcipt, 不认识其他文件，如果希望打包处理其他文件，需要配置对应的loader，也就是说，loader 能够让 webpack 去处理 css 文件。

二、下载loader

• 1. 下载 【css-loader】的同时也需要下载【style-loader】。
• 2. 【-D】表示只在生产模式用这个。线上不用。
• 3. css-loader： 让webpack 能够识别解析 .css 文件
• 4 .style-loader： 通过动态创建<style></style>标签的方式，让解析后的 css 内容， 作用到页面中。

cnpm i style-loader css-loader -D

三、新建 css 文件 并在 main.js 中引入

• 1. 在src文件夹下，新建立一个 css 文件夹，再在 css 文件夹下建立 一个 common.css 文件。
     如下图所示：

     
     image.png

• 2. 在common.css 中写入样式：

     
     image.png

• 3. 在main.js 中引入 common.css

     
     image.png

四、在webpck.config.js中配置 loader

1. loader需要写在module中，如下 4配置 所示：

const HtmlWebpackPlugin = require('html-webpack-plugin');   // 引入自动生成 html 的插件

// 配置webpack的配置文件，需要将配置的对象导出，给webpack使用
module.exports = {
    // 1. 打包入口，从哪个文件开始打包
    entry: './src/main.js',

    // 2. 打包的文件放在哪
    output:{
        // 打包的文件输出的目录（输出的目录必须是一个绝对路径），这里也可以写成path:path.join(_dirname, 'dist')
        path: path.join(__dirname, './dist'),
        // 打包后的文件名叫什么
        filename: 'bundle.js'
    },
    // 3. 打包的模式： production 生产模式（打包后的文件或压缩） development(开发模式，不压缩)
    mode: 'development',

    // 4. 配置module模块加载规则
    // 默认，webpack只认识JSON,javascript，不认识其他文件，如果希望打包处理其他文件，需要配置对应的loader
    module: {
        rules: [
            {
                // 正则： 匹配所有以 .css 结尾的文件
                test: /\.css$/,
                // 实际处理顺序：从右往左
                // css-loader: 让webpack能够识别解析 .css 文件
                // style-loader: 通过动态的创建 style 标签的方式[在打包好的bundle.js]，让解析后的 css 内容，能够作用到页面中
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    // 5. 插件配置
    plugins: [
        // 我们要把哪个目录下的 html 进行自动生成打包的html。
        new HtmlWebpackPlugin({template: './public/index.html'})
    ], 
}

五、执行打包脚本

cnpm run build

六、我们发现打包好的dist/index.html中样式变化 了

image.png