声明：本次项目通过手写webpack运行项目，适用于用所有框架的码农（看到webpack不要害怕哇基础级别的，笔不信可以看代码呦~）
首先，新建一个文件夹 typescript（随意命名啦~）并进入文件夹初始化文件
npm init -y //初始化文件生成一个 package.json文件
安装typescript
npm i typescript -g
tsc -h //可以看到帮助指令
创建配置文件
tsc --init 创建配置文件
建立s r c文件夹,在s r c文件夹下建立index.ts文件并在文件中写入如下代码：
let hello : string = 'Hello World'
tsc ./src/index.ts.// 可通过该指令--编译自动生成一个js 文件
配置构建工具：安装三个包：
npm i webpack webpack-cli webpack-dev-server -D
安装配置文件用到的插件
npm i ts-loader typescript -D //安装 ts-loader依赖
npm i html-webpack-plugin -D //通过这个插件生成首页，把页面自动嵌入文件中
npm i clean-webpack-plugin -D //自动清空dist目录
npm i webpack-merge -D //将文件合并的插件
建立一个build文件夹，里面放入4个配置文件，代码如下：
webpack.base.config.js（公共配置文件）
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
'app': './src/index.ts' //入口文件
},
output: {
filename: 'app.js' //输出文件
},
resolve: {
extensions: ['.js','.ts', '.jsx'] //扩展名
},
module: {
rules: [
{
test: /\.tsx?$/i,
use: [{
loader: 'ts-loader'
}],
exclude: /node_modules/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/tpl/index.html'
}) //通过这个插件生成首页，把页面自动嵌入文件中
],
// optimization: {
// splitChunks: {
// chunks: 'all'
// }
// }
}
webpack.config.js
const merge = require('webpack-merge') //将两个文件合并的插件
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig = require('./webpack.pro.config')
module.exports = (env, argv) => {
let config = argv.mode === 'development' ? devConfig : proConfig;
return merge(baseConfig, config);
};
webpack.dev.config.js (开发环境的配置)
module.exports = {
devtool: 'cheap-module-eval-source-map',
devServer: {
port: 8080
}
}
webpack.pro.config.js(生产环境的配置)
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin() //清空dist目录
]
}
编写HTML文件
由于在第一个配置文件中index.html文件路径为'./src/tpl/index.html'，所以在src文件夹下建立一个tpl文件夹，并且在tpl文件夹下建立一个index.html文件,并在body中放入一个class名为app的div
<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>typeScript</title>
</head>
<body>
<div class="app"></div>
</body>
</html>
修改npm的脚本：打开package.json文件
"main": "./src/index.js",
"start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
"build": "webpack --mode=production --config ./build/webpack.config.js",
//更改入口
//指定开发环境的脚本 指定配置文件为webpack.config.js
//指定生产环境的脚本 指定配置文件为webpack.config.js 会生成dist目录
image.png
npm start 启动项目（开发环境下） 发现服务已经运行 但是没有文字
修改index.ts 嵌入文字
let hello : string = 'Hello World';
document.querySelectorAll('.app')[0].innerHTML = hello;
这个时候再打开页面就会发现有hello world文字了呦~
如果想要运行生产环境，npm run build 发现生成一个dist文件夹，里面构建好的app.js自动嵌入到了我们的模板文件index.html中
看完不要忘了点赞哇~✨
timg.gif
网友评论