关于webpack的开发者模式记录

具体配置如下

webpack.config.js 配置文件内容：

/*
开发者环境指令： 1. webpack  //打包输出到bulid文件
                2. npx webpack-dev-server   //在内存中编译，无产生任何文件，实时展现变化，但还未完成html页面实时更新效果。
*/



const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: './js/index.js',
        path: resolve(__dirname, 'bulid')
    },
    module: {
        rules: [
            // 处理css文件
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // 处理less文件
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // 处理图片资源
            {
                // 处理css中的图片
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader',
                //当使用url-loder等老loder时需要指定类型，关闭es6模块化
                type: 'javascript/auto',
                options: {
                    limit: 8 * 1024,
                    name: '[hash:10].[ext]',
                    esModule: false,
                    outputPath: 'img'
                }
            },
            {
                // 处理html中的图片
                test: /\.html$/,
                loader: 'html-loader'
            },
            // 处理其他文件
            {
                exclude: /\.(css|js|html|less|png|gif|jpg)$/,
                loader: 'file-loader',
                type: 'javascript/auto',
                options: {
                    name: '[hash:10].[ext]',
                    esModule: false,
                    outputPath: 'media'
                }
            }
        ]
    },
    // 插件处理html文件
    plugins: [
        new HtmlWebpackPlugin({
            template: resolve(__dirname, './src/index.html')
        })
    ],
    // 开发者环境
    mode: 'development',
    devServer: {
        static: resolve(__dirname, 'build'),
        compress: true,
        port: 4000,
        open: true
    }
}

需要手动创建的文件及文件夹：

按照上面的结构创建目录后，需要单独配置的文件：

index.html   // src/

index.js   // src/js/ 

主要是上面两个文件需要自己创建，其他的文件自己引入就行，不用太在意~~~~