webpack4实现css打包

在webpack打包过程中，默认会把css文件打包到js内部，代码如下：

const path = require('path');

module.exports = {
  entry: './main.js',  // JavaScript 执行入口文件
  output: {
    filename: 'bundle.js',  // 把所有依赖的模块合并输出到一个 bundle.js 文件
    path: path.resolve(__dirname, './dist'),  // 输出文件都放到 dist 目录下
  },
  module: {
    rules: [
      {
        test: /\.css$/,  // 用正则去匹配要用该 loader 转换的 CSS 文件
        use: ['style-loader', 'css-loader'],
      }
    ]
  },
  mode: 'development' // 设置mode
};

它的工作原理大概是把 CSS 内容用 JavaScript 里的字符串存储起来， 在网页执行 JavaScript 时通过 DOM 操作动态地往 HTML head 标签里插入 HTML style 标签。

但是这样做会导致 JavaScript 文件变大并导致加载网页时间变长，所以我们需要使css实现单独打包

下面介绍两种webpack4实现css打包的方法

1、extract-text-webpack-plugin

第一步： npm i -D extract-text-webpack-plugin
（"extract-text-webpack-plugin":"^3.0.2"）
第二步：配置文件

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = {
  entry: './main.js',  // JavaScript 执行入口文件
  output: {
    filename: 'bundle.js',  // 把所有依赖的模块合并输出到一个 bundle.js 文件
    path: path.resolve(__dirname, './dist'),  // 输出文件都放到 dist 目录下
  },
  module: {
    rules: [
      {
        test: /\.css$/,  // 用正则去匹配要用该 loader 转换的 CSS 文件
        use: ExtractTextPlugin.extract({
          use: ['css-loader'],
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: '../dist/css/style.css', // 从 .js 文件中提取出来的 .css 文件的名称
    }),
  ],
  mode: 'development' // 设置mode
};

第三步：构建
然后会报如下错误

原因：extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本
解决：npm install --save-dev extract-text-webpack-plugin@next
（"extract-text-webpack-plugin": "^4.0.0-beta.0"）
安装成功后重新执行构建，你会发现 dist 目录下多出一个 css/style.css 文件，bundle.js 里也没有 CSS 代码了，再把该 CSS 文件引入到 index.html 里就完成了。
⚠️此组件不支持热更新，官方建议在开发环境中关闭ExtractText组件

2、mini-css-extract-plugin

第一步：npm i -D mini-css-extract-plugin
第二步：配置文件

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './main.js',  // JavaScript 执行入口文件
  output: {
    filename: 'bundle.js',  // 把所有依赖的模块合并输出到一个 bundle.js 文件
    path: path.resolve(__dirname, './dist'),  // 输出文件都放到 dist 目录下
  },
  module: {
    rules: [
      {
        test: /\.css$/,  // 用正则去匹配要用该 loader 转换的 CSS 文件
        use: [
          MiniCssExtractPlugin.loader,
          // 'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '../dist/css/style.css',  // 从 .js 文件中提取出来的 .css 文件的名称
    }),
  ],
  mode: 'development' // 设置mode
};

第三步：构建
安装成功后重新执行构建，你会发现 dist 目录下多出一个 css/style.css 文件，bundle.js 里也没有 CSS 代码了，再把该 CSS 文件引入到 index.html 里就完成了。

---

彩蛋篇

css-loader: 加载.css文件
style-loader: 在打包生成的js文件中，动态创建<style>将css-loader内部样式注入head标签
所以在单独打包css的时候就要把rules里的style-loader去掉，否则会报如下错误：

---

本人在学习webpack过程中实力踩坑，上述方法亲测有效，希望能帮到大家