webpack手动简单配置

 首先新建一个src文件夹,一个index.html文件和一个webpack.config.js文件,将开发中的js代码放入src文件中,我们假设以study.js为例;以下就是webpack.config.js的配置：

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin')
//导出一个配置对象
module.exports={
    // entry：需要进行打包的入口文件，可以是单一入口，也可以是多入口(注意,这里必须加上./)
    entry:{
        entry:'./src/study.js'
    },
    // output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。
    output:{
        //打包后生成文件的绝对路径
        path:path.join(__dirname,'dist'),
        // publicPath:'dist',//这个和下面那个plugins(自动生成html)会有冲突,所以必须注释
        //打包后生成的文件名
        filename:'build.js'
    },
    // module：配置模块，主要是解析CSS和图片转换压缩等功能。
    module:{
        rules:[
            {
                //解决css文件类型的解析规则
                test:/\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // {//解决vue文件类型的解析规则
            //     test: /\.vue$/,
            //     use: 'vue-loader'
            // },
            {//解析css中图片打包路径不正确
                test: /\.(png|jpg|gif)/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        outputPath: 'images/',//这个images文件夹是我们自己建的并非打包生成的
                    }
                }]
            }]
    },
    //(注意:引入这些加载器或者插件之前都必须通过npm或者其他工具安装这些加载器或插件!)
    // plugins：配置插件，根据你的需要配置不同功能的插件(webpack蕴含,支持许多功能的插件)
    plugins:[
        //打包时自动生成html文件的插件
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),// 需要生成的HTML的模板文件
            filename:'index.html' // 生成的HTML文件的名称
        })
    ],
    // devServer：配置开发服务功能。
    devServer:{
        // //以下是配置热更新
        // //设置基本目录结构
        // contentBase:path.resolve(__dirname,'dist'),
        // //服务器的IP地址，可以使用IP也可以使用localhost
        // host:'localhost',
        // //服务端压缩是否开启
        // compress:true,
        // //配置服务端口号
        // port:1717
    }
}

运行webpack,即可自动生成build.js文件,打包成功