今天主要讲解下loader和plugin

loader 目前webpack搭建初始化的项目，是不识别javascript以外的语言模块，这就需要对应的loader将资源转化，加载进来。

1.已css举例，先安装 npm i -D style-loader css-loader

2.创建css文件

3.引入css文件

4.导入依赖配置

plugin Plugin 将注入 bundle.j 文件里的css 提取到单独的文件中，

安装插件

Install

# for webpack 3 
npm install --save-dev extract-text-webpack-plugin
# for webpack 2 
npm install --save-dev extract-text-webpack-plugin@2.1.2
# for webpack 1 
npm install --save-dev extract-text-webpack-plugin@1.0.1

引入代码

const ExtractTextPlugin = require("extract-text-webpack-plugin");
 
module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}