npm init -y ==> 生成package.json文件
npm i typescript -g ==> 全局安装ts编译器 tsc
tsc -h ==> tsc 的帮助信息
tsc --init ==》 创建tsc的配置文件 tsconfig.json文件
新建src/index.ts ==》 原终端执行 tsc ./src/index.ts 编译命令 ==》 自动生成与index.ts同级的index.js 编译好的js文件
let hello: string = 'hello hi' ==> var hello = 'hello hi';
网址 https://www.typescriptlang.org/play ==》 左侧输入ts代码 右侧自动生成对应编译后的js
【以下webpack的配置】
配置常见webpack: => 只是一个工具
安装包:》 npm i webpack webpack-cli webpack-dev-server -D ==> 需要三个包 webpack webpack-cli webpack-dev-server
区分生成环境和开发环境 ==》 不同配置不同依赖 ==》 可以先分别各自配置 最后用插件合并配置
build文件里==》 webpack的配置
webpack.base.config.js ==》 公共基础配置
webpack.config.js ==》 入口
webpack.dev.config.js ==> 开发环境配置文件
webpack.pro.config.js ==> 生产环境配置文件
entry: './src/index.ts', //指定入口文件
output: {
filename: 'app.js', //指定输出
},
resolve: {
extensions: ['.js', '.ts', '.tsx'], //扩展名
},
module: {
rules: [
{
test: /\.tsx?$/i,
use: [
{
loader: 'ts-loader', //需要安装对应的loader 再次安装typescript 本地-D
},
],
exclude: /node_modules/,
},
],
},
npm i ts-loader typescript -D ==> //需要安装对应的loader 再次安装typescript 本地-D
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
//安装插件html-webpack-plugin 通过一个模板自动生成网站首页 并把输出文件自动嵌入到这个文件中
template: './src/tpl/index.html',
}),
],
npm i html-webpack-plugin -D ==> 安装插件
创建src/tpl/index.html ==> 模板文件 ==> <div class="app"></div>
开发环境的配置 ===》 module.exports = {
devtool: 'cheap-module-eval-source-map', //开启source-map 开发环境
}
生成环境配置 ==》 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
//插件 自动清空dist目录
plugins: [new CleanWebpackPlugin()],
}
所有配置文件入口==》 插件 webpack-merge ==》 把两个配置文件合并
// 引入插件webpack-merge 用来合并配置
const merge = require('webpack-merge')//现在不支持 报错 改为下面的引入方式
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 //定义config 确定下如果是是开发环境就用开发环境的配置 否则用生成环境的配置
return merge(baseConfig, config) //最后将baseConfig 和 config合并
}
// let config = process.NODE_ENV === 'development' ? devConfig : proConfig
// module.exports = merge(baseConfig, config)
【以下 修改npm 的脚本】
打开package.json文件 ==> 更改入口文件 "main": "index.js" ==》 "main": "./src/index.ts",
编写启动开发环境的命令 ==》 npm start
启动 需要 ==> webpack-dev-server
指定mode 参数 ==》 将当前的环境变量设置为development ==> --mode=development
指定配置文件 ==》 --config ./build/webpack.config.js
"start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
终端执行npm start命令 ===》 http://localhost:8080/ 正常打开网页
【修改index.ts】 把字符串插入页面中
let hello: string = 'hello hi'
document.querySelectorAll('.app')[0].innerHTML = hello
【构建生产环境的脚本】
脚本名“build"
"build": "webpack --mode=production --config ./build/webpack.config.js",
执行 npm run build ==》 生成了dist目录 自动生成了模板index.html 构建好的app.js
且将构建好的app.js已经自动嵌入模板
<script defer="defer" src="app.js"></script>
标签:npm,index,webpack5,配置,基础,ts,js,webpack,config
From: https://www.cnblogs.com/aroyny/p/16868026.html