webpack 中开发工具webpack-dev-server和常用loaders加载器的简单使用

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环境中写自己的加载器。

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

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']
          }
       }
     ]
  }

sass-loader

用于处理sass文件

• 安装

  $npm i --save-dev sass-loader

• 将sass处理器添加入loaders中

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

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参数代表将打包的文件放入哪个文件夹下。

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]'
  }