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