webpack结合typescript项目配置
2021-01-17 20:15
阅读：717
YPE html>
标签：配置 config res comm evel ati 指令 com develop
1.项目准备
首先npm init初始化工程，然后安装typescript和webpack相应模块：
npm install --save-dev webpack webpack-cli
npm install --save-dev typescript
npm install --save-dev ts-loader
2.项目文件配置
创建tsconfig.json配置typescript，根据自己的需要进行配置。
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}
创建webpack.config.js配置文件，根据自己需要进行配置：
const path = require(‘path‘);
module.exports = {
mode: "development",
entry: ‘./src/index.ts‘,
devtool: ‘inline-source-map‘,
module: {
rules: [
{
test: /\.tsx?$/,
use: ‘ts-loader‘,
exclude: /node_modules/
}
]
},
resolve: {
extensions: [‘.tsx‘, ‘.ts‘, ‘.js‘]
},
output: {
filename: ‘bundle.js‘,
}
}
package.json中配置启动指令：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server",
"build": "webpack"
},
创建src文件目录，在里面创建一个index.ts文件，随便输入一些东西用来测试
class Index {
public static test() {
console.log(‘nihao‘)
}
}
Index.test()
3.项目打包
在根目录下cmd，输入npm run build。发现dist中增加了一个打包后的bundle.js,如图：
最后在根目录下创建一个html文件，通过script标签，引用这个bundle.js看看能不能成功输出。
Title
成功输出，打包成功。
4. 整个项目结构
转载：https://blog.csdn.net/u013986166/article/details/80246452
webpack结合typescript项目配置
标签：配置 config res comm evel ati 指令 com develop
原文地址：https://www.cnblogs.com/synY/p/13358124.html
文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：webpack结合typescript项目配置
文章链接：http://soscw.com/index.php/essay/43351.html
文章标题：webpack结合typescript项目配置
文章链接：http://soscw.com/index.php/essay/43351.html
评论
亲，登录后才可以留言！