Use Webpack to "compile" your CSS and picture preliminary __web

Source: Internet
Author: User
Tags base64

Install Css-loader

$ NPM Install Css-loader Style-loader

The former (Css-loader) is to traverse your CSS, the latter (Style-loader) is for the style tag generation

It can be used to package the CSS, we add the configuration file

    loaders:[' style ', ' CSS ']

Then execute: Webpack command
HTML is as follows:

<! DOCTYPE html>

Preview Effect:

If the CSS contains pictures.
$ NPM Install Url-loader

Configuration file Join
test:/. (PNG) | (jpg) $/,
Loader: "url?limit=50000"
Limit parameter, representing if less than approximately 50k will automatically compress the Base64 encoded picture for you

To view a CSS file:

Div{color:red;background:url ("./1.jpg");}

View the last configuration file Webpack.config.js

Module.exports = {
    entry: "./es2015/index.js",//Representative entrance (total) file, can write multiple
    output: {
        path: "./ ES2015/",//output folder
        filename:" index-webpack.js "//Final package generated file name
    module: {
        loaders: [
                test: /\.js|jsx$/,//is a regular, to represent the JS or jsx suffix of the file to use the following loader
                loader: "Babel",
                query: {presets: [' es2015 ']}

                loaders:[' style ', ' CSS ']

                test:/\. PNG) | (jpg) $/,
                loader: "url?limit=50000"}}}

After the same execution of the Webpack command, let's see if the picture is loaded

We can see that the background image in the CSS is also successfully loaded and converted to base64.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.