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

2024年5月28日 178次阅读 来源: 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.publicPath和output.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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞