CSS样式抽离之 extract-text-webpack-plugin 插件

extract-text-webpack-plugin

webpack4+ 版本 才能用 mini-css-extract-plugin 插件 ，这里是把所有的样式打包到一个css 文件中

1. 插件安装

yarn add mini-css-extract-plugin -D 

或者

npm install mini-css-extract-plugin -D

查看 package.json 文件是否已安装

2. webpack.config.js 配置

先引入插件

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

再配置loader

module: {
    rules: [
        {
            test: /\.(css|stylus)$/,
            use : [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'stylus-loader'               
            ]
        }
    ]
}

然后配置plugin

plugins: [
    new MiniCssExtractPlugin({
      filename:  'css/[name].[hash:8].css',
      chunkFilename:  'css/[id].[hash:8].css',
    })
]   

最后运行看效果

//执行运行命令
yarn server

编译成功后浏览器输入地址 ：http://localhost:8080/home/index

项目源码仓库 github

链接: github.com/1761364313/….