4.md

webpack-dev-server

webpack-dev-server 在webpack 官网上的 develop tools 获取，用于监听文件变化，实现时时打包，时时刷新功能。

• 作为项目依赖安装： $ npm i --save-dev webpack-dev-server

• 依照上篇博客修改package.json文件中的scripts

      "develop": "webpack-dev-server --config webpack.develop.config.js --devtool eval --progress --colors --hot --content-base src"

• 运行 $ npm run develop 将会在src目录下搭建一个web服务器， 访问 ： http://localhost:8080 就会看到效果。

loaders

webpack supports pre-processing files via loaders. This allows you to bundle any static resource not only javascript. You can easily write your own loaders running in Node.js. webpack 通过加载器支持预处理文件，这会让你打包不止于js的任何静态文件。你可以在nodejs环境中写自己的加载器。

通过安装几个加载器来举例说明：

1. babel-loader

• 安装 $ npm i --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react

• 安装完上述几个插件后就可以转换jsx和ES6的语法了。

• 修改webpack配置文件中的 module, 下面loaders 是个数组，表示不同的加载器

      module: {
          loaders: [
              {
                  test: /\.jsx?$/, // 用正则来匹配文件路径，这段意思是匹配 js 或者 jsx
                  loader: 'babel',// 加载模块 "babel" 是 "babel-loader" 的缩写
                  query:{
                      presets: ['es2015', 'react']
                  }
              }
          ]
      }

2. sass-loader

用于处理sass文件

• 安装 $npm i --save-dev sass-loader

• 将sass处理器添加入loaders中

    {
        test:/\.scss$/,
        loader:'style!css!sass'
    }

3. url-loader

用于处理图片的引用关系，大图片直接引用，小图片会转成base64文件

• 安装： $ npm i --save-dev url-loader

• 将url-loader加入loaders中

      {
          test:/\(png|jpg|jpeg)$/,
          loader:'url?limit=10000&name=images/[name].[ext]'
      }

  说明： limit代表以字节为单位的图片在10000字节的时候会打包到bundle.js中，超出会进行图片地址的引用。name参数代表将打包的文件放入哪个文件夹下。

4. file-loader

具体用法在这里： github-file-loader 多用于移动文件使用

• 安装：$ npm i --save-dev file-loader

• 将file-loader加入loaders中, 具体用法还需尝试官方文档所示。

  {
          test:/\.(png|gif|jpg|jpeg)$/,
          loader:'file-loader?name=images/[name].[ext]'
  }