webpack 开发模式管理 Development

GitHub 学习 Demo。

接下来将一些开发时的 webpack 配置。

warnning ： 本指南中的工具仅用于开发，请避免在生产中使用它们！

先把 mode 属性变为 development.

# webpack.config.jsconst path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {
+   mode: 'development',entry: {app: './src/index.js',print: './src/print.js'},plugins: [new CleanWebpackPlugin(['dist']),new HtmlWebpackPlugin({title: 'Development'})],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}};
复制代码

使用 source maps

当webpack捆绑您的源代码时，很难找到错误和警告到其原始位置。因为此时错误都是从 bundle.js 里抛出的，而这是一个经过编译的文件。。。

JavaScript 提供 source maps ，能将编译后的代码映射回原始源代码。 如果错误源自b.js，源地图将准确地告诉您。

这里选用 devtool: 'inline-source-map' 选项达到这一目的。关于 devtool 的更多选项及其功能，请点链接阅读。

# webpack.config.jsconst path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {mode: 'development',entry: {app: './src/index.js',print: './src/print.js'},
+   devtool: 'inline-source-map',plugins: [new CleanWebpackPlugin(['dist']),new HtmlWebpackPlugin({title: 'Development'})],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}};# src/print.js
# 写一段错误语法的代码export default function printMe() {
-   console.log('I get called from print.js!');
+   cosnole.log('I get called from print.js!');}
复制代码

编译后回发现报错：

Uncaught ReferenceError: cosnole is not definedat HTMLButtonElement.printMe (print.js:2)
复制代码

选择一个 Development Tool

现在的程序，每次需要查看新的结果，都要重新编译一次，非常的麻烦。
有几种方法可以实现，你代码发生变化时，自动从新编译:

• wepback 的 Watch Mode （观察模式）
• webpack-dev-server
• webpack-dev-middleware

大多数情况下都会选用 webpack-dev-server。但接下来每个都会讲到。

Watch Mode

使用 webpack 的命令行选项 --watch 实现。
添加一段 npm script :

  {"name": "development","version": "1.0.0","description": "","main": "webpack.config.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1",
+     "watch": "webpack --watch","build": "webpack"},"keywords": [],"author": "","license": "ISC","devDependencies": {"clean-webpack-plugin": "^0.1.16","css-loader": "^0.28.4","csv-loader": "^2.1.1","file-loader": "^0.11.2","html-webpack-plugin": "^2.29.0","style-loader": "^0.18.2","webpack": "^3.0.0","xml-loader": "^1.2.1"}}
复制代码

现在从命令行运行npm run watch，看看webpack如何编译你的代码。 您可以看到它不会退出命令行，因为脚本当前正在查看您的文件。

此时当你保存代码修改的时候，就会促发重新编译。

但这个功能的缺点就是，该功能仅是监听到代码变化后重新编译，但浏览器不会自定更新变化。webpack-dev-server 可以解决这个问题。

webpack-dev-server

webpack-dev-server为您提供了一个简单的Web服务器，并能够使用实时重新加载。 我们来设置一下：

依赖

npm install --save-dev webpack-dev-server
复制代码

修改配置

# webpack.config.jsconst path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {mode: 'development',entry: {app: './src/index.js',print: './src/print.js'},devtool: 'inline-source-map',
+   devServer: {
+     contentBase: './dist'
+   },plugins: [new CleanWebpackPlugin(['dist']),new HtmlWebpackPlugin({title: 'Development'})],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}};
复制代码

tips :
webpack-dev-server在编译后不会写任何输出文件。 相反，它将捆绑文件保存在内存中并为它们提供服务，就好像它们是安装在服务器根路径上的真实文件一样。

如果您的页面希望在不同的路径中找到捆绑包文件，则可以使用dev服务器配置中的publicPath选项进行更改。

修改 npm script

# package.json{"name": "development","version": "1.0.0","description": "","main": "webpack.config.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","watch": "webpack --watch",
+     "start": "webpack-dev-server --open","build": "webpack"},"keywords": [],"author": "","license": "ISC","devDependencies": {"clean-webpack-plugin": "^0.1.16","css-loader": "^0.28.4","csv-loader": "^2.1.1","file-loader": "^0.11.2","html-webpack-plugin": "^2.29.0","style-loader": "^0.18.2","webpack": "^3.0.0","xml-loader": "^1.2.1"}}
复制代码

现在我们可以从命令行运行npm start，我们将看到我们的浏览器自动加载我们的页面。 如果您现在更改任何源文件并保存它们，Web 服务器将在编译代码后自动重新加载。

关于 webpack-dev-server 的更多选项。

webpack-dev-middleware

webpack-dev-middleware是一个包装器，它将 webpack 处理的文件发送到服务器。 这在webpack-dev-server内部使用，但是它可以作为单独的包提供，以便在需要时允许更多自定义设置。 我们将看一个将webpack-dev-middleware与express server服务器相结合的示例。

安装依赖

npm install --save-dev express webpack-dev-middleware
复制代码

修改配置

现在我们需要对webpack配置文件进行一些调整，以确保中间件能够正常运行：

# webpack.config.jsconst path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {mode: 'development',entry: {app: './src/index.js',print: './src/print.js'},devtool: 'inline-source-map',devServer: {contentBase: './dist'},plugins: [new CleanWebpackPlugin(['dist']),new HtmlWebpackPlugin({title: 'Output Management'})],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist'),
+     publicPath: '/'}};
复制代码

publicPath 将在我们的服务器脚本中使用，以确保在http：// localhost：3000上正确提供文件。 我们稍后会指定端口号。 下一步是设置我们的自定义express server服务器：

创建 server

  webpack-demo|- package.json|- webpack.config.js
+ |- server.js|- /dist|- /src|- index.js|- print.js|- /node_modules# server.jsconst express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {publicPath: config.output.publicPath
}));// Serve the files on port 3000.
app.listen(3000, function () {console.log('Example app listening on port 3000!\n');
});
复制代码

现在添加一个npm script，使其更容易运行服务器：

# package.json{"name": "development","version": "1.0.0","description": "","main": "webpack.config.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","watch": "webpack --watch","start": "webpack-dev-server --open",
+     "server": "node server.js","build": "webpack"},"keywords": [],"author": "","license": "ISC","devDependencies": {"clean-webpack-plugin": "^0.1.16","css-loader": "^0.28.4","csv-loader": "^2.1.1","express": "^4.15.3","file-loader": "^0.11.2","html-webpack-plugin": "^2.29.0","style-loader": "^0.18.2","webpack": "^3.0.0","webpack-dev-middleware": "^1.12.0","xml-loader": "^1.2.1"}}
复制代码

运行 npm run server，浏览器打开 http：// localhost：3000。 您应该看到您的webpack应用程序正在运行并运行！

但是，你会发现更新代码时只会重新编译。如果需要热更新功能需要自己配置你得服务器脚本。

这种自定义开发服务器的方式非常灵活，但需要你具备一定的 node.js 基础。

NEXT

既然您已经学会了如何自动编译代码并运行一个简单的开发服务器，下一步就来认识 Hot Module Replacement 热模块切换。