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