注意：

本文假设你有webpack 的基础认识。

webpack打包css的两种处理方式：

将css打包进入javascript代码中。然后在js代码加载完成后，创建style标签，将css插入其中。
将所有css模块打包成一个css文件，然后在index.html中使用link标签引用这个css文件。

下面开始演示第一种css打包方式

项目结构如下所示：

1.jpg

开始实战

创建一个目录<code>webpack-demo1</code>,并安装<code>wbepack.</code>

  mkdir webpack-demo1 && cd webpack-demo1
  npm init -y
  npm install --save-dev webpack

安装<code>bootstrap</code>

  npm install bootstrap --save

安装<code>css-loader</code>,<code>style-loader</code>,<code>file-loader</code>和<code>url-loader</code>

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

在项目根目录下，新建<code>index.html</code>文件

      <body>
<h1>代码分割--css</h1>
<nav aria-label="Page navigation">
    <ul class="pagination">
        <li><a href="#" aria-label="Previous">
    <span aria-hidden="true">«</span>
  </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#" aria-label="Next">
    <span aria-hidden="true">»</span>
  </a>
        </li>
    </ul>
</nav>
  <script src="./dist/bundle.js"></script>
</body>

script标签中的<code>bundle.js</code> 是我们打包后生成的文件。

新建<code>index.css</code>文件

h1 {
    color: red;
}

新建<code>index.js</code>文件

// 像 JavaScript 模块一样引入 CSS 文件
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
console.log('Hello World');

新建<code>webpack.config.js</code>文件

const path = require('path');

module.exports = {
    entry:'./index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    module:{
        rules:[{
            test:/\.css$/,
            use:['style-loader','css-loader']
        },{
            test:/\.(svg|woff|woff2|eot|ttf)$/,
            use:['url-loader']
        }]
    }  
}

因为bootstrap.css中引用了一些字体文件，所以需要使用url-loader。否则打包会出错。

最后像下面这样执行命令：

  webpack --config webpack.config.js

输出结果：

51498112205_.pic.jpg

此时你可以在浏览器中打开index.html,然后打开控制台，就能看到html中，多出了俩个style标签。一个包含了bootstrap.css代码，另一个包含了index.css代码。

这种打包方式的缺点是：

你无法使用浏览器的能力，去异步且并行去加载 CSS。取而代之的是，你的页面需要等待整个 JavaScript 文件加载完，才能进行样式渲染。

第二种打包方式

先安装<code>ExtractTextWebpackPlugin</code>

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

为了使用这个插件，它需要通过三步被配置到 <code>webpack.config.js </code>文件中。

修改<code>webpack.config.js</code>

    const path = require('path');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
              test: /\.css$/,
              use: ExtractTextPlugin.extract({use: 'css-loader'})
          }, {
              test: /\.(svg|woff|woff2|eot|ttf)$/,
              use: ['url-loader']
          }
      ]
  },
  plugins: [new ExtractTextPlugin('styles.css')]
}

这个插件会将所有入口的chun中引用的.css文件，放到一个单独的css文件中。这行代码 new ExtractTextPlugin('styles.css')将提取出来的css，放到了styles.css文件中。

ExtractTextPlugin.extract({use: 'css-loader'})方法会从一个已存在的 loader 中，创建一个提取(extract) loader。

最后你还需要在index.html中引用styles.css文件。

  <link rel="stylesheet" href="./dist/styles.css">

再次打包，你会发现在dist中多了一个style.css文件。

在浏览器中打开index.html。注意：h1标签的样式被bootstrap.css覆盖了，因此没有字体显示红色。

webpack实战1之css分离