Webpack第三课 -- CSS篇

引入CSS
ExtractTextWebpackPlugin插件

其他链接：

代码Github地址：

https://github.com/maoxiaoke/You-know-what-is-webpack

当然了，webpack也可以对CSS文件进行打包，将其作为模块引入到JavaScript代码中，然后利用Loader输出。本篇文章主要针对的就是对CSS的操作。

引入CSS

我们还是利用第二课的例子，但是我们不打算用HtmlWebpackPlugin插件。我们新建一个index.html文件，放在dist文件夹中(因为我们将它作为build的结果文件夹)。

<!--index.html-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack template demo</title>
  </head>
  <body>
      <div>
          <p>I am Webpack.</p>
      </div>
      <script src="bundle.js"></script>
  </body>
</html>

在app文件夹中，我们新建一个css文件夹用来存放样式文件style.css。

/*style.css*/
body {
    background-color: red;
}

我们将背景定义为红色。接着，我们要在index.js入口文件importcss文件。

//index.js
import './css/style.css';

function component () {
  var element = document.createElement('div');
  element.innerHTML = "Hello World！";

  return element;
}
document.body.appendChild(component());

到此，我们的基础文件已经安排好了。要使得webpack能识别css文件。我们需要Loader，分别是css-loader和style-loader。css-loader用来返回有@import和url()的css文件，style.css用来将css文件插入页面。

有关css-loader和style-loader的更多讨论，可参考stackoverflow的问题：http://stackoverflow.com/questions/34039826/webpack-style-loader-vs-css-loader

我们这样来安装Loader依赖。

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

在webpack.config.js中配置如下

//webpack.config.js
var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  //style-loader 和 css-loader
  module: {
        rules: [{
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }]
    },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    inline: true
    }
};

test指的是给出一个正则表达式，找到以.css为后缀的样式文件。use中定义了style-loader和css-loader，使用方式是从右往左，所以style-loader在前，css-loader在后。

我们开启了WDS(Webpack Dev Server)，并配置contentBase参数，将服务器定向于dist文件。默认情况下，WDS会服务于根目录。inline参数在dev-server的两种模式间切换，true就是inline模式，修改文件就会重载浏览器窗口；false代表iframe模式；默认为inline模式。

让我们开启服务器

$ npm run build && npm run start

这时，在8080端口，我们看到了文字下面的红色背景。

更多有关css-loader设置的问题，请参考https://doc.webpack-china.org/loaders/css-loader/，尤其是有关css作用域和css module的内容，因为默认情况下，CSS将所有的类名暴露到全局的选择器作用域中。css module就是启用局部作用域CSS。

ExtractTextWebpackPlugin插件

上面的做法有一个性能上的问题，就是无法使用浏览器去异步并并行地加载CSS。反而，你的文件需要等待整个JavaScript文件加载完，才能进行渲染。但是在我们的网页设计中，有一种平稳退化的概念。就是说，HTML是最重要的，其次是CSS，最后是JavaScript。

所以呢，这个插件的作用就是将CSS单独打包，然后交给浏览器率先加载。

首先，我们对插件进行开发依赖安装

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

然后，我们需要修改我们的webpack.config.js配置文件：

//webpack.config.js
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
        rules: [{
            test: /\.css$/,
            //use: [ 'style-loader', 'css-loader' ]
            use: ExtractTextPlugin.extract({
              use: 'css-loader'
            })
        }]
    },
    //ExtractTextPlugin
    plugins: [
      new ExtractTextPlugin('styles.css'),
    ],
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    inline: true
    }
};

这样的设置下，webpack会在dist文件夹中生成一个汇总的styles.css文件。你需要将它作为一个单独的样式加入到index.html中。

Love You Ten Thousand Years

目录

引入CSS

ExtractTextWebpackPlugin插件