在webpack中,每个文件都是一个模块(css、js、html、jpg、less)。对于不同的模块使用不同的加载器.
文章中使用的版本:node:8.11.1,webpack 4.6.0
文章中的配置:安装 webpack-dev-server
一、直接打包css
1.、安装加载器
npm install css-loader --save-dev
npm install style-loader --save-dev
npm install extract-text-webpack-plugin --save-dev
2、webpack。config。js的配置
对于css文件,先使用css-loader转换,再通过style-loader转换。然后继续打包。
use可以为对象或数组,当为数组时,它的编译顺序从后往前(!!!)。
module:{
rules:[
{
test:/\.css$/,
use:[style-loader","css-loader"]
}]
}
3.运行
package.json 的配置:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --progress --hot --inline --mode development",
},
直接运行
npm run dev
可以看到css是通过style标签引入的。
改变style.css中的文件。可以看到页面实时编译并更新了
二、使用插件extra-text-webpack-plugin提取css。并生成一个main.css1.安装插件
npm install css-loader --save-dev
npm install style-loader --save-dev
npm install extract-text-webpack-plugin --save-dev
2.webpack.config.js的配置
module:{
rules:[
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
use:"css-loader",
fallback:"style-loader",
})
}
]
},
plugins:[
new ExtractTextPlugin("main.css")
]
3.运行
此时,main.css文件需要通过link引入到页面中。
package.json的配置同上
运行
npm run dev
!!!!此时改变依赖中style.css文件,并不能实现热更新
三、两种方法的对比