tswebpack打包ts文件方法,resolve模块,clean-webpack-plugin使用,原创
原创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
版权声明
所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除