webpack: 分离css文件

注意：本进阶在webpack进阶【5】的基础上进行总结。

一、为什么要分离出css文件，举例如下：

• 1. 我们在src/css/ 新建一个index.css 文件

     
     image.png

• 2. 在main.js中引入src/css/ index.css

     
     image.png
• 3. 现在执行打包脚本

npm run build

• 4. 我们发现打包后的dist中有两个文件，一个bundle.js，另一个是index.html。其中我们的src/css下的 index.css 和common.css都在bundle.js中

     
     image.png

• 5. dist/index.html 在网页中打开，发现head中有两个<style></style>标签。

     
     image.png

二、 综上所述：我们没有经过分离的 css 文件是打包后在 bundle.js 中的。并且在 head 标签下是有多个style 标签。这样明显是增加了打包后的 js 的压力，并且多个 style 标签也是不合理的。所以我们需要把 css 文件和 js 文件单独分离出来。webapck 中的【mini-css-extract-plugin】插件可以帮助我们把 【css文件分离】出来。

三、下载分离css文件的插件【mini-css-extract-plugin】

以下的操作以上面的例子为基础。

cnpm i mini-css-extract-plugin

四、在webpack.config.js中引入插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')    // 引入分享 css 的插件

五、在webpack.config.js中的module中进行配置

module: {
 rules: [
      {
       // 正则： 匹配所有以 .css 结尾的文件
       test: /\.css$/,
       // 实际处理顺序：从右往左
      // css-loader: 让webpack能够识别解析 .css 文件
      // style-loader: 通过动态的创建 style 标签的方式（在打包好的bundle.js中），让解析后的 css 内容，能够作用到页面中
     use: [
        {
             loader: MiniCssExtractPlugin.loader,
              options: {
                  publicPath: '../'
              }
        },
       'css-loader'
    ]
  }
 ]

六、在webpack.config.js中初始化这个插件

// 5. 插件配置
    plugins: [
        // 我们要把哪个目录下的 html 进行自动生成。
        new HtmlWebpackPlugin({template: './public/index.html'}),
        // 打包并分离出来的css叫什么名字，并在dist中的路径及路径名
        new MiniCssExtractPlugin({
            filename: 'css/index.css'
        })
    ], 

七、webpack.config.js中完整代码如下

const path = require('path');                                       // 引入path模块
const HtmlWebpackPlugin = require('html-webpack-plugin');           // 引入自动生成 html 的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')    // 引入分享 css 的插件
// 配置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: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ]
            }
        ]
    },
    // 5. 插件配置
    plugins: [
        // 我们要把哪个目录下的 html 进行自动生成。
        new HtmlWebpackPlugin({template: './public/index.html'}),
        // 打包并分离出来的css叫什么名字，并在dist中的路径及路径名
        new MiniCssExtractPlugin({
            filename: 'css/index.css'
        })
    ], 
}

八、执行打包脚本

cnpm run build

九、打包后的dist文件夹下多了一个单独的css/index.css文件夹

image.png

十、把打包后的index.html页面放在浏览器上

1. 发现head标签中引入了我们打包后的index.css

   
   image.png