1. First, you need to initialize the project, prepare an empty project tsProject, use the command npm init -y to initialize the project, and generate an empty package.json in the directory
npm init -y
2. Installation dependencies: You can use cnpm or npm. Remember that if the installation dependencies fail, you have to delete node_modeules and use the named download again
cnpm install -D webpack webpack-cli typescript ts-loader html-webpack-plugin webpack-dev-server clean-webpack-plugin
- 'html-webpack-plugin' plug-in: Generate an html file, which allows us to write ts files and js files to be automatically imported into this html file, without having to write it later and manually import it
- "clean-webpack-plugin" plugin: clear the dist file generated by each package, and regenerate a new dist file
3. Create a new file named webpack.config.js in the root directory of the project to configure webpack. At the same time, create a src folder in the root directory, write the code of the project in it, and create index.html under src. This html file is a template , the html automatically generated by the 'html-webpack-plugin' plugin will be generated according to this template Introduction
: Configure webpack to automatically package, webpack Chinese documentation
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
entry: "./src/index.ts", // 入口文件
output:{
// 指定打包后文件所在目录
path:path.resolve(__dirname,'dist'), // 指定打包后文件的文件
filename: "bundle.js",
environment: {
// 告诫webpack不要自动使用箭头函数,可选
arrowFunction:false
}
},
mode: 'development', // 设置mode
module: {
// 指定webpack打包时要使用模块
rules: [ // 指定要加载的规则
{
test: /\.ts$/, //test 指定的是规则生效的文件
use:'ts-loader', // 要使用的loader
exclude: /node_modeules/ // 要排除的文件
}
]
},
plugins: [ // 配置webpack插件
new HTMLWebpackPlugin({
template: './src/index.html' // 这里是html的模板，生成的html 会根据这个模板生成
})
],
resolve: {
extensions: [".ts", '.js'] // 凡是模块中引入ts，js文件都能被扩展,能被引入使用
}
}
4. The scripts in the package.json file set the startup command line
"build": "webpack --mode production",
"dev": "webpack --mode development",
"start": "webpack-dev-server --open" // 打开浏览器
5. Create a tsconfig.json in the root directory to configure ts
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true
}
}
6. To test, you can create an index.ts file under src, test it and use npm run bulid to package it, and you will find that a dist file is generated, with bundle.js and index.html files in it, it is successful.
npm run bulid
7. npm start opens the browser
npm start
8. The above can meet the requirements, but sometimes some browsers are not compatible with es6 code and other compatibility issues. At this time, the bable plug-in is required to be used together
cnpm install -D @babel/core @babel/preset-env babel-loader core-js
9. Modify webpack.config.js
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {
CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
entry: "./src/index.ts", // 入口文件
output:{
// 指定打包后文件所在目录
path:path.resolve(__dirname,'dist'), // 指定打包后文件的文件
filename: "bundle.js",
environment: {
// 告诫webpack不要自动使用箭头函数,可选
arrowFunction:false
}
},
mode: 'development', // 设置mode
module: {
// 指定webpack打包时要使用模块
rules: [ // 指定要加载的规则
{
test: /\.ts$/, //test 指定的是规则生效的文件
use:[
{
// 配置加载器
loader: "babel-loader",
// 设置babel
options: {
presets:[
[
"@babel/preset-env", // 指定环境的插件,
{
// 配置位置
targets: {
// 要兼容的目标浏览器
"chrome":"88"
},
"corejs": "3", // 指定corejs的版本
"useBuiltIns": "usage" //使用corejs版本为3，"usage"表示按需加载
}
]
]
}
},
'ts-loader'
], // 要使用的loader
exclude: /node_modeules/ // 要排除的文件
}
]
},
plugins: [ // 配置webpack插件
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
template: './src/index.html'
})
],
resolve: {
extensions: [".ts", '.js'] // 凡是模块中引入ts，js文件都能被扩展
}
}