webpack学习配置

yigecaizi2

基本配置

[JavaScript] 纯文本查看 复制代码

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
  mode: 'development',//生产模式上线production 开发模式 development 加空格
  // entry: './src/index.js',//单入口配置入口文件
  // entry:[//多入口文件 打包最终形成一个文件
  //   './src/index.js',
  //   './src/mins.js'
  // ],
  // entry:{//多入口文件 打包生成几个文件
  //   one:'./src/index.js',
  //   two:'./src/mins.js'
  // },
  entry:{//多入口文件特殊用法
    vendor:['./src/js/jquey.js','./src/js/public.js'],
    index:'./src/js/index.js',
    home:'./src/js/home.js'
  },
  output: {//输出位置
    path: path.resolve(__dirname, 'dist'),//输出目录
    filename: "[name].js",//指定输出文件名
  },
  module:{//打包css img资源规则
    rules:[

    ]
  },
  plugins:[//插件 范围更广的规则打包html
    new HtmlWebpackPlugin({//几个页面new几个
      template:'./src/index.html',
      filename:'index.html',//指定打包文件
      chunks:['index','vendor'],//指定导入那个js
      minify:{
        collapseWhitespace:true,//移除空格
        removeComments:true//移除注释
      }
    }),//默认会创建一个空 的 自动引入(css/js)
    new HtmlWebpackPlugin({//几个页面new几个
      template:'./src/home.html',
      filename:'home.html',//指定打包文件
      chunks:['home','vendor'],//指定导入那个js
      minify:{
        collapseWhitespace:true,//移除空格
        removeComments:true//移除注释
      }
    }),//默认会创建一个空 的 自动引入(css/js)
  ]

}

lixiangrun4655

有完整的webpack配置吗

yigecaizi2

lixiangrun4655 发表于 2021-8-6 21:20
有完整的webpack配置吗

在B站看哪个高洛峰  学习的，链接这个你可以看看https://www.bilibili.com/video/BV1Pz4y1S7Uv?from=search&seid=7051298189516980536&spm_id_from=333.337.0.0
我的webpakc配置最终是这个样子的

[JavaScript] 纯文本查看 复制代码

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const  OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')
module.exports={
  mode: 'development',//生产模式上线production 开发模式 development 加空格
  entry: './src/index.js',//单入口配置入口文件

  output: {//输出位置
    path: path.resolve(__dirname, 'dist'),//输出目录
    filename: "[name].js",//指定输出文件名
  },
  module: {
    rules: [
      // { test: /\.css$/, use: ['style-loader','css-loader'] },
    { test: /\.css$/, use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader'] },
    { test: /\.less$/, use: [MiniCssExtractPlugin.loader,'css-loader','less-loader'] },
    { test: /\.scss$/, use: [MiniCssExtractPlugin.loader,'css-loader','sass-loader'] },
    // { test:/\.(png|jpg|gif|jpeg)$/,use:['url-loader',{loader:'file-loader',options:{}}]}
    { test: /\.(png|jpg|gif|jpeg)$/,loader:'url-loader',options:{
      publicPath: './images/',//
      outputPath: 'images/',//指定图片路径
      limit: 1028 * 8,//1028字节是1kb
      name:'[name][hash:10].[ext]',
      esModule:false
    }},
    {
      test:/\.html$/,
      loader:'html-loader',
      options:{
        esModule:false
      }
    }
  ],//打包css 和less
  },
  
  plugins:[//插件 范围更广的规则打包html
    new HtmlWebpackPlugin({//几个页面new几个
      template:'./src/index.html',
      filename:'index.html',//指定打包文件名称
    
    }),//默认会创建一个空 的 自动引入(css/js)
    new MiniCssExtractPlugin({//生成单独的css

    }),
    new OptimizeCssAssetsWebpackPlugin()
   
  ]

}