webpack5 基本配置

Webpack配置实战

原创已于 2024-06-06 10:28:38 修改 · 384 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

于 2024-05-31 14:32:51 首次发布

在这里插入图片描述
const path=require(“path”);
const {CleanWebpackPlugin}=require(“clean-webpack-plugin”);
const HtmlWebpackPlugin=require(“html-webpack-plugin”);
const {DefinePlugin}=require(“webpack”) ; //webpack内置的插件
const CopyWebpackPlugin=require(‘copy-webpack-plugin’);
const {VueLoaderPlugin}=require(“vue-loader/dist/index”)

module.exports={
mode:“development”,
devtool:“source-map”,
entry:“./src/main.js”,
output:{
path:path.resolve(__dirname,“./build”),
filename:“js/bundle.js” //将js文件放到js里面
},
module:{
rules:[
{
test:/.js$/,
loader:“babel-loader”
// use:
// {
// loader:“babel-loader”,
// options:{
// // plugins:[
// // “@babel/plugin-transform-arrow-functions”,
// // “@babel/plugin-transform-block-scoping”
// // ],
// // presets:[
// // “@babel/preset-env”
// // ]
// }

      // }
    


  },
  {
    test:/\.(less|css)$/,
    //1.loader语法糖
    // loader:"css-loader"
    //2.完整写法
    use:[
      "style-loader",
      "css-loader",
      "less-loader",
      "postcss-loader"
      // {
      //   loader:"postcss-loader",
      //   options:{
      //     postcssOptions:{
      //       plugins:[
      //         require("autoprefixer")
      //       ]
      //     }
      //   }
      // } 
    ]
  },
  // {
  //   test:/\.less$/,
  //   use:[
  //     "style-loader",
  //     "css-loader",
  //     "less-loader"
  //   ]

  // },
  // {
  //   test:/\.(jpe?g|gif|png|svg)$/,
  //   use:[
  //     {
  //       loader:"url-loader",
  //       options:{
  //         // outputPath:"img", //放到哪个文件夹下
  //         name:"img/[name]_[hash:6].[ext]",//文件名
  //         limit:120*1024,
  //         esModule:false,  //关闭url-loader es6 模块化，使用commonjs解析
  //       }
  //     }

  //   ],
  //   type:"javascript/auto"//不会出现2张图片
  // },
  // {
  //   test:/\.(jpe?g|svg|gif|png)$/,
  //   type:"asset",
  //   generator:{
  //     filename:"img/[name]_[hash:6][ext]"

  //   },
  //   parser:{
  //     dataUrlCondition:{
  //       maxSize:120*1024,
  //     }
  //   }
  // },
  {
    test:/\.(jpe?g|png|gif|svg)$/,
    type:"asset",
    generator:{
      filename:"img/[name]_[hash:6][ext]"
    },
    parser:{
      dataUrlCondition:{
        maxSize:20*1024
      }
    }
  },
  {
    test:/\.(eot|ttf|woff2?)$/,
    type:"asset/resource",
    generator:{
      filename:"font/[name]_[hash:6][ext]"
    }

  },
  {
    test:/\.vue$/,
    loader:"vue-loader"
  }
]

},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:‘./public/index.html’,
title:“哈哈哈哈”
}),
new DefinePlugin({
BASE_URL:“‘./’”,
VUE_OPTIONS_API:true,
VUE_PROD_DEVTOOLS:false,
VUE_PROD_HYDRATION_MISMATCH_DETAILS:false
}),
new CopyWebpackPlugin({
patterns:[
{
from:“public”,
globOptions:{
ignore:[
“**/index.html”
]
}
}
]
}),
new VueLoaderPlugin()