管理输出

预先准备

project

 webpack-demo
  |- package.json
  |- package-lock.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!');
}

const path = require('path');

 module.exports = {
  entry: {
    index: './src/index.js',
    print: './src/print.js',
  },
   output: {
    filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
 };

设置 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: {
     index: './src/index.js',
     print: './src/print.js',
   },
  plugins: [
    new HtmlWebpackPlugin({
      title: '管理输出',
    }),
  ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
　　　clean: true,    // 重新打包时，先清理dist文件夹

}, };

执行npm run build打包，会生成index.html覆盖原来的文件

清理 `/dist` 文件夹

output.clean来配置

manifest

webpack 通过 manifest 追踪所有模块到输出的 bundle 之间的映射。

WebpackManifestPlugin 插件可以将 manifest 数据提取为 json 文件。

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
module.exports = {
   entry: {
     index: './src/index.js',
     print: './src/print.js',
   },
  plugins: [
    new HtmlWebpackPlugin({
      title: '管理输出',
    }),
    new WebpackManifestPlugin()
  ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
 };

输出manifest.json

{
  "index.js": "auto/index.bundle.js",
  "print.js": "auto/print.bundle.js",
  "index.html": "auto/index.html"
}

开发环境

设置开发环境：mode 设置为 'development'

webpack.config.js

const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   mode: 'development',
   entry: {
     index: './src/index.js',
     print: './src/print.js',
   },
   plugins: [
     new HtmlWebpackPlugin({
      title: 'Development',
     }),
   ],
 };

使用 source map

const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   mode: 'development',
   entry: {
     index: './src/index.js',
　　　print: './src/print.js'
   },
  devtool: 'inline-source-map',　　// 此设置必须mode为development时才起作用
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Development',
     }),
   ],
 };

有source-map后，能在控制台看到源代码。可以查看错误，如下：

选择一个开发工具

每次编译代码都需要手动运行 npm run build 会显得很麻烦

webpack 提供了几种可选方式帮助在代码发生变化后自动编译代码：

在多数场景中可能会使用 webpack-dev-server

使用观察模式

可以指示 webpack “观察”依赖图中所有文件的更改。如果其中一个文件被更新，代码将被自动重新编译，所以不必再去手动运行整个构建。

package.json

{
   "name": "webpack-demo","private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",　　// 观察模块
     "build": "webpack"
   },"devDependencies": {
     "html-webpack-plugin": "^4.5.0",
     "webpack": "^5.4.0",
     "webpack-cli": "^4.2.0"
   },
   "dependencies": {
     "lodash": "^4.17.20"
   }
 }

观察模式唯一的缺点是需要手动刷新浏览器才能看到修改后的实际效果。实现 webpack-dev-server 将能够自动刷新浏览器！

使用 webpack-dev-server

webpack-dev-server 提供了一个能够实时重新加载的基本的 web server。安装依赖如下：

npm install --save-dev webpack-dev-server

webpack.config.js

const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   mode: 'development',
   entry: {
     index: './src/index.js',
     print: './src/print.js',
   },
   devtool: 'inline-source-map',
  devServer: {
    static: './dist',
  },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Development',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
     clean: true,
   },
  optimization: {
    runtimeChunk: 'single',
  },
 };

以上配置告知 webpack-dev-server 将 dist 目录下的文件作为可访问资源部署在 localhost:8080。

在package.json中添加一个命令：

"scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch": "webpack --watch",
+    "start": "webpack serve --open",
     "build": "webpack"
   },

npm run start运行起来后，浏览器中 http://localhost:8080/ 访问页面

webpack-dev-server 具有许多可配置的选项。参阅配置文档以了解更多配置选项。