詳解webpack分離css單獨打包
這篇文章只寫了如何把CSS打包成一個CSS文件,沒有講解如何打包成多個CSS文件,經(jīng)簡友提點,這里添加上了 打包成多個CSS文件的方法。
瞎扯
webpack 把所有的資源都當(dāng)成了一個模塊, CSS,Image, JS 字體文件 都是資源, 都可以打包到一個 bundle.js 文件中.
但是有時候需要把樣式 單獨的打包成一個文件, 然后放到 CND上, 然后緩存到瀏覽器客戶端中
一、extract-text-webpack-plugin 使用方法
這個操作很簡單的,只需要一個插件就好了,就是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"),
實例:
plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new ExtractTextPlugin("styles.css"), ],
modules里面對css的處理修改為
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") },
千萬不要重復(fù)了,不然會不起作用的
我這里如下:
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打包成一個文件, 和 把CSS打包成多個文件
打包一個文件,只需要常規(guī)的在入口的js文件引用 css文件即可, 打包成多個CSS文件,可以設(shè)置多個CSS入口,讓webpack用 loader去打包。 和分割單獨打包js文件一樣。下面有兩個例子。
// 使用webpack 打包單獨的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 打包單獨的多個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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解解決小程序中webview頁面多層history返回問題
這篇文章主要介紹了詳解解決小程序中webview頁面多層history返回問題,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08BootStrap Table實現(xiàn)server分頁序號連續(xù)顯示功能(當(dāng)前頁從上一頁的結(jié)束序號開始)
這篇文章主要介紹了BootStrap Table實現(xiàn)server分頁序號連續(xù)顯示功能(當(dāng)前頁從上一頁的結(jié)束序號開始),需要的朋友可以參考下2017-09-09動態(tài)更新highcharts數(shù)據(jù)的實現(xiàn)方法
下面小編就為大家?guī)硪黄獎討B(tài)更新highcharts數(shù)據(jù)的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05js中requestAnimationFrame()解讀與使用示例
requestAnimationFrame()是JavaScript中用于創(chuàng)建高效、流暢動畫的核心方法,它與瀏覽器的重繪過程同步,確保每次動畫更新都與顯示器刷新率同步,下面就來一起了解一下2024-09-09JavaScript實現(xiàn)班級隨機點名小應(yīng)用需求的具體分析
班級隨機點名小應(yīng)用,點擊開始按鈕,人員的顏色開始變化,當(dāng)停止的時候,會有一個顏色不同的位置,那么這個位置就是被點到的同學(xué)了2014-05-05