webpackage.config.js

const path = require("path")
    // 导入html-webpack-plugin
const HtmlPlugin = require("html-webpack-plugin")
    // 到二u
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin‘); //
// 实例化 传递要复制那个
const htmlPlugin = new HtmlPlugin({
    template: "./src/index.html",
    // 复制出来的文件名
    filename: "./index.html"
})
module.exports = {
    mode: ‘development‘,
    entry: path.join(__dirname, "./src/index.js"),
    output: {
        path: path.join(__dirname, "./dist"),
        // 把js统一放到js文件夹中
        filename: "js/bundle.js"
    },
    // 挂在到配置选项中 插件的数组 将来webpack在运行时 会加载并调用这些插件
    plugins: [htmlPlugin, new CleanWebpackPlugin()],
    devServer: {
        //首次打包成功 打开浏览器
        open: true,
        //修改端口号
        port: 3000,
        //修改localhost为127.0.0.1
        host: ‘127.0.0.1‘
    },
    // 配置模块
    module: {
        rules: [{
            // 处理。css
            test: /.css$/,
            use: [‘style-loader‘, ‘css-loader‘]
        }, {
            // 处理。less
            test: /.less$/,
            use: [‘style-loader‘, ‘css-loader‘, ‘less-loader‘]
        }, {
            // 处理。img
            // 如果调用的loader有一个 则可以写字符串
            test: /.jpg|png|jpeg|gif$/,
            use: ‘url-loader?limit=470&outputPath=images‘
        }, {
            // 配置babel处理高级js语法
            test: /.js$/,
            use: ‘babel-loader‘,
            exclude: /node_modules/

        }]
    }



}