zoukankan      html  css  js  c++  java
  • webpack 生产环境配置(无注释)

    const { resolve } = require('path')
    const MiniCssExtractPlugin  =require('mini-css-extract-plugin')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
    
    process.env.NODE_ENV = 'production';
    
    const commenCssLoader=[
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            loader:'postcss-loader',
            options: {
                ident: 'postcss',//默认配置
                plugins: () => [
                    require('postcss-preset-env')()
                ]
            }
        },
    ]
    
    module.exports ={
        entry:'./src/js/index.js',
        output:{
            filename:'js/built.js',
            path:resolve(__dirname,'build')
        },
        module:{
            rules:[
                {
                    test:/.css$/,
                    use:[...commenCssLoader]
                },
                {
                    test:/.less$/,
                    use:[...commenCssLoader,'less-loader']
                },
                {
                    test:/.js$/,
                    exclude:/node_modules/,
                    use:[
                        {
                            loader:'babel-loader',
                            options:{
                                presets:[
                                    [
                                        '@babel/preset-env',
                                        {
                                            useBuiltIns:'usage',
                                            corejs:{version:3},
                                            targets:{
                                                chrome:'70',
                                                firefox:'62',
                                                ie:'9',
                                                safari:'10',
                                                edge:'17',
                                            }
                                        }
                                    ]
                                ]
                            }
                        },
                        {
                            // //优先执行
                            // enforce:'pre',
                            loader:'eslint-loader',
                            options:{
                                fix:true
                            }
                        },
                    ]
                },
                {
                    test:/.(jpg|png|gif)$/,
                    loader:'url-loader',
                    options:{
                        limit:8*1024,
                        name:'[hash:10].[ext]',
                        outputPath:'imgs',
                        //esModule:false
                    }
                },
                {
                    test:/.html$/,
                    loader:'html-loader'
                },
                {
                    exclude:/.(css|html|js|jpg|png|gif|less|sass)$/,
                    loader:'file-loader',
                    options:{
                        name:'[hash:10].[ext]',
                    outputPath:'media'//配置输出文件夹
                    }
                }
            ]
        },
        plugins:[
            new HtmlWebpackPlugin({
                template:'./src/index.html',
                minify: {
                    collapseWhitespace:true,
                    removeComments:true,
                }
            }),
            new MiniCssExtractPlugin({
                filename:'css/built.css'
            }),
            new OptimizeCssAssetsWebpackPlugin()
        ],
        mode:'production',
        devServer:{
            contentBase:resolve(__dirname,'build.js'),
            compress:true,
            port:3000,
            open:true,
        }
    }
  • 相关阅读:
    Cesium中监听MOUSE_MOVE事件获取经纬度和高度
    CentOS系统重命名
    docker安装步骤
    nginx发布vue 项目
    解决git 本地代码与远程仓库冲突问题
    js通过className删除元素
    bootstrap treeview基本运用
    自定义组件模拟v-model
    使用a标签下载**.txt文件, 而不是直接打开
    mongoose 开源http库
  • 原文地址:https://www.cnblogs.com/hllzww/p/13053758.html
Copyright © 2011-2022 走看看