本文主要是介绍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 或者 jsxloader: '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]' }
这篇关于webpack 中开发工具webpack-dev-server和常用loaders加载器的简单使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
