使用ExtractTextPlugin插件抽取样式

webpack在打包资源的时候，会将资源文件转换成javascript代码，来实现与其他模块的合并。在打包css文件时，用JS代码引入样式的方式，会有一定的延时。这就是我们使用ExtractTextPlugin插件抽取样式的原因之一。下面我们来比较一下这两种方式的差别。（本文中使用的webpack版本号3.10.0）

一、不使用插件

方式一、直接在JS文件中引入样式文件

首先我们编写代码，代码完成后，项目的目录结构如下：

 

index.hmtl中的代码：

index.js中通过require方法引入index.css

index.css中的内容如下：

 

 接着，我们使用npm init命令生成package.json，然后安装两个loader：style-loader和css-loader。

 npm install style-loader css-loader --save-dev

然后执行命令

webpack ./index.js bundle.js

最后在项目中会生成一个bundle.js

在浏览器中打开index.html，运行结果如下图：

检查生成的bundle.js，发现项目中的css文件是通过js代码生成的。

 

方式二、配置webpack中的webpack.config.js文件

文件目录结构如下：

index.js中的代码修改一下，其他文件与方式一保持一致

新建一个webpack.config.js文件，内容如下：

 

 

接着，我们使用npm init命令生成package.json，然后安装两个loader：style-loader和css-loader。

 npm install style-loader css-loader --save-dev

然后执行命令

webpack

 生成的目录和结果与方式一完全一致。

总结：方法二通过配置的方式比方式一灵活、方便，但是并没有解决在JS中引入样式带来的延迟问题。

 

二、使用插件进行抽取

 项目的目录结构如下：

先编辑一下webpack.config.js文件，代码如下：

再编辑一下index.html，通过link引入样式文件，代码如下：

index.js中的代码如下：

index.css中的代码：

 

 使用npm init命令生成package.json

安装style-loader和css-loader

npm install style-loader css-loader --save-dev

安装ExtractTextPlugin插件

npm install extract-text-webpack-plugin --save-dev

安装webpack到本地项目

npm install webpack --save-dev

执行命令

webpack

 命令执行完后，目录中多了bundle.js和style.css

查看bundle.js，会发现里面用js操作css的代码被移除了

ExtractTextWebpackPlugin解决了用js代码生成样式文件的弊端，但美中不足的是，它仅仅帮我们提取了css文件。我们需要在页面中通过手写代码引入这个样式文件，解决这个问题需要其他插件的帮助。