webpack开发环境的配置

文件目录：

代码：

//开发环境的配置：能让代码运行即可
//运行指令：webpack  会将打包结果输出出去
//     npx webpack serve   只会在内存中编译打包，没有输出
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { options } = require('less')
const { resolve } = require('path')

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/build.js',
        path: resolve(__dirname, 'build')  //到时候文件夹名字就是build
    },
    module: {
        rules: [
            //loader的配置
            {
                //处理less资源
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                //处理css资源
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                //处理img图片资源
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',     //注：使用options的时候要用loader而不是use ,要不然会报错 因为loader是一个，use是多个
                options: {
                    limit: 8 * 1024,
                    name: '[hash].[ext]',
                    esModule: false   //关闭es6模块化，使用commen模块化
                }
            },
            {
                //处理标签里的图片资源   commen解析
                test: /\.html$/,
                loader: 'html-withimg-loader'
            },
            {
                //处理其他资源
                exclude: /\.(html|js|css|less|png|jpg|gif)$/,
                loader: 'file-loader',   //file-loader是将资源原封不动的输出出去
                options: {
                    name: '[hasj].[ext]'
                }
            }
        ]
    },
    plugins: [
        //plugin的配置
        //处理html资源
        new HtmlWebpackPlugin({
            //template以某个html文件为模板
            template: './src/index.html'
        }),

    ],
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        compress: true,
        port: 3000,
        open: true
    },
    mode: 'development'

}