webpack CSSS treatment loader

concept:

First to introduce loader, before we have to deal with webpack we write js code and related webpack automatically handles dependencies between js. 
However, we are not only in the development of basic js code processing, we also need to load css, pictures, including some senior ES6 will turn into ES5 code 
will turn into ES5 TypeScript code, scss, less turn into css, the .jsx, .vue files into js files, etc. 
For the ability webpack itself, for the conversion of these are not supported. 
This time gave webpack extends the loader to handle these files. 

Directory Structure:

 

 

In the src directory, create a css file, which creates a normal.css file. 
We can also re-organize the directory structure of the file will be scattered js js files in a folder. 
normal.css code is very simple, that is, the body is set to red 
, however, this time in the style normal.css no effect, because we do not refer to it. 
webpack can not find it, because we have only one entrance, webpack will start looking for other dependent files from the entrance.

Repackaging, the following error occurs:

 

 

 

This error tells us: Load normal.css file must have a corresponding loader

Installation loader:

npm install --save-dev css-loader

npm install style-loader --save-dev

While webpack.config.js configured as follows:

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

css-loader is only responsible for loading css files, style-loader is responsible for specific css styles embedded in the document, two less any one css file will not take effect 
final webpack.config.js file as follows:

the require path = const ( 'path') // derived node path is built by init initialization packet NPM obtained package.json 

module.exports = {   // derived inlet and outlet path 
    entry: './src/main.js', // entry file 
    Output: { // dynamic access path 
        path: path.resolve (__ dirname, 'dist'), // Resolve is a node carrying path of joining __dirname global variable for storing the current path of the project 
        filename: 'bundle.js '
    },
    // module: for example interpret CSS, how to convert the picture, compression 
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    },
    // plug-ins, templates, and functions for the production of 
    plugins: [

    ],
    // Configure webpack development services 
    devServer: {

    }
}