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/

        }]
    }



}

webpack导出模块的属性：

1.mode---运行环境(development，production)

2.entery---webpack入口文件

3.output---webpack生成文件的位置path 以及文件名filename(注意:把js放到一个文件夹中在 js/文件名）

4.plugins---插件

5.devServer---配置webpack,可以通过port修改端口号，open设定第一次运行是否打开浏览器，host设定域名是host还是127.0.0.1

6.module---loader的配置通过path，use

 

 

 

webpack常用的loader与plugin：https://segmentfault.com/a/1190000005106383