Webpack Separate CSS Package

Webpack Separate CSS PackageWord 285Read 0Reviews 0like 0Gab

Webpack all the resources as a module, css,image, JS font files are resources, can be packaged into a bundle.js file.
But sometimes you need to package the style separately into a file, then put it on the CND, and then cache it in the browser client.

This operation is very simple, just need a plug-in just fine, isextract-text-webpack-plugin

1. Installing Extract-text-webpack-plugin

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

2. configuration file Add corresponding configuration

First require, please.

var ExtractTextPlugin = require("extract-text-webpack-plugin");

Plugins inside add

new ExtractTextPlugin("styles.css"),

Instance:

plugins: [ new webpack.optimize.CommonsChunkPlugin(‘common.js‘), new ExtractTextPlugin("styles.css"), ],

Modules inside the CSS to deal with the revision changed to

{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") },

Don't repeat it, or it won't work.

I am here as follows:

 module: { Loaders:[ {Test:/\.css$/,Loader: Extracttextplugin. Extract ("Style-loader","Css-loader") }, {Test:/\.scss$/,Loader: "Style!css!sass"}, {Test:/\.less$/,Loader: "Style!css!less"}, ] },

3. Add the required CSS in the introduction file, "example below"

require(‘../less/app.less‘); require(‘./bower_components/bootstrap-select/dist/css/bootstrap-select.min.css‘); require(‘./bower_components/fancybox/source/jquery.fancybox.css‘);

Webpack Separate CSS Package