webpack练习模板

//获取当前文件路径
let path = require('path')

//安装html-webpack-plugin依赖： cnpm install html-webpack-plugin --save-dev
let HtmlWebpackPlugin = require('html-webpack-plugin')

//console.log(path.resolve(__dirname,'dist'))

module.exports = {
    // 入口文件
    entry:'./src/index.js',
    output:{
        // 设置输出文件名称
        filename:'bundle.js',
        // 输出路径
        // 绝对路径
        path:path.resolve(__dirname,'dist')
    },
    //开发模式 production（生产模式）
    mode:'development',
    // loader的配置
    module:{
        //对某种格式的文件进行转换处理
        rules:[
            {
                test:/\.css$/,
                use:[
                    // use数组中loader的顺序是从下到上，逆序执行
                    //将js的样式内容插入到style里面
                    'style-loader',
                    'css-loader'
                ]
            },
            //图片解析
            //匹配图片文件
            {
                test:/\.(jpg|png|gif)$/,
                loader:'url-loader',
                //图片小于8kb,base64处理,减少请求的数量，但会使得体积更大
                options:{
                    limit:8*1024,
                    // url-loader的es6模块化解析关闭，因为和html-webpack-plugin冲突
                    esModule:false,
                    //取hash前十位，拓展名为ext
                    name:'[hash:10].[ext]',
                }
            },
            {
                test:/\.html$/,
                loader:'html-loader'
            }
        ]
    },
    //配置插件
    plugins:[
        new HtmlWebpackPlugin({
        	//设置主页
            template:'./src/index.html'
        })
    ],
    //热更新
    devServer:{
        //项目构建路径
        contentBase:path.resolve(__dirname,"dist"),
        //启动 gzip 压缩
        compress:true,
        //端口号
        port:9566,
        //自动打开浏览器
        open:true
    }

}