The implementation packages CSS and JS separately, generating a different file because the browser caches JS and CSS. Each time the JS and CSS are modified, the implementation packaging generates a different file name

Package the JS and CSS files separately

Install extract – text – webpack – the plugin

NPM install –save-dev extract-text-webpack-plugin

If the packaging is incorrect, install the latest version

npm install --save-dev extract-text-webpack-plugin@next

Modify the webpack. Config. Js

const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");

const extractCSS = new extractTextPlugin("css/style.css");
module.exports = {
    mode: 'development'.entry: './src/js/app.js'.output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/app.bundle.js'
    },
    module: {
        rules: [{test: /\.css$/.use: extractCSS.extract({
                    fallback: "style-loader".// Use style-loader to render CSS after compiling
                    use: [
                        { loader: 'css-loader'},]})}]},plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html'.template: './src/template/index.html'.title: 'this is webpack title'
        }),
        extractCSS
    ]
};
Copy the code

instructions

fallback: "style-loader"// Use style-loader to render CSS after compilingCopy the code

use: [
    {loader:'css-loader'} // parse CSS]Copy the code

Execute the NPM Run webpack

Dist directory

Dist ├ ─ ─ CSS │ └ ─ ─ style.css. CSS ├ ─ ─ index. The HTML └ ─ ─ js └ ─ ─ app. Bundle. JsCopy the code

Browser to dist/index.html

Modify js and CSS to generate different files

You can modify webpack.config.js filename to achieve this

Updated webpack.config.js

const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");

const extractCSS = new extractTextPlugin("css/[name]-[hash].css");
module.exports = {
    mode: 'development'.entry: './src/js/app.js'.output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name]-[hash].js'
    },
    module: {
        rules: [{test: /\.css$/.use: extractCSS.extract({
                    fallback: "style-loader".// Use style-loader to render CSS after compiling
                    use: [
                        { loader: 'css-loader'},]})}]},plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html'.template: './src/template/index.html'.title: 'this is webpack title'
        }),
        extractCSS
    ]
};
Copy the code

instructions

[name]: file name of the source file [hash]: all contents of this packagehashvalueCopy the code

Execute the NPM Run webpack

Dist directory

Dist ├ ─ ─ CSS │ ├ ─ ─ the main - 4 c81874fa8a7d285990e. CSS │ └ ─ ─ style.css. CSS ├ ─ ─ index. The HTML └ ─ ─ js ├ ─ ─ app. The bundle, js └ ─ ─ main-4c81874fa8a7d285990e.jsCopy the code

conclusion

Plug-in installation

perform

npm install --save-dev extract-text-webpack-plugin

Install the latest version

npm install --save-dev extract-text-webpack-plugin@next

The plug-in USES

const extractTextPlugin = require("extract-text-webpack-plugin");
Copy the code

The module. Exports rule changes

test: /\.css$/,
use: extractCSS.extract({
    fallback: "style-loader"// use style-loader to render CSS using: [{loader:'css-loader']})},Copy the code

Please refer to extract-text-webpack-plugin for more documentation

Consider: JS support ES6, style support less, browser compatible automatic prefix

See WebPack 4.x field 5, JS support ES6; The CSS supports less and is compatible with browsers