写给新手webpack打包Ts反复失败的解决方法

vvppcc

已于 2022-06-29 13:52:51 修改

阅读量2.3k

点赞数 2

文章标签： webpack 前端 javascript vue.js node.js

于 2022-06-29 11:57:15 首次发布

本文链接：https://blog.csdn.net/vvppcc/article/details/125515899

版权

学习vue打包时被webpack打包反复出错弄了几天快崩溃了，查了很多资料终于成功了，我把最简便的方法交给大家，好让新手少折腾。

1.首先检查一下node.js的版本我的版本是 16.15.1的

在命令提示符中输入node -v查看你的nodejs版本号，最好是和我的一致的。

node -v

2.在项目文件夹下创建3个文件夹，命名如下：build、public、src。

分别在build文件夹下创建文件webpack.config.js复制下面的代码到文件中。

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

const isProd = process.env.NODE_ENV === 'production' // 是否生产环境

function resolve(dir) {
  return path.resolve(__dirname, '..', dir)
}

module.exports = {
  mode: isProd ? 'production' : 'development',
  entry: {
    app: './src/main.ts'
  },

  output: {
    path: resolve('dist'),
    filename: '[name].[contenthash:8].js'
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        include: [resolve('src')]
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin({}),

    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],

  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },

  devtool: isProd ? 'cheap-module-source-map' : 'eval-cheap-source-map',

  devServer: {
    host: 'localhost', // 主机名
    stats: 'errors-only', // 打包日志输出输出错误信息
    port: 8081,
    open: true
  }
}

在public文件夹下创建文件index.html复制如下代码粘贴进去。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>webpack & TS</title>
  </head>
  <body></body>
</html>

在src文件夹下创建文件main.ts这里随意编写ts代码

document.write('Hello Webpack TS!')

项目目录如下则完成了初期的配置

3.接下来在项目文件夹下打开终端，输入命令

npm init -y

项目中会自动生成package.json文件，复制如下代码替换掉文件中的全部代码

{
  "name": "webpack-ts-init",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "3.0.0",
    "cross-env": "7.0.2",
    "html-webpack-plugin": "4.5.0",
    "ts-loader": "8.0.11",
    "typescript": "4.0.5",
    "webpack": "4.41.5",
    "webpack-cli": "3.3.10",
    "webpack-dev-server": "3.10.2"
  }
}

注意此处的改为你的项目文件名称譬如我的项目文件夹名字为web