webpack_mini-css-extract-plugin的使用

目录

• 开发依赖版本
• css打包程序
• 使用mini-css-extract-webpack-plugin进行css文件打包的步骤
  • 1.在入口页引入所有的css文件
  • 2.配置webpack.config.js

开发依赖版本

  "devDependencies": {
    "css-loader": "^5.0.1",
    "mini-css-extract-plugin": "^1.3.4",
    "style-loader": "^2.0.0",
    "webpack": "^5.17.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.11.2"
  }

css打包程序

在webpack4以下的版本里使用extract-text-webpack-plugin进行css文件打包
webpack深入浅出————使用plugin
webpack 4.0以后，官方推荐使用mini-css-extract-plugin插件来打包css文件（从css文件中提取css代码到单独的文件中，对css代码进行代码压缩等）。

使用mini-css-extract-webpack-plugin进行css文件打包的步骤

1.在入口页引入所有的css文件

• 假设main.js为入口页，在其下引入所有的css文件

require('./main.css');
require('./reset.css');

2.配置webpack.config.js

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

const config = {
    mode: 'development',
    entry: './main.js',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, '/dist')
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [miniCssExtractPlugin.loader, 'css-loader']
        }]
    },
    plugins: [
        new miniCssExtractPlugin({
            filename: `[name]_[contenthash:8].css`,
            chunkFilename: `[id].css`
        })
    ]
}
module.exports = config;

• 1.引入mini-css-extract-plugin模块。
  const miniCssExtractPlugin = require('mini-css-extract-plugin');

• 2.config.module.rules[0].use数组的第一个文件改写为
  use: [miniCssExtractPlugin.loader, 'css-loader']

• 3.配置config.plugins属性

    plugins: [
        new miniCssExtractPlugin({
            filename: `[name]_[contenthash:8].css`,
            chunkFilename: `[id].css`
        })
    ]

---

完成后即可在dist目录下看见bundle.js文件和打包好的css文件