如何使用webpack 與 ts結合使用
新建項目 ，執行項目初始化
npm init -y
會生成
{"name": "tsdemo01","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build":"webpack"},"keywords": [],"author": "","license": "ISC","devDependencies": {"ts-loader": "^9.4.4","typescript": "^5.1.6","webpack": "^5.88.2","webpack-cli": "^5.1.4"}
}安裝依賴 ：
-D 開發依賴 等價于 --save-dev
npm i -D webpack webpack-cli typescript ts-loader
根目錄下新建webpack.config.js,webpack的配置文件
// 引入path庫 用于拼接路徑
const path = require('path')
//webpack 所有配置信息都寫在module.exports中
module.exports={// 指定入口文件entry: './src/index.ts',// 指定打包文件所在目錄output:{// 指定打包文件的目錄path:path.resolve(__dirname,'dist'),//打包后的文件 出口filename:"bundle.js"},// 指定webpack打包時要使用的模塊module:{// 指定要加載的規則rules:[{ //test 指定的是規則生效的文件 以ts結尾的文件test:/\.ts$/,// 要使用的loaderuse:'ts-loader',//要排除的文件exclude:/node-modules/ }]}
}
在根目錄下 新建tsconfig.json
{"compilerOptions":{"module":"ES2015","target":"ES2015","strict":true}
}
在package.json 的scripts中添加
"build":"webpack"
都配置好后，執行 npm run build
在目錄下看到dist文件，就是成功拉！
在項目中，需要在頁面中引入js使用，
html-weback-plugin是自動生成html文件，并且自動引入相關資源
npm i -D html-webpack-plugin
配置的webpack.config.js
// 引入path庫 用于拼接路徑
const path = require('path');
// 引入html-webpack-plugin
const HTMLWebpackPlugin = require('html-webpack-plugin');//webpack 所有配置信息都寫在module.exports中
module.exports = {// 指定入口文件entry: './src/index.ts',// 指定打包文件所在目錄output: {// 指定打包文件的目錄path: path.resolve(__dirname, 'dist'),//打包后的文件 出口filename: 'bundle.js',},// 指定webpack打包時要使用的模塊module: {// 指定要加載的規則rules: [{//test 指定的是規則生效的文件 以ts結尾的文件test: /\.ts$/,// 要使用的loaderuse: 'ts-loader',//要排除的文件exclude: /node-modules/,},],},plugins: [new HTMLWebpackPlugin({title: '我是自定義title',}),],
};再執行 npm run build 時，目錄會變更
如果想有個模板，可以在src下新增一個index,html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我是模板</title>
</head>
<body><div id="box1">我是模板的div1</div>
</body>
</html>
在webpack.config.js中，把title 換為template
// 引入path庫 用于拼接路徑
const path = require('path');
// 引入html-webpack-plugin
const HTMLWebpackPlugin = require('html-webpack-plugin');//webpack 所有配置信息都寫在module.exports中
module.exports = {// 指定入口文件entry: './src/index.ts',// 指定打包文件所在目錄output: {// 指定打包文件的目錄path: path.resolve(__dirname, 'dist'),//打包后的文件 出口filename: 'bundle.js',},// 指定webpack打包時要使用的模塊module: {// 指定要加載的規則rules: [{//test 指定的是規則生效的文件 以ts結尾的文件test: /\.ts$/,// 要使用的loaderuse: 'ts-loader',//要排除的文件exclude: /node-modules/,},],},plugins: [new HTMLWebpackPlugin({// title: '我是自定義title',template: './src/index.html',}),],
};執行打包 npm run build 就會出現下圖：
可使用webpack-dev-server 對代碼進行實時的編譯監控
下載：npm i -D webpack-dev-server
在package.json中配置scripts 中新增 “start”: “webpack serve --open”
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack","start": "webpack serve --open"},
執行 npm run start
當代碼修改，檢查到后，頁面會實時的進行更新
打包清空上一次內容：可使用 clean-webpack-plugin
寫法與html-webpack-plugin相同
webpack.config.js文件：
// 引入path庫 用于拼接路徑
const path = require('path');
// 引入html-webpack-plugin
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//webpack 所有配置信息都寫在module.exports中
module.exports = {// 指定入口文件entry: './src/index.ts',// 指定打包文件所在目錄output: {// 指定打包文件的目錄path: path.resolve(__dirname, 'dist'),//打包后的文件 出口filename: 'bundle.js',},// 指定webpack打包時要使用的模塊module: {// 指定要加載的規則rules: [{//test 指定的是規則生效的文件 以ts結尾的文件test: /\.ts$/,// 要使用的loaderuse: 'ts-loader',//要排除的文件exclude: /node-modules/,},],},plugins: [new CleanWebpackPlugin(),new HTMLWebpackPlugin({// title: '我是自定義title',template: './src/index.html',}),],// 設置引用模塊resolve: {// 以.ts 和.js為結尾的擴展名文件可以做模板使用extensions: ['.ts', '.js'],},
};比如src下另有一個item1.ts
export const hi = '你好';
想在index.ts引入，
import { hi } from './item1';
let a: string;
a = 'aaa';
console.log(a);
function sum(a: number, b: number): number {return a + b;
}
console.log(sum(211, 234));
console.log('hi----', hi);直接引入，打印，在npm run build 時，會報錯
解決方法是webpack.config.js配置下
// 設置引用模塊resolve: {extensions: ['.ts', '.js'],},
寫上這個就可以在ts中引入其他ts文件中的變量
再次打包 npm run build 就不會報錯了
就執行成功拉
