- 初始化package.json npm init -y
- cnpm i -D webpack webpack-cli(webpack命令行工具) typescript ts-loader(整合)
2.1 自动生成html文件
cnpm i -D html-webpack-plugin
2.2 webpack内置服务器(自动刷新项目)
cnpm i -D webpack-dev-server
在package.json里写
自动打开谷歌浏览器
"start":"webpack serve --open chrome.exe"
执行npm start
2.3 清除dist目录
cnpm i -D clean-webpack-plugin
3.1 解决兼容性问题
cnpm i -D @babel/core @babel/preset-env babel-loader core-js - webpack.config.js
// 引入一个包
const path = require('pach');
// 在webpack.config.js引入
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 不使用箭头函数
environment: {
arrowFunction: false
}
},
// 指定webpack打包时要使用的模块
module:{
// 指定要加载的规划
rules:[
{
// test指定规则生效的文件
test: /\.ts$/,
// 要使用的loder;从后往前执行
use: [
// 配置babel
{
// 指定加载器
loader: "babel-loader",
// 设置babel
options:{
// 设置预定义的环境
presets:[
[
// 指定环境的插件
"@babel/preset-env",
// 配置信息
{
// 要运行正在哪个浏览器(后面是版本号)
targets: {
"ie":"7"
},
"corejs": "3",
// 使用corejs的方式("usage":表示按需加载)
"useBuiltIns": "usage"
}
]
]
}
},
'ts-loader',
],
// 要排除的文件
exclude: /node-modules/
}
]
},
// 配置webpack插件
plugins:[
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
title: '这是自定义标题的位置'
}),
],
// 用来设置引用模块(哪些文件可以做为模块 )
resolve:{
extensions: ['.ts','.js']
}
};
配置ts
tsconfig.json
{
"compilerOptions":{
"module": "ES2015",
"target": "es2015",
// 严格模式
"strict":true
}
}
在package.json里加
"build"："webpack"
