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

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

{
    test:/\.css$/,
    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 = {
    //configuration
    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 ']}
            },

            {
                test:/\.css$/,
                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.