在打包时, 如何把css提取成一个独立的文件

打包 css 文件，并把css 文件单独打包出来到 dist 文件夹中，打包后的 html 会自动引入 打包后的 css ,js  文件

这种打包方式，需要 CSS样式抽离之 mini-css-extract-plugin 插件

步骤：

1.安装 ：   npm install mini-css-extract-plugin -D

2.  引入变量    var MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 单独打包后的 .css 插件 ， 新版本都采用这个

3.  模块配置

module: { //文件加载器 loader

/* 单独打包 分离 css 和 js 文件插件开始 */

rules: [

{

test: /\.css$/,

use : [

MiniCssExtractPlugin.loader,

{ loader: "css-loader" }

]

},

/* 单独打包 分离 css 和 js 文件插件结束 */

]

},

4. 插件配置 : 注意，分离打包 js 和 css 文件的时候，， html 插件在注册使用的时候，不能引入 入口里的  js 文件名，否则，还是会打包成单独一个 js

plugins: [

new MiniCssExtractPlugin({ // 压缩打包css 文件插件

filename: "css/[name].css" // 打包后最终生成的 dist 文件里面的 打包后的 css 文件

}),

new htmlWebpackPlugin({ // 打包 A.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,

}),

]

webpack.config.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 插件 ， 新版本都采用这个

// var ExtractTextPlugin = require('extract-text-webpack-plugin'); // 抽离 css 文件打包插件 ; 这个版本引进被废弃

module.exports={

// mode:"development" , //开发模式，没有对js等文件压缩，默认生成的是压缩文件

mode : 'production' ,

entry:{ // 单个 js 打包

'js/a':'./htmlDist/cn/js/A.js' , // 分页打包成 css

'js/b':'./htmlDist/cn/js/B.js' , // 分页打包成 css

},

output:{

// __dirname 表示webpack.config.js 这个配置文件的位置

// filename:'[name].js', //输入的文件名是什么，生成的文件名也是什么，默认配置

filename:'[name].[chunkhash:8].js',//增加8位的哈希值，生成新的动态文件 ，

path:path.resolve(__dirname,'dist') //指定生成的文件目录

},

plugins:[

new CleanWebpackPlugin() , // 使用清除旧文件的插件

new MiniCssExtractPlugin({

filename: 'css/[name].css', // 打包分离后的文件名

}),

new htmlWebpackPlugin({ // 打包 A.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({ // 打包 B.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: [

{

test: /\.css$/,

use : [

MiniCssExtractPlugin.loader,

{ loader: "css-loader" }

]

},

/* 单独打包 分离 css 和 js 文件插件结束 */

]

},

performance: { // 就是为了加大文件允许体积，提升报错门栏。

hints: "warning", // 枚举

maxAssetSize: 500000, // 整数类型(以字节为单位)

maxEntrypointSize: 500000, // 整数类型(以字节为单位)

assetFilter: function(assetFilename) {

// 提供资源文件名的断言函数

return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');

}

},

watch:true , // 时时监控

}

注意：这种打包，会生成单独的 多个 css ,js 文件，并且，html 页面会自动引入 css ,js 文件，(会全部引入)

标签：文件,js,单独,html,打包,true,css