webpack对css进行单独打包

**

目标：项目中所有的css文件全部打包到dist下面的css文件夹下面；

**

---

一、webpack对css的处理

我们都知道webpack是可以直接去处理javascript的代码，但是对于css、image、font等，是不能直接处理的，需要使用到loader将其转化成javbascript代码片，然后在对其进行处理

对于处理css，需要使用到的loader是：style-loader、css-loader;
先把这些loader下载下来

命令行执行

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

下载好了之后，webpack.config.js配置如下
在module的配置里面去配置loader选项

module:{
    rules:[
      {
        test:/\.css$/,
        use:["style-loader","css-loader"]//注意：loader是从又往左开始加载处理的，所以先执行css-loader
      }
    ]，
  },

但是这样会将css打包到对应的js里面去，那么页面加载的时候会先解析完了js之后再去加载css，这样会影响用户体验

所以我们需要将css单独提取出来，以link的方式注入到文件里面

二、使用ExtractTextWebpackPlugin单独抽取css注入

实现需要下载该插件

npm init

更改webpack.config.js配置

const path = require('path');
const webpack = require('webpack')
//引入插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const configs = {
  entry:{
    'commom':['./src/page/common/index.js'],
    'index':['./src/page/index/index.js'],
    'login':['./src/page/login/index.js']
  },
  output:{
    path:path.resolve(__dirname, 'dist'),
    filename:'js/[name].js'
  },
  externals:{
    //可以把外部的变量或模块加载进来,比如cdn引入的jquery,想要按需模块化引入
     'jquery':'window.jQuery'
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        //注意：这里还需要更改一下
        use:ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins:[
    new webpack.optimize.CommonsChunkPlugin({
      name : 'common',
      filename : 'js/base.js'
    }),
    //这里会按照output的路径打包到css文件夹下面对应的css的名字
    new ExtractTextPlugin('css/[name].css')
  ]
}
module.exports= configs

这样就将 entry入口文件里面所引用到的所有的css打包成单独的css文件了，

如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。

关于less和sass的文件打包，这里就不多做叙述。可以参照
https://blog.csdn.net/lhtzbj12/article/details/79188447