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

开辟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

    原文作者:farmerz
    原文地址: https://segmentfault.com/a/1190000008533754
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞