時(shí)間：2018-11-21 00:58:56
這篇文章非常非常早了，webpack4下已經(jīng)無法用了惫霸， 最新可以看這里webpack實(shí)戰(zhàn)場景系列
原文地址：http://www.izhongxia.com/posts/4676.html
CHANGELOG
2018-02-08 14:46:06
剛看了下，網(wǎng)上查了 webpack單獨(dú)打包c(diǎn)ss屈梁，找到的文章惕味，本文比較靠前，但是由于寫的比較混亂把兔，因此重新整理一下內(nèi)容沪伙，更通俗易懂一點(diǎn)。
2018-02-01 14:45:23
由于這篇文章只寫了如何把CSS打包成一個(gè)CSS文件县好，沒有講解如何打包成多個(gè)CSS文件围橡，經(jīng)簡友提點(diǎn)，這里添加上了 打包成多個(gè)CSS文件的方法缕贡。
2016-05-17 11:55
剛學(xué)習(xí)webpack翁授，記錄一下webpack如何單獨(dú)打包c(diǎn)ss
零拣播、介紹
以下是個(gè)人項(xiàng)目中總結(jié)出來的一些基本知識，記錄在這里收擦，加深自己的印象贮配，也讓大家能夠更快速方便的了解webpack，并且使用它塞赂。能力所限泪勒，有錯(cuò)誤或者問題，請幫忙指出减途。
webpack 把所有的資源都當(dāng)成了一個(gè)模塊, CSS,Image, JS 字體文件 都是資源, 都可以打包到一個(gè) bundle.js 文件中.
webpack基本的使用很簡單酣藻，但是要方方面面都講解的話內(nèi)容很多，因此這邊主要講解一下 如何使用webpack單獨(dú)打包c(diǎn)ss鳍置。
至于打包出來辽剧，怎么加hash值，怎么替換html中的引用路徑税产，怎么上傳到CND可以使用gulp來實(shí)現(xiàn)怕轿。【有興趣后面在寫一篇文章】
一辟拷、extract-text-webpack-plugin 用法
單獨(dú)打包c(diǎn)ss撞羽，在webpack需要使用一個(gè)插件，extract-text-webpack-plugin
1. 安裝extract-text-webpack-plugin
// use npm
npm install extract-text-webpack-plugin --save-dev
// or use yarn
yarn add extract-text-webpack-plugin
2. 配置
加載器里面寫好插件的配置（使用什么加載器）衫冻，在webpack的 plugins 里面設(shè)置抽離出來的CSS文件名叫什么诀紊。
var Ex = require('extract-text-webpack-plugin');
// ...省略
module: {
loaders: [{
test: /\.less/,
loader: Ex.extract('style-loader', 'css-loader','less-loader') // 單獨(dú)打包出CSS，這里配置注意下
}]
},
plugins: [
new Ex("【name】.css")
]
稍微詳細(xì)點(diǎn)隅俘，可以參考這個(gè)《extract-text-webpack-plugin 的使用及安裝》
<font color="red">下面放兩個(gè)實(shí)際使用例子邻奠，方便大家理解</font>
二、單頁面應(yīng)用为居，把JS里面的CSS單獨(dú)打包
打包一個(gè)文件碌宴，只需要常規(guī)的在入口的js文件引用 css文件即可， 打包成多個(gè)CSS文件蒙畴，可以設(shè)置多個(gè)CSS入口贰镣，讓webpack用 loader去打包。 和分割單獨(dú)打包js文件一樣膳凝。下面有兩個(gè)例子碑隆。
// webpack 1.x 配置 【早期使用的配置，那時(shí)候是1.x】
/* webpack.config.js */
var precss = require('precss');
var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var Ex = require('extract-text-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
filename: 'index.js'
},
module: {
loaders: [{
test: /\.less/,
loader: Ex.extract('style-loader', 'css-loader','less-loader') // 單獨(dú)打包出CSS蹬音，這里配置注意下
}]
},
plugins: [
new Ex("【name】.css")
]
}
三上煤、webpack如何打包多個(gè)CSS文件
2. 配置文件添加對應(yīng)配置
下面直接提供一個(gè)完成的多入口CSS打包配置
// 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，則可以在這里增加一個(gè)單獨(dú)打包js的處理【根據(jù)自己需求來】
// {
// entry:{},
// output:{},
// ... 省略
// }
]
可能有同學(xué)還在使用webpack1.x,所以這里在貼一下webpack1.x 的簡單配置
// webpack 1.x 版本
// ...其他配置和webpack3.x一樣
module: {
loaders: [
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader","css-loader","postcss-loader","less-loader")
},
]
}
plugins: [
new ExtractTextPlugin('[name].css'),
]
// ...其他配置和webpack3.x一樣
