webpack打包CSS

抽離CSS

• 安裝

  • npm install extract-text-webpack-plugin --save-dev
  • yarn add extract-text-webpack-plugin

• 配置

var Ex = require('extract-text-webpack-plugin');
// ...省略
module: {
  loaders: [{
    test: /\.less/,
    loader: Ex.extract('style-loader', 'css-loader','less-loader')  // 單獨打包出CSS，這裡配置注意下
  }]
},
plugins: [
  new Ex("【name】.css")
]
複製程式碼

單個頁面單獨打包CSS

即一個應用多個Css檔案

• 打包一個檔案，只需要常規的在入口的js檔案引用 css檔案即可
• 打包成多個CSS檔案，可以設定多個CSS入口，讓webpack用 loader去打包。 和分割單獨打包js檔案一樣。

// webpack 3.x 的配置
var path = require('path')
var glob = require('globby')  
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

// CSS入口配置
var CSS_PATH = {
  css: {
    pattern: ['./src/**/[^_]*.less', '!./src/old/**/*.less'],
    src: path.join(__dirname, 'src'),
    dst: path.resolve(__dirname, 'static/build/webpack'),
  }
}

// 遍歷除所有需要打包的CSS檔案路徑
function getCSSEntries(config) {
  var fileList = glob.sync(config.pattern)
  return fileList.reduce(function (previous, current) {
    var filePath = path.parse(path.relative(config.src, current))
    var withoutSuffix = path.join(filePath.dir, filePath.name)
    previous[withoutSuffix] = path.resolve(__dirname, current)
    return previous
  }, {})
}

module.exports = [
  {
    devtool: 'cheap-module-eval-source-map',
    context: path.resolve(__dirname),
    entry: getCSSEntries(CSS_PATH.css),
    output: {
      path: CSS_PATH.css.dst,
      filename: '[name].css'
    },
    module: {
      rules: [
        {
          test: /\.less$/,
          use: ExtractTextPlugin.extract({
            use: ['css-loader', 'postcss-loader', 'less-loader']
          })
        }
      ]
    },
    resolve: {
      extensions: ['.less']
    },
    plugins: [
      new ExtractTextPlugin('[name].css'),
    ]
  },
// 如果還需要打包js，則可以在這裡增加一個單獨打包js的處理【根據自己需求來】
// {
//    entry:{},
//    output:{},
//    ... 省略
// }
]
複製程式碼