webpack打包示例
- 下载的东西
- webpack
- webpack-cli
- typescript
- ts-loader
- html-webpack-plugin:webpack构建后生成html文件,同时把构建好入口js文件引入到生成的html文件中。
- webpack-dev-server:创建一个服务器(http://localhost:8080),服务器监听指定目录下的文件,自动打包文件,默认将输出文件bundle.js存于服务器的根目录中,并具有
实时更新
加载页面的功能
需要在package.json中配置:
"start": "webpack serve --open chrome.exe
然后就可以npm start了 - clean-webpack-plugin:每次构建前,清空dist文件夹,保证dist中的文件都是最新的,不存留历史遗存文件
- babel
npm i -D @babel/core @babel/preset-env babel-loader core-js
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
environment: {
arrowFunction: false
}
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
targets: {
"chrome": "88"
},
"corejs": "3",
"useBuiltIns": "usage"
}
]
]
}
}
'ts-loader'
],
exclude: /node-modules/
}
]
},
plugins: [
new CleanWebpackPlugin (),
new HTMLWebpackPlugin({
template: "./src/index.html"
}),
],
resolve: {
extensions: ['.ts', 'js']
}
}