extract-text-webpack-plugin

The WebPack4 + version uses the mini-CSs-extract-plugin, which packs all styles into a single CSS file

1. Install the plug-in

yarn add mini-css-extract-plugin -D 
Copy the code

or

npm install mini-css-extract-plugin -D
Copy the code

Check whether the package.json file has been installed

2. Webpack. Config. Js configuration

Let’s start with plug-ins
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
Copy the code
To configure the loader
module: {
    rules: [{test: /\.(css|stylus)$/,
            use : [
                MiniCssExtractPlugin.loader,
                'css-loader'.'stylus-loader']]}}Copy the code
And then configure the plugin
plugins: [
    new MiniCssExtractPlugin({
      filename:  'css/[name].[hash:8].css'.chunkFilename:  'css/[id].[hash:8].css',})]Copy the code
Finally run to see the effect
// Run the command
yarn server
Copy the code

After the success of the compile browser input address: http://localhost:8080/home/index

Project source repository github

Link: github.com/1761364313/… .