webpack 基本配置

最新推荐文章于 2024-07-06 16:26:01 发布

Cicada-S

最新推荐文章于 2024-07-06 16:26:01 发布

阅读量396

点赞数 1

分类专栏： Webpack 文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/South_ink/article/details/127588328

版权

Webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

webpack.config.js基本配置

// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const config = {
	// 入口文件
  entry: "./src/index.ts",
  // 输出
  output: {
    // 用于输出文件的文件名
    filename: "main.js"
    // 目标输出目录 path 的绝对路径
    path: './dist'
  },
  // 解析
  resolve: {
    // 自动解析确定的扩展
    extensions: ['.ts', '.tsx', '.js']
  },
  // 模块
  module: {
    // 解析器
    rules: [{
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/
    }]
  },
  // 此选项控制是否生成 以及如何生成 source map
  devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map',
  // 开发中
  devServer: {
    static: './dist',
    compress: false,
    host: 'localhost',
    port: 8089
  },
  // 插件
  plugins: [
    new CleanWebpackPlugin ({
      cleanOnceBeforeBuildPatterns: ['./dist']
    }),
    new HtmlWebpackPlugin ({
      template: './src/template/index.html'
    })
  ]
}