Original translation, please indicate the source when reprinting.
Original address: https://webpack.js.org/guides/development/
In this chapter we will introduce how to start development and how to choose one of three tools for development. It assumes you already have a webpack config file.
Adjust your text editor
Some text editors have a "safe write" feature that is enabled by default. As a result a file is saved and not recompiled.
Each editor has a different way of disabling it, the most common being:
- Sublime Text 3: Add "atomic_save": false to user settings
- IntelliJ: look for "safe write" in settings and disable it
- Vim: add :set backupcopy=yes to your settings
- WebStorm: Uncheck "safe write" in Preferences > Appearance & Behavior > System Settings.
Source Maps
When a JavaScript exception occurs, you often want to know which line of the file produced the error. Since webpack outputs files into one or several bundles, it is inconvenient to keep track of files.
Source maps can solve this problem. There are many different settings - each with their strengths and weaknesses. We start with this:
devtool: "cheap-eval-source-map"
choose a tool
webpack can be used in watch mode. In this mode webpack watches files and recompiles them when they are modified. webpack-dev-server provides an easy-to-use development server with fast real-time reloading. If you already have a development server and want full flexibility, webpack-dev-middleware can be used as middleware.
webpack-dev-server and webpack-dev-middleware use in-memory compilation, which means that bundle files are not saved to disk. This makes compilation faster and doesn't clutter your filesystem.
Most of the time you'll want to use webpack-dev-server because it's easy to get started with and offers a lot of functionality out of the box.
webpack watch mode
Webpack's watch mode monitors files for changes. If it finds any changes, it will run the compilation again.
We also want to see a nice progress bar when compiling, run the following command:
webpack --progress --watch
Modify a file and save it, and you'll see it compile.
Watch mode does not take into account the server, so you need to provide a server yourself. An easy to use server is serve. Once you have it installed (npm i --save-dev serve), you can run it on the directory where the output file is located
`npm bin`/serve
It is more convenient to run serve as an npm script. You can create a start script in package.json:
...
"scripts": {
"start": "serve"
}
...
Then you can start the server by running npm start in the directory where your project is located. After each compilation, you need to refresh your browser to see the changes.
Using Watch Mode in Chrome's Developer Tools Workspace
If you want to set Chrome to save the code to see the changes without refreshing the page, you need to set up webpack with the following command, and then you can continue editing and saving changes from Chrome or source code.
devtool: "inline-source-map"
Using watch mode in the workspace has some drawbacks:
- When a large code block file (a common code block over 1M) is recompiled, the page will be blank, then you need to refresh the browser
- Compiling small code blocks will be faster than large code blocks, because inline-source-map base64 encodes the source code and is slower.
webpack-dev-server
webpack-dev-server provides a live reloading server. It is simple to configure.
In the preliminary preparation, you must have an index.html file that introduces the package file. Assuming output.filename is bundle.js:
<script src="/bundle.js"></script>
Install webpack-dev-server from npm:
npm install webpack-dev-server --save-dev
Once installed, you should be able to use webpack-dev-server like this
webpack-dev-server --open
The above command should automatically launch the browser and open it http://localhost:8080.
Modify a code file and click Save. You should be able to see from the console that the recompile is in progress. After compiling, it will also be refreshed. If nothing happens to the console, you might want to pay attention watchOptions.
Now that live reloading is OK, you can go one step further: hot module replacement. It is an interface that enables modules to be replaced without refreshing the page.
The default is to use inline mode. This mode injects clients into your package that require live reloading and display compilation errors. In inline mode you can see compilation errors and warnings on the developer tools console.
webpack-dev-server can do more, such as proxy access to backend servers.
webpack-dev-middleware
webpack-dev-middleware serves those connection-based middleware stacks. This is useful if you already have a Node.js server or want to have full control over the server.
Middleware will let webpack compile files in memory. While a compilation is running, it delays requests for a file until the compilation is complete.
First, install the dependencies from npm:
npm install express webpack-dev-middleware --save-dev
Once installed, you can use the middleware like this:
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!");
});
Depending on where you are output.publicPathand output.filename定义的内容，访问http://localhost:3000/bundle.js you can get your bundle.
Watch mode is used by default. Also use lazy mode, which compiles only when the entry file is requested.
It is compiled only when there is a request for bundle.js:
app.use(webpackDevMiddleware(compiler, {
lazy: true,
filename: "bundle.js" // Same as `output.filename` in most cases.
}));
You can also use a lot of configuration.
references
SurviveJS - Automatic Browser Refresh
webpack your Chrome DevTools Workspaces
-- End --