webpack 配置

1.webpack 配置

webpack 常规配置如下（entry、output、loader、plugin、mode）

const path = require('path')
const HtmlWebpaackPlugin = require('html-webpack-plugin') // 初始化 HTML 模板
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 每次打包删除旧文件

module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  // 开发模式服务器
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist')
    },
    open: true
  },
  // 配置默认后缀
  resolve: {
    extensions: ['.ts', '.js', '.json', '.svg']
  },
  module: {
    // css 与 ts 的loader
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.ts$/,
        use: ['ts-loader'],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    // 相关插件
    new HtmlWebpaackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
  // 开发模式
  mode: 'development'
}

SourceMap 是一种映射关系，当项目运行后，如果出现错误，我们可以利用 SourceMap 反向定位到源码位置；

config
  // 开发环境 sourcemap 不包含列信息
  .when(process.env.NODE_ENV === 'development', (config) => config.devtool('cheap-source-map'))
  // 预览环境构建 vue-loader 添加 filename
  .when(process.env.VUE_APP_SCOURCE_LINK === 'TRUE', (config) =>
    VueFilenameInjector(config, {
      propName: process.env.VUE_APP_SOURCE_VIEWER_PROP_NAME
    })
  )