当前位置：首页 > Web开发 > 正文

然后将src/index.js改名为src/index.ts

2024-03-31 Web开发

标签：

使用npm 安置相应的模块

webpack 4 需要安置 webpack、webpack-cli 和 typescript 等须要的模块。为了使用 webpack 措置惩罚惩罚 typescript，还需要 ts-loader。
在VSCode的终端输入以下命令

1、初始化项目：

npm init

回答一系列的问题（也可以直接回车使用默认值）后，在当前项目文件夹中会呈现一个package.json的配置文件。文件内容概略如下所示：

{ "name": "webpacktypescript", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "ts-loader": "^4.2.0", "typescript": "^2.8.1", "webpack": "^4.6.0", "webpack-cli": "^2.0.14" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

2、安置需要的各个模块：

npm install webpack webpack-cli typescript ts-loader --save-dev

3、手动添加 TypeScript 的配置文件 tsconfig.json：

{ "compilerOptions": { "module": "commonjs", "target": "es5", "sourceMap": true }, "exclude": [ "node_modules" ] }

4、添加index.html及默认的 src/index.js文件
在项目文件夹中添加html文件，并定名为：‘index.html‘,并编纂文件内容如下所示：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TypeScript + Webpack 4</title> </head> <body> <script src="dist/main.js"></script> </body> </html>

5、在项目文件夹中添加名字为src的文件夹，并在该文件夹中添加名字为index.js的JavaScript文件,文件内容如下所示：

console.log("Hello TypeScript!");

完成以上操纵后项目的布局如下所示：

6.使用webpack-cli打包项目，输入以下命令：

npx webpack

此中npx详解请参照：

执行后控制台显示内容如下所示：

D:\SPAProjects\webpacktypescript>npx webpack npx: installed 1 in 11.482s The "path" argument must be of type string D:\SPAProjects\webpacktypescript\node_modules\webpack\bin\webpack.js Hash: 7dffdd50a425c0f906c2 Version: webpack 4.6.0 Time: 579ms Built at: 2018-04-18 14:23:26 Asset Size Chunks Chunk Names main.js 577 bytes 0 [emitted] main Entrypoint main = main.js [0] ./src/index.js 33 bytes {0} [built]

7、打包告成，项目文件夹中会多出 dist/main.js - 这也正是 webpack 4 未指定输出文件时默认的位置。此时在浏览器中打开index.html，并在浏览器中按下F12，进入控制台将会看到 consolr.log() 语句的输出功效。

此时的项目文件夹布局：

webpack 4 没有配置文件时，使用src/index.js作为默认入口，同时使用dist/main.js作为默认出口。
由于TyepScript文件的默认扩展名为.ts，所以并不适合于没有配置文件的默认状况。

8、webpack 配置文件
在项目文件夹中添加名为webpack.config.js的JavaScript文件，并编纂其内容如以下所示：

const path = require(‘path‘); module.exports = { mode: ‘development‘, entry: ‘./src/index.ts‘, output: { filename: ‘main.js‘, path: path.resolve(__dirname, ‘dist‘) }, module: { rules: [{ test: /\.ts$/, use: "ts-loader" }] }, resolve: { extensions: [ ‘.ts‘ ] } };

9、同时改削package.json如以下内容所示：

{ "name": "webpacktypescript", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "ts-loader": "^4.2.0", "typescript": "^2.8.1", "webpack": "^4.6.0", "webpack-cli": "^2.0.14" }, "devDependencies": {}, "scripts": { "build": "webpack", //添加这一行 "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

10、完成以上的设置，然后将src/index.js改名为src/index.ts。

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31126.html

然后将src/index.js改名为src/index.ts

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢