webpack提取分离css单独打包
就是将所有的入口 chunk(entry chunks)中引用的 css,移动到独立分离的CSS文件,如下图所示:
需要使用extract-text-webpack-plugin(旧版)插件或者mini-css-extract-plugin(新版)插件。
一.extract-text-webpack-plugin插件
具体步骤:
1.安装依赖
打开终端,进入到项目文件夹路径,输入命令cnpm install --save-dev extract-text-webpack-plugin@next
2.配置webpack.config.js文件
首先需要引入html-webpack-plugin插件,代码如下:
const ExtractTextPlugin = require('extract-text-webpack-plugin');
3.在module.exports = {}里的module里的rules里写配置:
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
//fallback:编译后用什么loader来提取css文件
fallback:"style-loader",
use:"css-loader"
})
},
在module.exports = {}里的plugins里写配置:
//可以打包在一个文件夹内
new ExtractTextPlugin("./css/index.css"),
4.在终端输入npm run dev
进行打包。
二.mini-css-extract-plugin插件
1.安装依赖
打开终端,进入到项目文件夹路径,输入命令cnpm install --save-dev mini-css-extract-plugin
2.配置webpack.config.js文件
首先需要引入html-webpack-plugin插件,代码如下:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3.在module.exports = {}里的module里的rules里写配置:
{
test:/\.css$/,
use:[MiniCssExtractPlugin.loader,'css-loader']
},
在module.exports = {}里的plugins里写配置:
//可以打包在一个文件夹内
new MiniCssExtractPlugin({
filename:"./css/index.css"
}),
4.在终端输入npm run dev
进行打包。