1.webpack的简单使用
一般项目中我们不会直接编译ts代码，而是使用打包工具来进行。
-
初始化项目：
npm init -y -
安装依赖：
cnpm i -D webpack webpack-cli typescript ts-loader（四个包）- webpack-cli—命令行工具
- ts-loader—将ts代码和webpack能整合在一起
-
新建webpack.config.js文件
// 引入一个包
const path = require('path');
//webpack 中所有的配置信息都应该写在module.exports中
module.exports = {
// 指定入口文件
entry: "./src/index.ts",
// 指定打包文件所在目录
output: {
//指定打包文件的目录
path: path.resolve(__dirname, 'dist'),
//打包后文件的名字
filename: "bundle.js",
//告诉webpack不使用箭头函数
environment: {
arrowFunction: false
}
},
//指定webpack打包时要使用的模块
module: {
// 指定要loader加载的规则
rules: [
{
// test指定的是规则生效的文件
test: /\.ts$/,//以ts结尾的文件
// 要使用的loader
use: 'ts-loader',
// 要排除的文件
exclude: /node-modules/
}
]
},
// 用来设置引用模块，可以将这些文件识别为模块
resolve: {
extensions: ['.ts', '.js']
}
}
- 在package.json中加上build命令
"build": "webpack", - 执行
npm run build即可进行编译打包
2.webpack中常用的插件
1.html-webpack-plugin—html插件能帮助我们在打包时自动地生成html文件
此外，还得安装一个webpack插件cnpm i -D html-webpack-plugin，才能生成html文件
在上面的基础上进行配置该插件
// 引入一个包
const path = require('path');
// 引入html插件
const HTMLWebpackPlugin = require('html-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: {
// 指定要loader加载的规则
rules: [
{
// test指定的是规则生效的文件
test: /\.ts$/,//以ts结尾的文件
// 要使用的loader
use: 'ts-loader',
// 要排除的文件
exclude: /node-modules/
}
]
},
//配置Webpack 插件
plugins: [
new HTMLWebpackPlugin({
// title: "这是一个自定义的title"、
template: "./src/index.html"
}),
],
// 用来设置引用模块，可以将这些文件识别为模块
resolve: {
extensions: ['.ts', '.js']
}
}
2.webpack-dev-server—该插件能自动响应浏览器更新
-
安装：
npm i -D webpack-dev-server -
在package.json中加上start命令：
"start": "webpack serve --open chrome.exe"
这样，就能在开发时实现热部署了。
扫描二维码关注公众号，回复：
13292347 查看本文章
3.clean-webpack-plugin—clean插件能在build前清空dist目录所有文件，避免旧文件的遗留
-
安装：
npm i -D clean-webpack-plugin -
使用
// 引入一个包 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不使用箭头函数 environment: { arrowFunction: false } }, //指定webpack打包时要使用的模块 module: { // 指定要loader加载的规则 rules: [ { // test指定的是规则生效的文件 test: /\.ts$/,//以ts结尾的文件 // 要使用的loader use: 'ts-loader', // 要排除的文件 exclude: /node-modules/ } ] }, //配置Webpack 插件 plugins: [ new CleanWebpackPlugin(), new HTMLWebpackPlugin({ // title: "这是一个自定义的title"、 template: "./src/index.html" }), ], // 用来设置引用模块，可以将这些文件识别为模块 resolve: { extensions: ['.ts', '.js'] } }
3.Babel的使用
为了使得代码能兼容不同浏览器，我们需要使用babel工具（与webpack结合一起使用）。
-
安装依赖：
cnpm i -D @babel/core @babel/preset-env babel-loader core-js（四个）-
@babel/core—babel核心的工具
-
@babel/preset-env—babel的预设环境
-
babel-loader—babel与webpack结合的工具
-
core-js—模拟js运行环境（使用时可以按需引入）
-
-
修改webpack配置文件
在loader加载器中加入babel（loader中的执行顺序是从下往上，所以需要将’ts-loader’放在最后）
//指定webpack打包时要使用的模块 module: { // 指定要loader加载的规则 rules: [ { // test指定的是规则生效的文件 test: /\.ts$/,//以ts结尾的文件 // 要使用的loader use: [ // 配置babel { //指定加载器 loader: "babel-loader", // 设置babel options: { //设置预定义的环境 presets: [ [ //指定环境的插件 "@babel/preset-env", // 配置信息 { // 要兼容的目标浏览器及版本 targets: { "chrome": "58", "ie": "11" }, //指定corejs的版本（根据package.json中的版本，只写整数） "corejs": "3", //使用corejs的方式 "usage" 表示按需加载 "useBuiltIns": "usage" } ] ] } }, // 'babel-loader', //简化版的配置 'ts-loader' ], // 要排除的文件 exclude: /node-modules/ } ] },
这样，webpack的基本配置就完成了，也是项目开发中常用的配置。下面是整合后的最终配置文件，开发时可以根据这个来做修改。
// 引入一个包
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不使用箭头函数
environment: {
arrowFunction: false
}
},
//指定webpack打包时要使用的模块
module: {
// 指定要loader加载的规则
rules: [
{
// test指定的是规则生效的文件
test: /\.ts$/,//以ts结尾的文件
// 要使用的loader
use: [
// 配置babel
{
//指定加载器
loader: "babel-loader",
// 设置babel
options: {
//设置预定义的环境
presets: [
[
//指定环境的插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的目标浏览器及版本
targets: {
"chrome": "58",
"ie": "11"
},
//指定corejs的版本（根据package.json中的版本，只写整数）
"corejs": "3",
//使用corejs的方式 "usage" 表示按需加载
"useBuiltIns": "usage"
}
]
]
}
},
// 'babel-loader',
'ts-loader'
],
// 要排除的文件
exclude: /node-modules/
}
]
},
//配置Webpack 插件
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
// title: "这是一个自定义的title"、
template: "./src/index.html"
}),
],
// 用来设置引用模块，可以将这些文件识别为模块
resolve: {
extensions: ['.ts', '.js']
}
}