webpack是一个现在的javaScript应用的静态模块化打包工具，主要就是模块和打包

首先，在根目录中创建其配置文件 webpack.config.js

模块：前端模块化的一些方案：AMD、CMD、CommonJS、ES6

打包：就是根据所有模块的依赖关系进行模块合并，将浏览器无法识别的less，js等文件内容转化为可以识别的内容, 将各种资源模块进行打包合并成一个多个包，在打包的过程中，还可对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法,将TypeScript转成JavaScript等等操作

主要分为几个部分

一：entry 主要是入口模块文件配置项

二：output 主要是出口文件配置项

三：plugins 主要是插件模块,用于配置各种插件

四：module 主要配置一些规则转化, 例如解读CSS,图片如何转换，压缩

五：devServer 主要进行配置webpack开发服务功能，热更新

打包模式

一：development 开发模式，不会对打包生成的文件进行代码压缩和性能优化 打包速度快，适用于开发阶段使用

二：production 生产模式，会对打包生成的文件进行代码压缩和性能优化 打包速度很慢，仅适合在项目发布阶段使用不设置默认为production模式

if(process.env.type== "build"){
  // 开发环境url
  var website={
    publicPath:"http://192.168.1.7:1024/"
  }
}else{
  // 生产环境url
  var website={
    publicPath:"https://www.baidu.com/"
  }
}

1：entry模块 ，配置单入口或者多个入口文件

 entry:{
    // 多入口
    entry:'./src/entry.js',
    // aa: './src/entry1.js'
  },

2：output模块，主要进行模块打包后文件位置指定以及文件名设置

output: {
    path: path.resolve(__dirname,'dist'), // 打包文件的路径
    filename: '[name].js', // [name].js  生成的打包文件，同src目录下一致
    publicPath: website.publicPath // 打包之后的资源路径
  },

3：plugins模块,主要配置各种插件，用于生产模版和各项功能

plugins: [
    new CleanWebpackPlugin(), // 打包前清除dist文件
    // 打包HTML文件
    new html({
      minify: false, // 是否压缩
      hash: false, // 如果true  webpack 为所有包含的脚本和CSS文件 添加唯一的 编译哈希。 这对缓存清除非常有用
      template: path.resolve(__dirname,'./src/index.html'),  // webpack 需要模板的路径
      filename: 'index.html' // 要将HTML写入的文件。 默认为 index.html 
    }),
    new uglify(), // js文件压缩
    new miniCss({ // css文件分离
      filename: 'css/[name].css'
    })
  ]

4：module模块,主要进行规则配置

 module: {
    rules: [
      // css,less文件如何处理
      {
        test: /\.(less|css)$/,
        use: [
          miniCss.loader, // 分离css文件
          'css-loader',
          'postcss-loader', // css增加前缀
          'less-loader',  // 解析less
        ]
      },
      // 图片如何处理
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 50, // 是把小于50B的文件打成Base64的格式，写入JS
              outputPath: 'images/',
              esModule:false
            }
          }
        ]
      },
      // html中图片处理
      {
        test: /\.(htm|html)$/i,
        use:[ 'html-withimg-loader']
      },
      // 转换为es6语法
      {
        test:/\.(jsx|js)$/,
        use:{
          loader:'babel-loader'
        },
        exclude:/node_modules/
      }
    ]
  }

5：devServer模块，主要进行端口，压缩这些，热更新这些配置

devServer: {
    contentBase: path.resolve(__dirname, 'dist'), // 设置基本目录结构
    host: '192.168.1.7', // 服务器的IP地址
    compress: true, // 服务端压缩是否开启
    port: 1024 // 端口
  }