Webpack Module loading CSS file and image address

Webpack supports CSS file loading and packaging, just install the appropriate loader and configure it in the configuration file.

The content of the loaded CSS file will be mixed with the JS content in the module, the benefit is that a JS file contains all the CSS and JS content, effectively reduce the number of HTTP requests, significantly improve the user experience of page response performance.

When loading a CSS file, if the CSS contains a reference address to the image, the compile-time Webpack will process the image resource and output it to the set Publicpath parameter location, which can be either a page-based relative address or an absolute address based on the root directory. Url-laoder will build an image folder at this address to store the images after processing.

  //ingress file Output configurationoutput: {path:'./js', FileName:'[Name].js', Publicpath:"/js/"    },    //plug-in itemsPlugins: [Commonsplugin,NewWebpack. Provideplugin ({$:"jquery",        /*React: "React", Reactdom: "React-dom",*/    }),/*New Webpack.optimize.CommonsChunkPlugin (' Vendor ', ' Vendor.min.js ')*/], module: {//Loader ConfigurationLoaders: [{test:/\.css$/, Loader:'Style-loader!css-loader'}, {test:/\. (JS|JSX) $/, loader:'Jsx-loader?harmony'}, {test:/\.scss$/, Loader:'Style!css!sass?sourcemap'}, {test:/\. (png|jpg) $/, loader:'Url-loader?limit=25000&name=images/[hash:8]. [Name]. [Ext]'}, {test:/\. (hbs|html) $/, loader:"Handlebars"},        ]    },

If you are wrong in compiling the times, but you check that you have installed a variety of loaders, compile still error, Friendship reminds you should go to reinstall the next file-loader, I have in the image address resolution inexplicable error, check for a long time, reinstall File-loader solve the problem.

Webpack Module loading CSS file and image address