打包 css 文件的意義： 最終把 css 文件壓縮到 最終生成的 js 文件里，頁面不需要再加載 css 文件，並且是壓縮過的
打包 css 文件 ，安裝 style-loader css-loader
npm install --save-dev style-loader css-loader
在入口文件的 js文件里引入 css 文件，可以引入多個 css 文件
import '../css/a.css' ; // 引入css樣式 import '../css/b.css' ; // 引入css樣式
在module里面引入模塊打包插件 style-loader , css-loader
//文件加載器 loader //loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript） module: { rules: [ { // 打包 css test: /\.css$/, // 正則表達式，表示.css后綴的文件 use: ['style-loader','css-loader'] // 針對css文件使用的loader，注意有先后順序，數組項越靠后越先執行 } ] },
html 插件注冊里面，需要配置下面這個屬性，就是引入入口文件的 js
chunks:['js/a'],
具體webpack 配置如下
// 1. 這種方式，把多個 js 自動打包成默認的 main.js ，直接在 dist 文件夾里面，和生成的 html 文件同級 // 2. 而且，html 插件里，沒有引入也會自動引入 js ，而且還添加版本號 const path=require('path'); //調用node.js中的路徑 const {CleanWebpackPlugin} = require('clean-webpack-plugin'); // 清除舊的出口文件，使用 有hash 值的新文件 var htmlWebpackPlugin = require('html-webpack-plugin'); // 打包 html 插件 var MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 單獨打包后的 .css 插件 ， 新版本都采用這個 module.exports={ // mode:"development" , //開發模式，沒有對js等文件壓縮，默認生成的是壓縮文件 mode : 'production' , entry:[ './htmlDist/cn/js/A.js', './htmlDist/cn/js/B.js', ], output:{ // __dirname 表示webpack.config.js 這個配置文件的位置 // filename:'[name].js', //輸入的文件名是什么，生成的文件名也是什么，默認配置 filename:'[name].[chunkhash:8].js',//增加8位的哈希值，生成新的動態文件 ， path:path.resolve(__dirname,'dist') //指定生成的文件目錄 }, plugins:[ new CleanWebpackPlugin() , // 使用清除舊文件的插件 new htmlWebpackPlugin({ // 打包 cn-index.html 文件插件 minify:{ minimize:true,//是否打包為最小值 removeAttrbuteQuotes:true,//去除引號 removeComments:true,//去掉注釋 collapseWhitespace:true,//去掉空格 minifyCss:true,//壓縮css removeEmptyElements:false,//清理內容為空的元素 }, template:"./htmlDist/cn/A.html" , // 引入需要打包的 html 文件 ，並生成到 最終的dist 文件夾里面去， // title:'A.html', // 最終生成的 文件名 // chunks:['js/a'], //需要引入的js文件名稱 filename: "A.html", //生成html文件的文件名，默認是index.html hash:true , //引入產出的資源時加上哈希避免緩存 inject: true, }), new htmlWebpackPlugin({ // 打包 cn-index.html 文件插件 minify:{ minimize:true,//是否打包為最小值 removeAttrbuteQuotes:true,//去除引號 removeComments:true,//去掉注釋 collapseWhitespace:true,//去掉空格 minifyCss:true,//壓縮css removeEmptyElements:false,//清理內容為空的元素 }, template:"./htmlDist/cn/B.html" , // 引入需要打包的 html 文件 ，並生成到 最終的dist 文件夾里面去， // title:'A.html', // 最終生成的 文件名 // chunks:['js/a'], //需要引入的js文件名稱 filename: "B.html", //生成html文件的文件名，默認是index.html hash:true , //引入產出的資源時加上哈希避免緩存 inject: true, }), ], devServer: { // 本地服務器配置 contentBase: './dist', //默認本地服務器所在的根目錄 historyApiFallback: true, //是否跳轉到index.html inline: true, //源文件改變時刷新頁面 port: 8084 , //端口號，默認8080 hot: true, }, module: { //文件加載器 loader /* 單獨打包 分離 css 和 js 文件插件開始 */ rules: [ { // 打包 css test: /\.css$/, // 正則表達式，表示.css后綴的文件 use: ['style-loader','css-loader'] // 針對css文件使用的loader，注意有先后順序，數組項越靠后越先執行 }, { // 打包 html 里面的 img 圖片 test: /\.(htm|html)$/i, use: 'html-withimg-loader' }, { // 打包 css 里面的 img 圖片 test: /\.(png|svg|jpg|gif)$/, // use: ['file-loader'], use:[ { loader:'url-loader', options: { name: 'images/[name].[ext]', // 這里limit屬性的作用就是將小於8192B（8.192K）大小的圖片轉成base64格式，而大於這個大小的圖片將會以file-loader的方式進行打包處理 // 如果不寫limit屬性，那么url-loader就會默認將所有圖片轉成base64 // limit: 102400 // file-loader 默認使用了最新版本，返回的是 [object module] ，會導致 打包圖片 失敗，添加這個 esModule:false } } ] }, ] }, performance: { // 就是為了加大文件允許體積，提升報錯門欄。 hints: "warning", // 枚舉 maxAssetSize: 500000, // 整數類型（以字節為單位） maxEntrypointSize: 500000, // 整數類型（以字節為單位） assetFilter: function(assetFilename) { // 提供資源文件名的斷言函數 return assetFilename.endsWith('.css') || assetFilename.endsWith('.js'); } }, watch:true , // 時時監控 }