webpack中文网(二)管理输出、HtmlWebpackPlugin、Manifest、开发(source map 、webpack-dev-server、localhost:8080、webpack-dev-middleware【中间件+express】)、HMR(Vue Loader)
总结:
source map
- 如果将三个源文件(
a.js
,b.js
和c.js
)打包到一个 bundle(bundle.js
)中,而其中一个源文件包含一个错误,那么堆栈跟踪就会简单地指向到bundle.js
。- 更容易地追踪错误和警告
- 将编译后的代码映射回原始源代码。如果一个错误来自于
b.js
,source map 就会明确的告诉你。webpack-dev-server
- 提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading)
- 修改配置文件(webpack.config.js),告诉开发服务器(dev server),在哪里查找文件
- 让我们添加一个 script 脚本(package.json),可以直接运行开发服务器(dev server)
webpack-dev-middleware(中间件)
- 搭配express可以在网页中直接输入
http://localhost:3000
,你应该看到你的webpack 应用程序已经运行!HMR模块热替代
简介
- 在运行时更新各种模块,而无需进行完全刷新
- HMR 不适用于生产环境,这意味着它应当只在开发环境使
问题
- 模块热替换可能比较难掌握
- 很多其他地方可以轻松地让人犯错。幸运的是,存在很多 loader(其中一些在下面提到),使得模块热替换的过程变得更容易
HMR修改样式表
npm install --save-dev style-loader css-loader
借助于
style-loader
的帮助,CSS 的模块热替换实际上是相当简单的。
- 此 loader 支持用于 vue 组件的 HMR,提供开箱即用体验。
1. 管理输出
本指南继续沿用
管理资源
指南中的代码示例。
到目前为止,我们在 index.html
文件中手动引入所有资源,然而随着应用程序增长,并且一旦开始对文件名使用哈希(hash)]并输出多个 bundle,手动地对 index.html
文件进行管理,一切就会变得困难起来。然而,可以通过一些插件,会使这个过程更容易操控。
预先准备
首先,让我们调整一下我们的项目:
project
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
+ |- print.js
|- /node_modules
我们在 src/print.js
文件中添加一些逻辑:
src/print.js
export default function printMe() {
console.log('I get called from print.js!');
}
并且在 src/index.js
文件中使用这个函数:
src/index.js
import _ from 'lodash';
+ import printMe from './print.js';
function component() {
var element = document.createElement('div');
+ var btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+ btn.innerHTML = 'Click me and check the console!';
+ btn.onclick = printMe;
+
+ element.appendChild(btn);
return element;
}
document.body.appendChild(component());
我们还要更新 dist/index.html
文件,来为 webpack 分离入口做好准备:
dist/index.html
<!doctype html>
<html>
<head>
- <title>Asset Management</title>
+ <title>Output Management</title>
+ <script src="./print.bundle.js"></script>
</head>
<body>
- <script src="./bundle.js"></script>
+ <script src="./app.bundle.js"></script>
</body>
</html>
现在调整配置。我们将在 entry 添加 src/print.js
作为新的入口起点(print
),然后修改 output,以便根据入口起点名称动态生成 bundle 名称:
webpack.config.js
const path = require('path');
module.exports = {
- entry: './src/index.js',
+ entry: {
+ app: './src/index.js',
+ print: './src/print.js'
+ },
output: {
- filename: 'bundle.js',
+ filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
执行 npm run build
,然后看到生成如下:
Hash: aa305b0f3373c63c9051
Version: webpack 3.0.0
Time: 536ms
Asset Size Chunks Chunk Names
app.bundle.js 545 kB 0, 1 [emitted] [big] app
print.bundle.js 2.74 kB 1 [emitted] print
[0] ./src/print.js 84 bytes {
0} {
1} [built]
[1] ./src/index.js 403 bytes {
0} [built]
[3] (webpack)/buildin/global.js 509 bytes {
0} [built]
[4] (webpack)/buildin/module.js 517 bytes {
0} [built]
+ 1 hidden module
我们可以看到,webpack 生成 print.bundle.js
和 app.bundle.js
文件,这也和我们在 index.html
文件中指定的文件名称相对应。如果你在浏览器中打开 index.html
,就可以看到在点击按钮时会发生什么。
但是,如果我们更改了我们的一个入口起点的名称,甚至添加了一个新的名称,会发生什么?生成的包将被重命名在一个构建中,但是我们的index.html
文件仍然会引用旧的名字。我们用 HtmlWebpackPlugin
来解决这个问题。
设定 HtmlWebpackPlugin
首先安装插件,并且调整 webpack.config.js
文件:
npm install --save-dev html-webpack-plugin
webpack.config.js
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'Output Management'
+ })
+ ],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
在我们构建之前,你应该了解,虽然在 dist/
文件夹我们已经有 index.html
这个文件,然而 HtmlWebpackPlugin
还是会默认生成 index.html
文件。这就是说,它会用新生成的 index.html
文件,把我们的原来的替换。让我们看下在执行 npm run build
后会发生什么:
Hash: 81f82697c19b5f49aebd
Version: webpack 2.6.1
Time: 854ms
Asset Size Chunks Chunk Names
print.bundle.js 544 kB 0 [emitted] [big] print
app.bundle.js 2.81 kB 1 [emitted] app
index.html 249 bytes [emitted]
[0] ./~/lodash/lodash.js 540 kB {
0} [built]
[1] (webpack)/buildin/global.js 509 bytes {
0} [built]
[2] (webpack)/buildin/module.js 517 bytes {
0} [built]
[3] ./src/index.js 172 bytes {
1} [built]
[4] multi lodash 28 bytes {
0} [built]
Child html-webpack-plugin for "index.html":
[0] ./~/lodash/lodash.js 540 kB {
0} [built]
[1] ./~