标签:npm TypeScript const require webpack module --- Webpack config
Webpack + TypeScript --- 环境搭建
一、环境配置
1、新建项目(即新建文件夹:HelloWorld)
2、项目初始化:npm init -y
3、安装typescript
npm i typescript -g
tsc --init
4、目录结构如下:
5、配置构建工具(webpack5)
npm install webpack -D
npm install webpack-cli -D
npm install webpack-dev-server@3.11.2 -D
npm install clean-webpack-plugin -D
npm install html-webpack-plugin -D
npm install ts-loader
因为typescript是全局安装,所以要在项目运行之前进行链接
npm link typescript
5.1、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);
};
5.2、webpack.base.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.ts",
output: {
filename: "app.js",
},
resolve: {
extensions: [".js",".ts",".tsx"],
},
module: {
rules: [
{
test: /\.tsx?$/i,
use: [
{
loader: "ts-loader",
},
],
exclude: /node_modules/,
},
],
},
plugins: [
//通过一个模板帮助生成网站首页,并将输出文件嵌入
new HtmlWebpackPlugin({
template: "./src/tpl/index.html",
}),
],
};
5.3、webpack.dev.config.js
const webpack = require("webpack");
module.exports = {
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
devtools: "cheap-module-eval-source-map",
},
}),
],
};
5.4、webpack.pro.config.js
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
plugins: [
new CleanWebpackPlugin(),
],
};
6、配置文件:package.json
二、页面文件和ts文件
1、index.ts
let hello:string = "Hello TypeScript";
document.querySelectorAll(".app")[0].innerHTML = hello;
2、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>Document</title>
</head>
<body>
<div class="app"></div>
</body>
</html>
三、启动项目:
npm start
访问 http://localhost:8080/
标签:npm,TypeScript,const,require,webpack,module,---,Webpack,config 来源: https://www.cnblogs.com/lone5wolf/p/15835007.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。