Today is November 14, 2018. This is an article written in July

Note the use of vue-cli3 (webpack4), the default is less than 30k will not be extracted as public files, including CSS and js, has been tested

Environment WebPack4.6 + HTML-webpack-plugins multi-page project

The extract-text-webpack-plugin can’t be used for webpack4. Use mini-css-extract-plugin instead

So the initial extraction of CSS is using the mini-CSs-extract-plugin:

2 pages, 2 entry js files, respectively

index.js:
import idxcss from './css/base.css'
import maincss from './css/index.css'


main.js:
import idxcss from './css/base.css'
import maincss from './css/main.css'Copy the code

Plug-in configuration:

        new MiniCssExtractPlugin({
            filename: "static/[name].css",
            chunkFilename: "[id].css"
        }),Copy the code

This generates CSS files for each port, all containing the contents of base.css, which are clearly repackaged

If you want to isolate base.css and let htML-webpack-plugin inject it automatically,

[error] MiniCssExtractPlugin filename changed to a filename (packaged in the same CSS file) Multiple assets emit to the same filename static/common.css

It took two days without result


transit

You can use extract-text-webpack-plugin to install webpack4 with @next
The extract-text-webpack-plugin was used instead
The plug-in can then be packaged in a CSS file 


const ExtractTextPlugin = require('extract-text-webpack-plugin')
 //rules:
 test: /\.css$/,
 use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" })

//plugins
new ExtractTextPlugin('static/style.css') // Can be packaged in a fileCopy the code

With this plug-in, you can extract it into the same file without repackaging it

One thing, CSS introduced in JS should be changed, except base, everything else should be in the same file

import idxcss from './css/base.css'
import maincss from './css/index.css'Copy the code

In addition to base. CSS, the previous two JS files also introduce a CSS, resulting in the contents of the index. CSS is not packaged

Optimize – CSS-assets-webpack-plugin can compress the packed CSS