webpack基础配置信息

/**
 * 开发环境下配置
 *
 */



// webpack.config.js 配置文件 






const { resolve } = require('path') // 安装node.js自带
const MtmlWebpackPlugin = require('html-webpack-plugin') //需要npm安装
// 提取css成单独的文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //需要npm安装






// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') //需要npm安装






module.exports= {
    entry: './src/index.js', //入口文件，单入口
 
　　//多文件入口
　　 entry:{
　　　　main: './src/index.js',
　　　　test: './src/test.js'
　　 }






    output: { 
        filename: 'js/build.js', //打包输出文件
        // _dirname node.js变量表示当前文件目录绝对路径
        // build 打包后的文件名
        path: resolve(__dirname, 'build'),
　　　　　clean: true 清除上次打包文件
    },






    // loader 配置
    module:{
        rules:[
            {
                // 正则匹配.css结尾的文件
                test: /\.css$/,
                // 使用那些loader进行处理
                use:[
                    // loader执行顺序从右到左  css-loader ->  style-loader
                    // "style-loader",
                    // MiniCssExtractPlugin.loader 取代style-loader
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            },
            {
                // 处理less资源
                test: /\.less$/,
                // 需要安装两个模块，less，less-loader
                use:[
                    "style-loader",
                    "css-loader",
                    "less-loader",
                ]
            },
            {
                // 处理html中img资源
                text: /\.html$/,
                loader: "html-loader"
                
            },
            // 处理图片资源
            {
                test: /\.(png|jpg|gif)$/,
                // 多个loader需要处理使用use，单个使用loader即可
                loader: 'url-loader',
                options:{
                    // 表示图片大小，小于8kb，就会被base64处理
                    limit: 8 * 1024,
                    name:"[hash:10].[ext]", //名字取哈希地址前10位，[ext]取原来的拓展名
                    outputPath:'image', // 将处理好的img放到image文件中去






                    // 关闭es6模块化
                    esModule: false
                }
            },
            // 处理其它的资源
            {
                exclude: /\.(png|jpg|css|less|gif|js|html)$/,
                loader: "file-loader",
                options:{
                    outputPath:'tool', //将处理好的文件放到tool文件中
                    name: "[hash:10].[ext]" //名字取哈希地址前10位，[ext]取原来的拓展名
                }
            }
        ]
    },






    // plugins 插件配置
    plugins:[
        // 将打包好的文件自动引入到index.html
        new MtmlWebpackPlugin({
            template: './src/index.html',
　　　　　　　 filename: 'app.html', 重命名文件
　　　　　　　 inject: 'body', 自定义script生成的位置在bod里面






            // js，html压缩
            minify:{
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true
            }
        }),
        new MiniCssExtractPlugin({
            // 设置输出文件名
            template: 'css/pulice.css'
        }),
        // 压缩css
        new OptimizeCssAssetsWebpackPlugin()
    ],






    // 打包模式
    mode: 'development', //开发环境
    // mode: 'production' //生产环境
　　devtool: 'inline-source-map' //在开发模式下追踪代码







    // 开发服务器，用来自动化编译，自动打开浏览器，自动刷新浏览器
    // 启动devServer指令：npx webpack-dev-server  需要npm下载此包
    devServer:{
        contentBase: resolve(__dirname, 'build'),






        // 启动gzip压缩
        compress: true, 






        // 端口号
        port: 3306,






        // 自动打开浏览器
        open: true






    }
}