**
目标:项目中所有的css文件全部打包到dist
下面的css
文件夹下面;
**
一、webpack对css的处理
我们都知道webpack是可以直接去处理javascript的代码,但是对于css、image、font等,是不能直接处理的,需要使用到loader
将其转化成javbascript代码片,然后在对其进行处理
对于处理css,需要使用到的loader是:style-loader、css-loader;
先把这些loader下载下来
命令行执行
npm install style-loader css-loader --save-dev
下载好了之后,webpack.config.js
配置如下
在module的配置里面去配置loader选项
module:{
rules:[
{
test:/\.css$/,
use:["style-loader","css-loader"]//注意:loader是从又往左开始加载处理的,所以先执行css-loader
}
],
},
但是这样会将css打包到对应的js里面去,那么页面加载的时候会先解析完了js之后再去加载css,这样会影响用户体验
所以我们需要将css单独提取出来,以link
的方式注入到文件里面
二、使用ExtractTextWebpackPlugin单独抽取css注入
实现需要下载该插件
npm init
更改webpack.config.js
配置
const path = require('path');
const webpack = require('webpack')
//引入插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const configs = {
entry:{
'commom':['./src/page/common/index.js'],
'index':['./src/page/index/index.js'],
'login':['./src/page/login/index.js']
},
output:{
path:path.resolve(__dirname, 'dist'),
filename:'js/[name].js'
},
externals:{
//可以把外部的变量或模块加载进来,比如cdn引入的jquery,想要按需模块化引入
'jquery':'window.jQuery'
},
module:{
rules:[
{
test:/\.css$/,
//注意:这里还需要更改一下
use:ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({
name : 'common',
filename : 'js/base.js'
}),
//这里会按照output的路径打包到css文件夹下面对应的css的名字
new ExtractTextPlugin('css/[name].css')
]
}
module.exports= configs
这样就将 entry
入口文件里面所引用到的所有的css打包成单独的css文件了,
如果你的样式文件大小较大,这会做更快提前加载,因为 CSS bundle 会跟 JS bundle 并行加载。
关于less和sass的文件打包,这里就不多做叙述。可以参照
https://blog.csdn.net/lhtzbj12/article/details/79188447