webpack分離css單獨打包的方法

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 22:12:55

webpack分離css單獨打包的方法

webpack分離css單獨打包的方法:本文介紹了webpack分離css單獨打包的方法，分享給大家，具體如下： CHANGELOG 2018-02-08 14:46:06 剛看了下，網(wǎng)上查了 webpack單獨打包css，找到的文章，本文比較靠前，但是由于寫的比較混亂，因此重新整理一下內容，更通俗易懂一點。 2018-02-01

推薦度：

點擊下載本文 文檔為doc格式

導讀webpack分離css單獨打包的方法:本文介紹了webpack分離css單獨打包的方法，分享給大家，具體如下： CHANGELOG 2018-02-08 14:46:06 剛看了下，網(wǎng)上查了 webpack單獨打包css，找到的文章，本文比較靠前，但是由于寫的比較混亂，因此重新整理一下內容，更通俗易懂一點。 2018-02-01

本文介紹了webpack分離css單獨打包的方法，分享給大家，具體如下：

CHANGELOG

2018-02-08 14:46:06

剛看了下，網(wǎng)上查了 webpack單獨打包css，找到的文章，本文比較靠前，但是由于寫的比較混亂，因此重新整理一下內容，更通俗易懂一點。

2018-02-01 14:45:23

由于這篇文章只寫了如何把CSS打包成一個CSS文件，沒有講解如何打包成多個CSS文件，經(jīng)簡友提點，這里添加上了打包成多個CSS文件的方法。

2016-05-17 11:55

剛學習webpack，記錄一下webpack如何單獨打包css

零、介紹

以下是個人項目中總結出來的一些基本知識，記錄在這里，加深自己的印象，也讓大家能夠更快速方便的了解webpack，并且使用它。能力所限，有錯誤或者問題，請幫忙指出。

webpack 把所有的資源都當成了一個模塊, CSS,Image, JS 字體文件都是資源, 都可以打包到一個 bundle.js 文件中.

webpack基本的使用很簡單，但是要方方面面都講解的話內容很多，因此這邊主要講解一下如何使用webpack單獨打包css。

至于打包出來，怎么加hash值，怎么替換html中的引用路徑，怎么上傳到CND可以使用gulp來實現(xiàn)。【有興趣后面在寫一篇文章】

一、extract-text-webpack-plugin 用法

單獨打包css，在webpack需要使用一個插件，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 里面設置抽離出來的CSS文件名叫什么。

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")
]

稍微詳細點，可以參考這個《extract-text-webpack-plugin 的使用及安裝》

下面放兩個實際使用例子，方便大家理解

二、單頁面應用，把JS里面的CSS單獨打包

打包一個文件，只需要常規(guī)的在入口的js文件引用 css文件即可，打包成多個CSS文件，可以設置多個CSS入口，讓webpack用 loader去打包。和分割單獨打包js文件一樣。下面有兩個例子。

// webpack 1.x 配置 【早期使用的配置，那時候是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') // 單獨打包出CSS，這里配置注意下
 }]
 },
 plugins: [
 new Ex("【name】.css")
 ]
 }

三、webpack如何打包多個CSS文件

2. 配置文件添加對應配置

下面直接提供一個完成的多入口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，則可以在這里增加一個單獨打包js的處理【根據(jù)自己需求來】
// {
// entry:{},
// output:{},
// ... 省略
// }
]

可能有同學還在使用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一樣

聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

webpack分離css單獨打包的方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：打包的方法單獨的

熱門焦點

webpack分離css單獨打包的方法

webpack分離css單獨打包的方法

webpack分離css單獨打包的方法

最新推薦

猜你喜歡

熱門推薦