[译]webpack官网文档 ：指南 -- 11.开发

原创翻译，转载请注明出处。 

原文地址：https://webpack.js.org/guides/development/

 

在这一章里我们将介绍怎样开始开发，怎样从三个工具里选择一个进行开发。它假定你已经有了一个webpack配置文件。

 

调整你的文本编辑器

一些文本编辑器有一个“safe write”的功能并被默认为有效。结果一个文件被保存之后并没有被重新编译。

每种编辑器都有不同的方法来禁止它，最通常的做法是：

• Sublime Text 3：在用户设定里加入"atomic_save": false
• IntelliJ：在设定里查找“safe write“，并使它无效
• Vim：在你的设定里加上:set backupcopy=yes
• WebStorm：在 Preferences > Appearance & Behavior > System Settings里取消"safe write"选中。

 

Source Maps

当发生一个JavaScript例外的时候，你经常想知道哪个文件哪一行产生了这个错误。因为webpack把文件输出到一个或几个包里，所以跟踪文件很不方便。

Source maps能解决这个问题。有很多不同的设定 – 每一个都有它们的长处和短处。我们用这个来开始：

 

devtool: "cheap-eval-source-map"

 

 

选择一个工具

webpack可以在观察模式下使用。在这个模式下webpack监视文件，并且当文件被修改的时候重新编译。webpack-dev-server提供了一个易用的开发服务器，它可以快速的实时的重新加载。如果你已经有了一个开发服务器，并且想要充分的灵活性，webpack-dev-middleware可以被用作中间件。

webpack-dev-server和webpack-dev-middleware使用内存编译，意味着包文件不会被保存到磁盘上。这可以使编译更快，并且不会给你的文件系统添乱。

大多数情况下你会希望使用webpack-dev-server，因为它很容易上手，并且提供很多即用功能。

 

webpack观察模式

Webpack的观察模式会监视文件的变动。如果发现任何变动，它就会再次运行编译。

我们还希望在编译的时候能看到一个好看的进度条，运行下面的命令：

 

webpack --progress --watch

 

 

修改一个文件并且保存，你将会看到它正在编译。

观察模式没有考虑到服务器，所有你需要自己提供一个服务器。一个易用的服务器是serve。安装（npm i --save-dev serve）它之后，就可以在输出文件所在的目录上运行它

 

`npm bin`/serve

 

 

用npm脚本运行serve的话会更便利。可以在package.json里创建一个start脚本：

 

...
"scripts": {
  "start": "serve"
}
...

 

 

然后你可以在项目所在的目录里运行npm start来启动服务器。每次编译之后，你需要刷新浏览器才能看到变化。

 

在Chrome的开发者工具工作区使用观察模式

如果你想把Chrome设定成保存代码之后不用刷新页面就能看到变化的话，你需要用下面命令设置webpack，然后就可以持续的编辑并保存来自Chrome或者源代码的更改。

 

devtool: "inline-source-map"

 

 

在工作区使用观察模式会有一些缺陷：

• 大的代码块文件（一个超过1M的普通代码块）重新编译的时候，会让页面产生空白，这时你需要刷新浏览器
• 编译小代码块会比大代码块更快，因为inline-source-map会对源代码进行base64编码而变慢。

 

webpack-dev-server

webpack-dev-server提供一个能实时再加载的服务器。配置起来很简单。

前期准备，你得有一个引入包文件的index.html文件。假设output.filename就是bundle.js：

 

<script src="/bundle.js"></script>

 

从npm安装webpack-dev-server：

 

npm install webpack-dev-server --save-dev

 

安装完之后，你就应该能这样使用webpack-dev-server

 

webpack-dev-server --open

 

上面的命令应该能自动启动浏览器并打开http://localhost:8080 。

修改一个代码文件并点保存。你应该能从控制台上看到正在重新编译。编译完之后，也念会被刷新。如果控制台什么也没发生的话，你可能需要注意一下watchOptions。

现在实时重新加载已经OK了，你可以再进一步：模块热替换。它是一个接口，使不用刷新页面就能替换模块。

默认是使用行内模式（inline mode）。这种模式把需要实时再加载和显示编译错误的客户端注射到你的包里，在行内模式下你可以在开发者工具的控制台上看到编译错误和警告。

webpack-dev-server还可以做更多， 比如代理访问后端服务器。

 

webpack-dev-middleware

webpack-dev-middleware为那些基于连接的中间件栈服务。这对你已经有一个Node.js服务器或希望对服务器有全面地控制会非常有用。

中间件会让webpack在内存内编译文件。当一个编译正在运行的时候，它会延迟对一个文件的请求，直到编译完成。

首先，从npm安装依赖：

 

npm install express webpack-dev-middleware --save-dev

 

安装完之后，你可以像这样使用中间件：

 

var express = require("express");
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpack = require("webpack");
var webpackConfig = require("./webpack.config");
 
var app = express();
var compiler = webpack(webpackConfig);
 
app.use(webpackDevMiddleware(compiler, {
  publicPath: "/" // Same as `output.publicPath` in most cases.
}));
 
app.listen(3000, function () {
  console.log("Listening on port 3000!");
});

 

依据你在output.publicPath和output.filename定义的内容，访问http://localhost:3000/bundle.js就可以得到你的包。

默认上使用观察模式。还以使用懒模式，它只在对入口文件请求时进行编译。

是有对bundle.js请求的时候才编译：

 

app.use(webpackDevMiddleware(compiler, {
  lazy: true,
  filename: "bundle.js" // Same as `output.filename` in most cases.
}));

 

你还可以使用很多配置。

 

参考文献

SurviveJS - Automatic Browser Refresh

webpack your Chrome DevTools Workspaces

 

-- End --