//webpack.config.js
const path = require("path")
const webpack = require("webpack")
var HtmlWebpackPlugin = require("html-webpack-plugin")
const CompressionPlugin = require("compression-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
mode: "development",
// 入口文件
entry: "./hello.ts",
// 输出文件
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist")
},
plugins: [
// 热打包
new webpack.HotModuleReplacementPlugin(),
// 清除上一次打包的dist目录里的文件
new CleanWebpackPlugin(),
// html文件打包插件
new HtmlWebpackPlugin({
template: path.join(__dirname, "hello.html")
}),
// 文件压缩插件
new CompressionPlugin({
test: /\.js$|\.html$|\.css/,
threshold: 10240,
deleteOriginalAssets: false
})
],
module: {
rules: [
//typescript加载器
{
test: /\.ts$/,
use: "ts-loader"
},
// css打包加载器
{
test: /\.css$/,
use: [{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "postcss-loader"
}
]
},
// 图片打包加载器
{
test: /\.(png|jpg)$/,
use: [{
loader: "url-loader",
options: {
limit: 8192
}
},
{
loader: "image-webpack-loader", // 压缩图片的加载器
options: {
bypassOnDebug: true
}
}
]
},
// sass文件的loader加载器
{
test: /\.scss$/,
use: [{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader"
}
]
}
]
},
resolve: {
extensions: [".ts"]
}
}