webpack开发环境的搭建

将所有的打包资源配置进行整合：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //入口文件
    entry: './src/index.js',
    //输出文件
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'built.js'
    },
    //loader配置
    module: {
        rules: [
        //打包css文件资源
            {   //如果我们需要处理不同的文件，我们需要进行配置不同的loader，在数组中直接添加一个新的元素对象
                test: /\.css$/,
                use: [
                    //由下向上执行
                    'style-loader',
                    'css-loader'
                ]
            }，
            //打包less文件资源
            //如果包括less文件我们还需要配置打包编译less文件
            {
                test: /\.less/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'  //同时我们还需要下载less-loader和less
                ]
            }，
            //打包图片资源
            {
                test: /\.(png|jpg|gif)/,
                //由于我们只需要一个loader，所以我们就可以直接写
                loader: 'url-loader'，
                //所以我们需要进行下载url-loader和file-loader这两个包
                options: {
                    //对图片进行优化
                    limit:8*1024，
                    esModule:flase  //去除ES6模块化
                }
            }，
            //打包html文件中的图片资源
            {
                test: /\.html$/,
                loader:html-loader
            }，
            //打包其他资源
            {
                exclude: /\.(css|js|html|less|png|jpg|gif)/,  //排除我们原来配置完的资源
                loader: 'file-loader',
                options: {
                    name；'[hash:10].[ext]'  //由于我们打包完输出的文件名为一长串的哈希数，我们取前10位就好，[ext]代表保留原来的后缀
                }
            }
        ]
    },
    mode: 'development'，
    //进行html文件资源打包
    plugins:[
    new HtmlWebpackPlugin({template: './src/index.html'});
]
},
//开发环境配置：devServer
devServer:{
    contentBase:path.resolve(__dirname,'build')，  //打包输出路径
    compress:true,  //启动gaip压缩
    port:3000, //设置端口号
    open:true   //自动打开浏览器
}

运行指令：
$ npx webpack-dev-server