一、初始化
终端输入 (npm,cnpm,yarn等等随意)
npm init -y
这一步会在根目录生成package.json文件
二、下载依赖，这一步会在根目录生成文件夹node_modules
npm i -D webpack webpack-cli typescript ts-loader
三、在根目录新建webpack.config.js，tsconfig.json，文件夹src，src下新建index.ts
webpack.config.js
const path = require('path')
// webpack中所有的配置信息都应该写在module.exports中
module.exports = {
// 指定入口文件
entry: '',
// 指定打包文件的目录
output: {
// 指定打包文件的目录
path: path.resolve(__dirname, 'dist'),
// 打包后的文件
filename: 'bundle.js'
},
// 指定webpack打包时要使用的模块
module: {
// 指定要加载的规则
rules: [
{
// test指定规则生效的文件
test: /\.ts$/,
// 要使用的loader
use: 'ts-loader',
// 要排除的我呢见
exclude: /node_modeules/
}
]
}
}
tsconfig.json
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true
}
}
4、package.json的“scripts”配置打包命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
5、执行命令npm run build
这时就会生成一个dist文件夹，文件夹里有文件bundle.js
6、在index.ts文件写typeScript代码
基本的打包就可以完成了
接下来记录一下其他的webpack插件及配置
1、html-webpack-plugin 生成 html 文件。
将 webpack 中entry配置的相关入口 chunk 和 extract-text-webpack-plugin抽取的 css 样式 插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个 html 文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中。
2、clean-webpack-plugin 打包前清空dist文件
babel配置
@babel/core
@babel/core是babel的核心库，所有的核心Api都在这个库里，这些Api供babel-loader调用
@babel/preset-env
这是一个预设的插件集合，包含了一组相关的插件，Bable中是通过各种插件来指导如何进行代码转换。该插件包含所有es6转化为es5的翻译规则
@babel/polyfill
@babel/preset-env只是提供了语法转换的规则，但是它并不能弥补浏览器缺失的一些新的功能，如一些内置的方法和对象，如Promise,Array.from等，此时就需要polyfill来做js得垫片，弥补低版本浏览器缺失的这些新功能。
babel-loader
以上@babel/core、@babel/preset-env 、@babel/polyfill其实都是在做es6的语法转换和弥补缺失的功能，但是当我们在使用webpack打包js时，webpack并不知道应该怎么去调用这些规则去编译js。这时就需要babel-loader了，它作为一个中间桥梁，通过调用babel/core中的api来告诉webpack要如何处理js
core-js
IE浏览器无法兼容es6语法，我们可以使用core-js进行兼容性处理，从而使IE浏览器也能够正常的解析es6语法
npm install -D html-webpack-plugin clean-webpack-plugin
npm install -D @babel/core @babel/preset-env babel-loader core-js
配置
const path = require('path')
// 引入html插件
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不使用箭头函数(兼容ie必须不使用箭头函数)
environment: {
arrowFunction: false
}
},
// 指定webpack打包时要使用的模块
module: {
// 指定要加载的规则
rules: [
{
// test指定规则生效的文件
test: /\.ts$/,
// 要使用的loader
use: [
{
// 指定加载器
loader: "babel-loader",
// 设置babel
options: {
// 设置预定义的环境
presets: [
[
// 指定环境插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的目标浏览器
targets: {
"chrome": "88",
"ie": "11"
},
// 指定corejs版本
"corejs": "3",
// 使用corejs的方式 usage表示按需加载
"useBuiltIns": "usage"
}
]
]
}
},
'ts-loader'
],
// 要排除的我呢见
exclude: /node_modeules/
}
]
},
// 配置webpack插件
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
// title: "这是一个自定义的title"
template: "./src/index.html"
})
],
mode: 'development',
resolve: {
extensions: ['.ts', '.js']
}
}
