webpack 开发环境的简单基本配置

//开发环境的配置
//resolve用来拼接绝对路劲的方法
const resolve = require("path")
const HtmlWebpackPlugin=require('html-webpack-plugin');
const MiniCssExtractPlugin=require("mini-css-extract-plugin")
const OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')
//所有构建工具基于node.js 默认采用common.jsru

//设置node环境变量 :决定使用那个环境
process.env.NODE_ENV="development";//开发环境
// process.env.NODE_ENV="production";//开发环境
//复用loader
const commonCssLoader =[
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        //还需定义browserslist
        loader:'postscc-loader',
        options:{
            ident:'postcss',
            plugins:()=>[require('postcss-preset-env')()
        ]
        }
    }
]

moduel.exports={
        //入口文件
    entry:"./src/index.js",
    //输出
    output:{
        //输出文件名
            filename:"built.js",
        //输入路经
        //_dirname node.js的变量 ，代表当前文件的目录绝对路劲
            path:resolve(_dirname,'build')
    },
    //loader的配置
    model:{
      rules:[
          {
              test:/\.css$/,
              use:[...commonCssLoader
              ]
          },
          {
            test:/\.less$/,
            use:[
                ...commonCssLoader,'less-loader',
            //   MiniCssExtractPlugin.loader,
            //   'css-loader',
            //   {
            //       //还需定义browserslist
            //       loader:'postscc-loader',
            //       options:{
            //           ident:'postcss',
            //           plugins:()=>{
            //               require('postcss-preset-env')
            //           }
            //       }
            //   }
            ]
        },
          {
            test:/\.css$/,
            use:[
              MiniCssExtractPlugin.loader,
              'css-loader',
              'less-loader'

            ]
        },


        //一个文件只能被一个loader处理
        //当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序；
        //先执行esLint在执行babel

        //在package中进行配置eslintConfig -->airbnb
        {
            test:/\.js$/,
            exclude:'/node_modules',//去除别人的格式 只检测自己的代码
            //优先执行属性
            enforce:'pre',
            loader:'eslint-loader',
            options:{
                fix:true,
            }
        },{
            test:/\.js$/,
            exclude:'/node_modules',
            loader:'babel-loader',
            options:{
                presets:[
                    '@/babel/preset-env',
                    {
                        useBuiltIns:'usage',
                        //指定版本core.js
                        corejs:{
                            version:3
                        },
                        //指定兼容性
                        targets:{
                            chrome:'60',
                            firefix:"60",
                            ie:"9",
                            safari:"10",
                            edge:"17",
                        }
                    }
                ]
                
            }
        },

       //处理图片
       {
        test:/\.(jpg|png|gif)$/,
        //下载 url-loader file-loader
        loader:'url-loader',
        options:{
            //图片的大小小于8kb,就会被base64位处理
            //优点：减少请求数量（减轻服务器压力）
            //缺点：图片体积会更大
            limit:8 * 1024,
            //问题因为url-loader默认使用es6模块解析，而html-loader引入图片是ccommon.js
            //解析时会出现问题[object Module]
            //解决：关闭url-loader的es6模块化，使用commonjs解析
            esModule:false,//开启或者关闭es6模块
            //给图片重新命名
            //[hash:10]取图片的hash的前10位
            //[ext]取文件原来扩展名
            name:'[hash:10].[ext]',
            //更改输出文件路径后 的地址
            outputPath:"img"
        }

    },
    {
        test:/\.html$/,
        //处理html文件的img图片（在跟文件引入的img的图片从而被url-loader进行处理）
        loader:'html-loader'
    },

  //打包其他资源（js/css/html）
  {
    exclude:/\.(css|js|html)$/,//排除css /js/html/less/scss
    loader:'file-loader',
    //设置图片名长度
    options:{
        name:"[hash:10].[ext]",
        outputPath:"meadie"
    }
}
        
      ]
        
    },
    //plugins的配置
    plugins:[
            //详细plugins的配置
            new HtmlWebpackPlugin({
                template:"./src/index.html",
                //html压缩
                minify:{
                    //移除空格
                    collapseWhitespace:true,
                    //移除注释
                    removeComments:true,
                }

            }),
            new MiniCssExtractPlugin({
                //对输入的文件重命名
                filename:'css/bulit.css'
            }),
            //压缩css
            new OptimizeCssAssetsWebpackPlugin({

            })
    ],
    //模式
    //生产环境下会自动压缩js代码
    // mode:"development",//开发模式
    mode:"production",//生产模式
//启动devServer 为 webpakc-dev-server
    devServer:{
        //项目构建后的路径
        contentBase:resolve(_dirname,'build'),
        //启动压缩
        compress:true,
        ///端口号
        port:3000,
        //自动打开默认浏览器
        open:true,
    }

}

webpack的建材基本配置 如有问题或错误请及时留言