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