const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const config = {
mode: 'development',
entry: ['@babel/polyfill', path.resolve(__dirname, './src/index.js')],
output: {
filename: '[name].[hash:8].js',
path: path.resolve(__dirname, './dist')
},
plugins: [
// 自动把入口 js 插入到 index.html 中
new HtmlWebpackPlugin({
filename: "index.html",
template: path.resolve(__dirname, './src/public/index.html')
}),
// 清除 dist 的插件
new CleanWebpackPlugin()
],
module: {
rules: [
// 转为 es5 语法,兼容更多浏览器
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
]
},
// css 打包
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 设置 limit,如果超过限制,使用 file-loader 打包
{
test: /\.(jpg|png|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
fallback: {
loader: 'file-loader',
options: {
name: 'img/[name].[hash:8].[ext]'
}
}
}
}
]
},
{
test: /\.(mp4|webm|ogg|mp3|wav)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
fallback: {
loader: 'file-loader',
options: {
name: 'media/[name].[hash:8].[ext]'
}
}
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
fallback: {
loader: 'file-loader',
options: {
name: 'fonts/[name].[hash:8].[ext]'
}
}
}
}
]
}
]
},
devServer: {
port: '3000',
host: '127.0.0.1',
hot: true,
// 自动打开 url
open: true
},
}
module.exports = config;