webpack 仿写实现vue脚手架的构建
实现一个webpack打包typescript(ts) 类似vue脚手架项目的一个搭建
1. 使用node js 全局安装 Ts,并验证是否安装成功
npm install typescript -g
// 验证是否安装成功
tsc -v
2. 新建一个文件夹创建src目录,并建立主入口文件main.ts和view视图文件夹
3. 和src同级别目录下创建public文件夹并创建子文件index.html
4.配置webpack
①创建与src同级别的build目录并创建webpack.config.js的子文件并写入以下代码
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const isProd = process.env.NODE_ENV === 'production'
// 封装目录
function resolve(dir) {
return path.resolve(__dirname, '..', dir)
}
module.exports = {
//判断环境
mode: isProd ? 'production' : 'development',
entry: {
app: './src/main.ts'
},
output: {
// path: path.resolve(__dirname, 'dist'),
path: resolve('dist'),
filename: '[name].[contenthash:8].js'
},
module: {
rules: [
{
test: /\.tsx?$/,
use:'ts-loader',
// include: [path.resolve(__dirname, 'src')]
include: [resolve('src')]
}
]
},
plugins: [
new CleanWebpackPlugin(), //之前打包的dist 文件清除掉
new HtmlWebpackPlugin({
template: './public/index.html'
})
],
resolve: {
extensions: ['.ts', '.tsx', '.js', 'json']
},
devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',
devServer: {
host:'localhost',
stats:'errors-only', //错误信息处理
port:8081,
},
}
5.生成package.json和tsconfig.json配置文件
①在根目录下打开cmd 命令窗口输入npm init -y
②接着在cmd命令窗口输入tsc --init
生成文件如下图所示
6.下载依赖
npm install -D typescript
//webpack打包以及启动服务器依赖
npm install -D webpack@4.41.5 webpack-cli@3.3.10 webpack-dev-server@3.10.2
//打包html
npm install -D clean-webpack-plugin html-webpack-plugin
//编译ts 文件
npm install -D ts-loader
7.配置package.json 如下图
"scripts": {
"dev": "webpack-dev-server --config build/webpack.config.js",
"build": "webpack --config build/webpack.config.js"
}
8.启动和打包项目
// 启动
npm run dev
// 打包
npm run build
9.见证奇迹的时刻
@ 可以看到已经成功的启动了项目
10.案例地址
https://gitee.com/huazi-zhanye/webpack-tovue.git