webpack2.x 中文文档 翻译 之 开发Development

farmerz

开发Development

在这篇中我们将说明怎样开始开发,以及增从三个工具中择一进行开发。
假使你已经设置了webpack.config.js设置文件。

该文档已在webpack2.x中存在,点击这里

永远不要再生产产品中使用这些工具,绝对不要

调整你的编辑器 Adjusting Your Text Editor

一些编辑器有安全模式,导致文件在保存时不能编译。

不同的编辑器有不同的方式,一些常用的是:

  • Sublime Text 3 -添加"atomic_save":false到你的用户设置中

  • intelliJ 搜索"safe write" 并且设置成无效。

  • Vim 设置:set backupcopy=yes到你的设置中

Source Mpas

当javascript出错时,你总是想知道到底是哪一行出错,但是因为webpack是编译输出
的文件,所以导致这不是那么容易。

Source mpas就是用来解决这个问题。这里有很多的设置每一种都有他们自己的优点
和缺点。开始之前,我们需要这样设置。

devtool:"cheap-eval-source-map

选择一个工具 Choosing a Tool

webpack可以使用一个监视模式(watch mode),在这种模式下,当你所监视的文件发生变化时
就会重新编译文件。webpack-dev-server提供了一个简单的开发服务器,能够实现实时预览功能。
如果你已经有一个开发服务器,并且想更灵活些,·webpack-dev-middleware能够作为中间件(middleware)。

webpack-dev-server和webpack-dev-midddleware使用内存编译(in-memory compilation),也就是说,
打包的文件不会保存到硬盘中。这使得变异速度更快,导致更少的文件错误。

在大多数情况下,你将想要使用webpack-dev-server,因为它开始项目最简单,并且提供了很多开箱即用的功能。

监视模式 webpack Watch mode

该模式下,webpack监视文件变化,如果检测到变化,webpack将会重新编译文件。
在编译时我们可以添加个可视化的进度条。命令如下

webpack --progress --watch

修改文件,并保存。你将看到重新编译。

watch mode仅仅是个服务器,所以你需要提供一些东西。一个简单的服务器是serve.通过(npm i serve -g)下载。之后你就可以在输出文件的目录启动它。

serve

webpack-dev-server

webpack-dev-server提供了一个服务器兼实时预览功能。很容易开始。
开始之前,确保你已经创建了一个index.html文件,并且引入了编译后的文件。假设这个变异后的文件(output.filename)是bundle.js.

<script src='/bundle.sj'></script>

在npm中下载webpack-dev-server。

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

下载完成之后你可以这样启动它

webpack-dev-server --open
如果控制台提醒这个指令无效,可以尝试
`node_modules/.bin/webpack-dev-server`.
最好的方法是在`package.json`中添加命令,如下:
`"script":{"start":"webpack-dev-server"}`

上述命令会使浏览器自动打开到http://localhost:808地址。

修改项目的一个文件并保存。控制台将会显示重新编译。做完这些,页面会刷新。如果控制台没有变化,
或许是watchOptions需要修改下。

上述一切ok,你可以更进一步: Hot Module Replacement。这是一个接口,能够实现页面不刷新的情况下替换模块。
查看怎样设置HMR

默认情况下使用的是'inline'模式。这种模式下——实时加载是必须的,并且显示绑定文件中的错误提示。开发时这种模式
会在控制台现实编译的错误以及警告提醒。

webpack-dev-server能够做很多事,例如代理请求到你的后台服务器。更多使用和功能查看
开发服务器文档(devSever documentation)

webpack 开发中间件 webpack-dev-middleware

webpack-dev-middleware 的作用是连接中间件。当你已经使用了node服务器时,或者想更多的控制服务器,这个是很有用的。

中间件(middleware)能够保持webpack在内存中编译。当变异进行时,它能够延迟访问到编译完成时。

从npm下载这个依赖。

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

下载完成,如下使用。

let express = require("express");
let webpackDevMidddleware = require("webpack-dev-middleware");
let webpack = require("webpack");
let webpackConfig = require("./webpack.config");

let app = express();
let compiler = webpack(webpackConfig);

app.use(webpackDevMidddleware(compiler,{
  publicPath:"/"  //与'output.publicPath'相同
}));

app.listen(3006,(){
  console.log("监听端口是3000!");
});

取决于你所设置的output.publicPathoutput.filename,你的打包文件现在可以在http://localhost:3006/bundle.js访问到。

默认情况下使用的watch mode,也可以使用lazy mode,这个模式下仅当访问入口文件时才进行编译。

lazy mode设置如下

app.use(webpackDevMidddleware(compiler,{
  lazy:true,
  filename:"bundle.js"
}));

这里有更多你可用的设置。查看devServer decumentation

阅读 2.1k

前端这两年(2016~)
近几年来前端的变化记录

可可西里,可可西里,我只是想去看一看。

1.2k 声望
53 粉丝
0 条评论

可可西里,可可西里,我只是想去看一看。

1.2k 声望
53 粉丝
宣传栏