学习笔记(三)webpack实际开发中的应用

Posted on

现在我们来到我们的开发目录, 那么实际开发中吧我们的小技巧告诉大家

一、source map
在实际项目开发中，我们会常常遇到把几个文件(a.js, b.js, c.js)打包为一个bundle.js文件， 时常会遇到其中一个文件打包出错了,那么我们很难定位到错误位置，
为了更加容易地指认错误和警告， Javascript提供的source map功能，将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。

二、自动化构建工具
webpack watch model
webpack dev server
webpack dev middleware

实时监控代码，一旦代码被修改将自动重新编译

1
2
3
"script": {
    "watch": "webpack --watch"
}

使用webpack-dev-server
这个模块提供了一个简单的web服务,并且能实时重新加载

1
npm install --save-dev webpack-dev-servre

使用webpack-dev-middleware

他可以把webpack处理后的文件传递给一个服务器，也可以作为一个独立的模块使用.

0%