Webpack (四) -- 开发环境

devtool

可以直接使用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 来替代使用 devtool 选项
不要同时和 devtool 使用

source map

?? soucre map 简介

• 用于将编译后的代码映射回源代码
• 方便追踪错误

devServer

webpack-dev-server

提供一个具有 live reloading 功能的 web server

  devServer: {
    contentBase: path.resolve(__dirname, ‘dist‘), // dev-server 访问目录
    compress: true,  // 为每个静态文件开启 gzip compression：
    port: 8090,
    open: true  // 自动打开浏览器
  },

? 代码分离

分离更小的 bundle，按需加载，按序加载

?? 常用的代码分离方式

• 入口起点: 配置 entry 合理化入口
• 防止重复: 使用插件去重和分离 bundle (SplitChunksPlugin)
• 动态导入: 通过模块的内联函数调用来分离代码

入口 entry point

防止重复

chunk 根据 webpack 之间的父子以来关系生存，SplitChunksPlugin 为了避免他们之间的重复依赖

动态导入

使用 import， import 会返回一个 Promise 对象，写法为

component: import(‘..‘)

预加载 (prefetch/preload module)

import(/* webpackPrefetch: true */ ‘./path/to/LoginModal.js‘)

会生成一个带有 ref="prefetch" 的标签，追加到页面头部

?? webpack.config.ts 配置

import HtmlWebpackPlugin from ‘html-webpack-plugin‘
import path from ‘path‘
import webpack, { CleanPlugin } from ‘webpack‘

const config: webpack.Configuration = {
  entry: {
    main: ‘./src/index.js‘,
  },

  output: {
    path: path.resolve(__dirname, ‘dist‘),
    filename: ‘bundle.js‘,
  },

  module: {
    rules: [
      {
        test: /\.css/,
        use: [{ loader: ‘style-loader‘ }, { loader: ‘css-loader‘ }],
      },
      { test: /\.ts/, use: ‘ts-loader‘ },
      { test: /\.(png|svg|jpg|gif)$/, use: [‘file-loader‘] },
    ],
  },

  plugins: [
    new CleanPlugin(),
    new HtmlWebpackPlugin({
      title: ‘output managment‘,
    }),
  ],
}

export default config

  "devDependencies": {
    "@types/node": "^16.0.0",
    "@types/webpack": "^5.28.0",
    "css-loader": "^5.2.6",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "style-loader": "^3.0.0",
    "ts-loader": "^9.2.3",
    "ts-node": "^10.0.0",
    "tsconfig-paths": "^3.10.1",
    "typescript": "^4.3.5",
    "webpack": "^5.43.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },

Webpack (四) -- 开发环境