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

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"

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