Webpack separating CSS and packaging separately

This article mainly introduces the Webpack separate CSS packaging method, the content is very good, and now share to everyone, but also for everyone to do a reference.

This article introduces the separate packaging method of webpack separate CSS, and share it with you, as follows:

CHANGELOG

2018-02-08 14:46:06

Just looked under, on-line check the webpack individually packaged CSS, found articles, this article compared to the front, but because of the confusion of writing, so re-organize the content, more easy to understand a bit.

2018-02-01 14:45:23

As this article only wrote how to package CSS into a CSS file, not how to package into multiple CSS files, Jianyo Point, here to add a package into a number of CSS file method.

2016-05-17 11:55

Just learn webpack, record how webpack to pack CSS separately

0. Introduction

The following is a summary of some of the basic knowledge of individual projects, recorded here, to deepen their impressions, but also allows you to more quickly and easily understand webpack, and use it. The ability is limited, there are errors or problems, please help to point out.

Webpack all the resources as a module, css,image, JS font files are resources, can be packaged into a bundle.js file.

Webpack Basic use is very simple, but to be explained in all aspects of the content of a lot, so here is the main explanation of how to use Webpack separately packaged CSS.

As for packing out, how to add hash value, how to replace the reference path in HTML, how to upload to CND can be implemented using gulp. "Interested in writing an article later"

First, Extract-text-webpack-plugin usage

Separately packaged CSS, in Webpack need to use a plug-in, Extract-text-webpack-plugin

1. Installing Extract-text-webpack-plugin

Use npm npm install Extract-text-webpack-plugin--save-dev//or use yarn yarn add Extract-text-webpack-plugin

2. Configuration

In the loader, write the configuration of the plug-in (using what loader), in the Webpack plugins inside set out the name of the CSS file name.

var Ex = require (' Extract-text-webpack-plugin ');//... Omit module: {loaders: [{  test:/\.less/,  loader:Ex.extract (' Style-loader ', ' css-loader ', ' less-loader ')// Package the CSS separately, here configuration note}]},plugins: [New Ex ("" Name ". css")]

A little more detailed, you can refer to this "Extract-text-webpack-plugin use and Installation"

Here are two examples of practical use, easy to understand

Second, single page application, the JS inside the CSS separately packaged

Packaging a file, only the usual in the portal JS file reference CSS files can be packaged into multiple CSS files, you can set up a number of CSS portals, let webpack with loader to pack. and split the same as the separate package JS file. Here are two examples.

Webpack 1.x configuration  "Early-use configuration, then 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 ')//package The CSS separately, here configuration Note   }]  },  plugins: [   New Ex ("" Name ". css")  ]}

Iii. Webpack How to package multiple CSS files

2. configuration file Add corresponding configuration

A complete multi-entry CSS package configuration is provided directly below

Webpack 3.x configuration var path = require (' path ') var glob = require (' Globby ') var webpack = require (' Webpack ') var extracttextpl Ugin = require (' extract-text-webpack-plugin ')//CSS entry configuration var css_path = {css: {pattern: ['./src/**/[^_]*.less ', '!. /src/old/**/*.less '], Src:path.join (__dirname, ' src '), dst:path.resolve (__dirname, ' static/build/webpack '),}}// Iterate over all the CSS file paths that need to be packaged 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.jo In (Filepath.dir, filepath.name) Previous[withoutsuffix] = Path.resolve (__dirname, current) return previous}, {})}modul E.exports = [{devtool: ' Cheap-module-eval-source-map ', Context:path.resolve (__dirname), Entry:getcssentries (Css_pat     H.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 '),]},//if you still need to package JS, you can add a separate package JS processing "according to their own needs"//{//entry:{},//output:{},//. .. Omit//}]

There may be classmates still using webpack1.x, so here is the simple configuration of webpack1.x

Webpack version 1.x//... Other configurations are the same as webpack3.x module: {  loaders: [    {      test:/\.less$/,      loader:ExtractTextPlugin.extract (" Style-loader "," Css-loader "," Postcss-loader "," Less-loader ")    },  ]}plugins: [New Extracttextplugin (' [name]. CSS '),]//... Other configurations are the same as webpack3.x

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!