tswebpack打包ts文件方法,resolve模块,clean-webpack-plugin使用,原创

原创
小哥 5个月前 (02-08) 阅读数 65 #大杂烩

1.第一步 初始化项目

npm init -y

2.安装步骤2安装依赖项 首先安装四个初始化用法。 webpack webpack-cli typescript ts-loader

cnpm i -D webpack webpack-cli typescript ts-loader

3.在在根目录下创建一个文件。webpack.config.js并修改该文件的内容

const path = require(path)
const HTMLWebpackPlugin = require(html-webpack-plugin)

module.exports = {
    entry: "./src/index.ts", // 指定条目文件
    output:  {
        path: path.resolve(__dirname,dist),// 指定程序包文件所在的目录。
        filename: "bundle.js" // 打包文件的文件。
    },
    // 指定webpack 包装我用的是模块
    module: {
        rules: [
            {
                test:/.ts$/,
                use: ts-loader,
                exclude: node_modules
            },
        ]

    }
}

4.在根目录下创建一个文件tsconfig.json 修改文件

  "compilerOptions": {
    "module": "ES2015",
    "target": "ES2015",
      "strict": true
  }

5.在package.json中的‘scripts’新增build

"build":"webpack"

6.执行项目 npm run build

7.安装插件 帮助我们自动生成html文件

cnpm i -D html-webpack-plugin

介绍插件 在webpack.config.js

8.安装启动服务器
npm i -D webpack-dev-server

在package.json文件监听命令 => “start”: “webpack serve --open chrome.exe”

9.清空每个包裹dist目录,然后进行打包;

npm i -D @babel/core clean-webpack-plugin

再webpack.config.js在文件中引入

const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’)

又是这个文件plugins文件中
new CleanWebpackPlugin(),

10.resolve被用作模块(ts我不知道我是一个模块,所以我需要配置公开的模块来引用它。

11.要兼容ie浏览器需要安装插件(ie我的婆婆抛弃了他,但压力很大的前端仍然兼容,????????????????)@babel/core 核心工具@babel/preset-env 预设的环境工具可能会显示为不成功,这将被移除。

npm i -D @babel/core clean-webpack-plugin
npm i -D @babel/core @babel/preset-env babel-loader core-js

一天下来,我发现我跑不动了。休想。如果它对你有用,你可以看到它。没用的。
参考课程:https://www.bilibili.com/video/BV1Xy4y1v7S2?p=12

版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除