webpack--样式处理：style-loader，css-loader

1 安装

• css-loader处理样式: npm i -D css-loader@2
• style-loader处理样式插入：npm i -D style-loader

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack",
    "start": "webpack-dev-server --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^1.1.3",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.11.5"
  }
}

2 配置webpack.config.js：module中的rules

const HtmpWebpackPlugin=require('html-webpack-plugin');
const path=require('path');

module.exports={
  entry: './src/main.js',
  output:{
    path: path.resolve(__dirname,'dist'),
    filename: 'app.js'
  },
  plugins:[
    new HtmpWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html'
    })
  ],
  module:{
    rules:[
      {
        test: /\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  },
  devServer:{
    open: true,
    port: 9000
  }
}

3 写css文件：app.css

body{
  background-color: grey;
}

4 在main.js中引入css文件：

import a from './a'
import b from './b'
import c from './c'

import './app.css'

a()
b()
c()

5 测试：npm start