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-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文件，并不能实现热更新

三、两种方法的对比