webpack分離css單獨打包

原文地址，歡迎Star！github

webpack分離css單獨打包

完整的文章【使用markdown編寫，新增單獨打包成多個CSS文件】

瞎扯

webpack 把所有的資源都當成了一個模塊, CSS,Image, JS 字體文件 都是資源, 都可以打包到一個 bundle.js 文件中.
但是有時候需要把樣式 單獨的打包成一個文件, 然后放到 CND上, 然后緩存到瀏覽器客戶端中

---

這個操作很簡單的，只需要一個插件就好了，就是extract-text-webpack-plugin

1. 安裝extract-text-webpack-plugin

npm install extract-text-webpack-plugin --save-dev

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

首先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") },

千萬不要重復了，不然會不起作用的

我這里如下：

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');

您可能還感興趣

1. 【簡書】【WEBPACK】分離css單獨打包

2. 【博客園完整版】webpack分離css單獨打包

3. 【GITHUB】前端技術文章匯總