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;