這篇文章只寫了如何把CSS打包成一個(gè)CSS文件，沒有講解如何打包成多個(gè)CSS文件，經(jīng)簡友提點(diǎn)，這里添加上了 打包成多個(gè)CSS文件的方法。
瞎扯
webpack 把所有的資源都當(dāng)成了一個(gè)模塊, CSS,Image, JS 字體文件 都是資源, 都可以打包到一個(gè) bundle.js 文件中.
但是有時(shí)候需要把樣式 單獨(dú)的打包成一個(gè)文件, 然后放到 CND上, 然后緩存到瀏覽器客戶端中
一、extract-text-webpack-plugin 使用方法
這個(gè)操作很簡單的，只需要一個(gè)插件就好了，就是extract-text-webpack-plugin
1. 安裝extract-text-webpack-plugin
npm install extract-text-webpack-plugin --save-dev
2. 配置文件添加對應(yīng)配置
首先require一下
var ExtractTextPlugin = require("extract-text-webpack-plugin");plugins里面添加
new ExtractTextPlugin("styles.css"),實(shí)例：
plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new ExtractTextPlugin("styles.css"), ],modules里面對css的處理修改為
{ test: //.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader")},千萬不要重復(fù)了，不然會(huì)不起作用的
我這里如下：
module: { loaders: [ { test: //.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") }, { test: //.scss$/, loader: "style!css!sass" }, { test: //.less$/, loader: "style!css!less" }, ]},3. 在引入文件里面添加需要的css，【舉例如下】
require('../less/app.less');require('./bower_components/bootstrap-select/dist/css/bootstrap-select.min.css');require('./bower_components/fancybox/source/jquery.fancybox.css');二、如何把CSS打包成一個(gè)文件， 和 把CSS打包成多個(gè)文件
打包一個(gè)文件，只需要常規(guī)的在入口的js文件引用 css文件即可， 打包成多個(gè)CSS文件，可以設(shè)置多個(gè)CSS入口，讓webpack用 loader去打包。 和分割單獨(dú)打包js文件一樣。下面有兩個(gè)例子。
// 使用webpack 打包單獨(dú)的postcss語法的css文件/* 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: './【path】/index.js', /* index.js 里 require('./【name】.css');就好 我在看看文檔是不是直接不用引入js文件 */ output: { filename: 'index.js' }, module: { loaders: [{ test: //.css$/, loader: Ex.extract('style-loader', 'css-loader!postcss-loader') /*這里的寫法注意下 */ }] }, postcss: function() { return [autoprefixer, cssnext, precss, cssnano] }, plugins: [ new Ex("【name】.css") ] } // 使用webpack 打包單獨(dú)的多個(gè)postcss語法的css文件var precss = require('precss');var cssnext = require('cssnext');var autoprefixer = require('autoprefixer');var cssnano = require('cssnano');var Ex = require('extract-text-webpack-plugin');var webpack = require('webpack');module.exports = { entry: { ac1: './src/actother.css', ac2: './src/index.css' }, output: { filename: "[name].css" }, module: { loaders: [{ test: //.css$/, loader: Ex.extract('style-loader', 'css-loader!postcss-loader') }] }, postcss: function() { return [autoprefixer, precss, cssnano, cssnext] }, plugins: [ new Ex('[name].css') ]}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
