webpack core concepts _ (Chapter III) _ using the loader packaged static resources (style articles - under)

Supplementary style package:
1.CSS-Loader common configuration
if you want to configure css-loader, you can not write a string, and write an object

      {
        test: /\.scss$/,
        use: [
          'style-loader', 
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          }, 
          'sass-loader',
          'postcss-loader'
        ]
      }

Configuration options importLoaders property, this is the meaning of configuration parameters in scss file by file import scss introduced in this manner, we are also going to go before the introduction of the previous two loader, which is postcss-loader and sass-loader, so It would guarantee either directly to the introduction of scss file js file, or go to the introduction of scss file scss file will in turn execute all loader from bottom to top, will not have any problems.
2.css packaged modular
scss style we introduced in js files, css style will affect another file
for example, we introduced scss files in index.js

import './index.scss'
import createImage from './createdImage'
createImage ()

We write createImage.js file

import image from './image.jpg'
function createdImage () {
  var img = new Image();
  img.src = image
  img.classList.add('image')
  var root = document.getElementById('root')
  root.append(img)
}
export default createdImage

Then run, can be found on the page render index.scss style, the style introduced in index.js can affect createdImage.js style, that is, the introduction of this style is global, it is easy to introduce such a problem, easy global pollution, so there have css module concept of
modular css
modular css refers only valid in this module, we have to add modules property in webpack.comfig.js the configuration items in the css-loader

         {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: true
            }
          },

Css meaning open, modular package
introduced also changes: import style from './index.scss'
this time run, we found that the introduction of style has changed not affect createdImage.js style, only the style introduced in createdImage.js to take effect, a way to add style have to be changed to style.类名form

import style from './index.scss'
import image from './image.jpg'
function createdImage () {
  var img = new Image();
  img.src = image
  img.classList.add(style.image)
  var root = document.getElementById('root')
  root.append(img)
}
export default createdImage

Can run successfully
when we configured the css nodule this property, we can write import from this syntax in the code, style, grammar bring the benefits of this, the current document or module in the style and other documents not coupling and there will be no conflict, so we write the style is very independent.
3. How to use webpack packed font file
in iconfont icon to download locally. Obtained after extracting file

iconfont.js you can delete useless
how to package a font file?
We iconfont.ttf, iconfont.eot, iconfont.svg, iconfont.woff on new src directory under four font file a font folder, iconfont.css written statement fonts, put it in the src directory first modify the font file referenced address, instead .font/字体文件名

providing us with some class in iconfont.scss, we can use these icons of

use:

import './iconfont.scss'
var root = document.getElementById('root')
root.innerHTML = '<div class="iconfont iconfood-hotdog">热狗</div>'

But this time the project will run error, because webpack does not recognize eot, ttf font file that ends with how to pack, so for this font file, but also in webpack configuration, you can use the file-loader

      {
        test: /\.(eot|ttf|svg|woff)$/,
        use: {
          loader: 'file-loader'
        }
      },

In fact, we only need to use file-loader to move from the src directory dist directory
then can be displayed on the page icon of the normal iconfont

webpack packed font file is complete

Learning the official website: DOCUMENTATION ----> GUIDES -----> Asset Management
DOCUMENTATION ----> LOADERS -----> Sass-Loader, CSS-Loader, Loader-style, postcss-Loader, to the style of packaged a comprehensive understanding.