webpack打包css为js,webpack 打包css文件

在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.css

1.安装插件

npm install css-loader --save-dev

npm install style-loader --save-dev

npm install extract-text-webpack-plugin --save-dev2.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文件，并不能实现热更新

三、两种方法的对比