webpack core concepts _ (Chapter III) _ Loader package using static resources (style articles - on)

Loader package style

When we write a style file in src, and use the style introduced in index.js the file, run the error found

import './index.css'
......
img.classList.add('image')

This is because webpack only recognizes the end of js files, css does not recognize the end of the module, so the packaging error. It needs to be done in webpack.config.js configured
when we packed css, the need to use two loader, so it can not be the object of use, to become an array of

      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },

This style-loader installation at the command line, css-loader two packages npm install style-loader css-loader -D
then package npm run bundle to be packaged successful
style-loader, the role of css-loader is what
css-loader will help us analyze a few css file the relationship between, eventually merge these files into some css css.
effect style-loader is obtained after css css-loader generated content, style-loader will mount to the head portion of the contents of this page

the tab is mounted onto the style-loader. So when dealing with packaged css file, use css-loader with the style-loader work together to use, how to do it
and sometimes we do not want to use css in the file, but uses less, sass, stylus and so pre-css is, how to do it?
We will change the style of the form of sass

body {
  .image {
    width: 150px;
    height: 150px;
  }
}

Index.js then incorporated in import './index.scss', change the configuration of the end scss in webpack.config.js

      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader']
      },

You can run successfully, but did not work on the page.

In the head is not a css syntax, but the original sass grammar, browsers do not recognize
it when we went to pack scss file, it needs to translate to the other loader grammar sass into css syntax, we want to use sass- loader

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

This operation will complain because the installation sass-loader must be installed node-sass npm install sass-loader node-sass -D
installing it
can be seen from the above configuration file to scss end loader has three configurations

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

In webpack configuration inside, loader is a sequential order from bottom to top, right to left, so go pack a scss file, will first perform sass-loader, the code of sass translation, translated into css after the code is given to the css-loader, after the process to give good style-loader, and finally hanging on the page.
When we use the new css syntax in the page when

body {
  .image {
    width: 150px;
    height: 150px;
    transform: translate(100px, 100px)
  }
}

Css3 write new features, the general prefix to indicate manufacturers, -webkit-transform, -m and the like, in which to write css prefixes these companies would be more trouble, there are some other loader will help us achieve this Auto manufacturers add a prefix function, the loader-loader is called postcss
postcss-loader using the
first installation: npm i -D postcss-loader
is installed npm install autoprefixer -D
in the directory created postcss.config.js profile, do some configuration in there

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

postcss-loader has a configuration file postcss.config.js, when it is referenced or packaged to be used postcss-loader, will go to use autoprefixer plug-in, run the project
view the style on the page

automatically on the multi-webkit prefix manufacturers prefix, this is postcss corresponding autoprefixer this plugin vendors to add a prefix
specific usage can refer to many official website.