Webpack 指南（上）

一. 起步

1. 使用配置文件

• 目录结构

|- /dist
   |- index.html
|- /src
   |- index.js
|- webpack.config.js

• webpack.config.js

const path = require('path');

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

2. 使用 NPM Scripts

{
  "scripts": {
    "build": "webpack --config webpack.config.js"
   },
}

二. 管理资源

• 为了使 webpack 能够打包处理除了 JavaScript 的其他类型文件（.css, .jpg, .ts, ...），需要使用 Loader 来做中间处理
• 首先应当先安装对应的 Loader

// 处理 CSS
npm install --save-dev style-loader css-loader
// 处理图片（png|svg|jpg|gif）
npm install --save-dev file-loader

• 对 webpack.config.js 的相应配置

module: {
  rules: [{
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
  }],
},

• webpack 会分析文件的类型并用正则去匹配，找到对应的配置，并使用指定的一个或多个 Loader 进行流式解析
• 在适当的情况下，可以将模块与资源分离到同一目录中并进行封装，在某些场合下，这样使你的组件/模块更具备可移植性，统一的放置资源会造成强烈的耦合，然而并没有一成不变的配置方式，最好的永远是最适合自己项目应用场景的

三. 管理输出

• 当输出文件涉及到 hash 文件名时，没办法在根 index.html 中固定的指定 src，然而可以使用 HtmlWebpackPlugin 来解决这个问题
• 当使用自动的生成构建时，目标文件夹可能存在曾经的遗留文件，因为文件的名称存在 hash，所以并不会替代掉旧的文件，可以使用 CleanWebpackPlugin 插件来清空 dist 文件夹

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[hash:8].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({ title: 'Hello Webpack!' }),
  ],
};

四. 开发

1. 使用 Source Map

// webpack.config.js
devtool: 'inline-source-map',

2. 使用 webpack-dev-server

• 需要安装 webpack-dev-server 插件

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

• 配置 webpack.config.js 在 localhost:8080 下建立服务，并将 dist 目录下的文件，作为可访问文件

devServer: {
  contentBase: './dist',
},

• 使用 webpack-dev-server --open 命令运行开发服务器

3. 使用 webpack-dev-middleware

• webpack-dev-middle 将 webpack 处理的文件发送到服务器的包装器，它在 webpack-dev-server 内部使用，但它可以作为单独的包引用，以允许更多的自定义设置，通常将其和服务器相结合来使用
• 首先安装 express 和 webpack-dev-middleware

npm install express webpack-dev-middleware --save-dev

• 修改 webpack.config.js 的 publicPath

output: {
  //...
  publicPath: '/',
},

• 创建 server.js

const 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);

app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

app.listen(3000);

• 使用 node server.js 来运行服务器，启动浏览器并进入 http://localhost:3000 来访问，当源码的内容发生变化时，webpack-dev-middleware 会检测到变化并将其在内存中写入更新，但这并不会导致浏览器的自动刷新，必须手动刷新才会让浏览器感受到本次的变化，而并不需要重新启动服务器

4. 使用 HMR

• 修改 webpack.config.js

const webpack = require('webpack');

devServer: {
  contentBase: './dist',
  hot: true,
},

plugins: [new webpack.HotModuleReplacementPlugin()],