开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第20天，点击查看活动详情
创建一个文件夹， 初始化项目
npm init
tsc --init
安装依赖
- 安装webpack环境
npm install webpack webpack-cli webpack-dev-server -D
安装 ts
npm install typescript -D
编译ts的loader
npm install ts-loader -D
html模版插件
npm install html-webpack-plugin -D
然后创建webpack.config.js,首先webpack是基于node环境的，所以必须使用node语法，改变前面的import为require写法，然后导入html-webpack-plugin插件，module.exports对象里核心配置，入口、出口、模块、插件、模式， 首先配置打包入口文件 './src/index.ts',webpack会从这个文件开始，顺藤摸瓜，打包所有被这个文件直接或间接引入的文件。 出口文件，根据入口文件所打包出来的结果，输出到output配置的地方，并且可以更改文件名称 module主要配置rules规则，因为js不认识ts,vue,react,sass,less，img等等语法，所以要根据不同的文件后缀名来使用不同的loader，将编辑器不认识的文件内容统统转换为js，这里配置了ts-loader,意思就是打包时遇到.ts文件时，先让ts-loader给我翻译一下，我在处理
plugins ,主要是配置插件的，有些定制的东西都是靠插件来完成的，这里使用了html-webpack-plugin,如果不指定html模版，他会自己搞一个空的html模版，然后根据配置的output产出一个html文件，并且在里面加一个script脚本 ，把你打包生成的文件自动引入到html文本中，然后就可以打开html
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: "./src/index.ts",
output: {
path: path.resolve(__dirname, 'dist'),
filename: "index.js"
},
module: {
rules: [{
test: /\.ts$/,
use: ['ts-loader'],
exclude: /node_modules/
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
],
mode: "development"
}
配置一下启动脚本 dev 后面配 --open 自动打开默认浏览器
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server"
},
导入其他ts文件会报错， 在webpack.config.js中，配个resolve ,extensions
resolve: {
extensions: ['.js', '.ts']
},
