webpack打包全流程

一、 webpack 五个核心概念

1.1 Entry 入口(Entry)
指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

1.2 Output 输出(Output)
指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

1.3 Loader
Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解 JavaScript)

1.4 Plugins
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等。

1.5 Mode
模式(Mode)指示 webpack 使用相应模式的配置。

二、编译打包应用

初始化 package.json -- npm init

下载并安装 webpack --npm install webpack webpack-cli -g

开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development/production打包入口及输出位置 打包环境配置

三、配置webpack

const { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。
module.exports = { 
 mode: 'development' //开发环境   production  //生产环境
      entry: './src/js/index.js', //  单入口文件
      // entry: {                     //多入口  会打包双方重复文件
      //   index: './src/index.js',
      //   another: './src/another-module.js'
      // },
      // entry: {                     //多入口   lodash不会重复打包
      //   index: { import: './src/index.js', dependOn: 'shared' },
      //   another: { import: './src/another-module.js', dependOn: 'shared' },
      //   shared: 'lodash'
      // },
     output: { // 输出配置
         filename: './built.js', // 输出文件名 
         path: resolve(__dirname, 'dist'),  //打包后的输出位置 webpack当前目录下的  dist
    //contenthash根据内容变化生成文件名 不变不修改名字会用缓存
        filename: 'scripts/[name].[contenthash].js', //'bundle.js',      //打包后的文件名  多个入口不能写固定一个名字
        clean: true,   //打包后清除上次内容
        assetModuleFilename: 'images/[contenthash][ext]', //静态文件打包地址/文件名
        publicPath: ''
     },
     devtool: 'inline-source-map',  //打包后找到真实源代码位置
    devServer: {            //实时更新
        static: './dist'， 
        hot: true,   //开启热更新
        compress: true, // 启动gzip压缩
        port: 3000, // 端口号
        open: true // 自动打开浏览器
        proxy: {   //代理
          '/api': {
            target: 'http://localhost:4000',
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              '^/api': ''
            }
      }
    }
  },
 module: {
    rules: [
      // 详细loader配置
      // 不同文件必须配置不同loader处理
     {
        test: /\.(jpg|gif|png)/,
        use: 'url-loader',
        option: {// 图片大小小于8kb，就会被base64处理// 优点: 减少请求数量（减轻服务器压力）// 缺点：图片体积会更大（文件请求速度更慢）
          esModule: true,
          limint: 5 * 1024,    //图片是否转base64
          name: '[hash: 10].[ext]'  //图片命名
        }
      },
      {
        test: /\.(css|less)$/,
        // use: ['style-loader', 'css-loader', 'less-loader']  //从后往前编译 先解析在编译  行内样式
        use: ['MinCssExtractPlugin.loader', 'css-loader', 'less-loader'], //把css文件打包到一个css 用link引入到html中
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              [
                '@babel/plugin-transform-runtime'  //为promise解决
              ]
            ]
          }
        }
      }，

    ]
  },
 plugins: [
webpack.HotModuleReplacementPlugin(), //热更新
    new HtmlWebpackPlugin({
      template: './index.html', //要打包的html
      filename: 'app.html',  //html打包后的名字
      inject: 'body',   //script 标签生成地址
      collapseWhitespace: true,  //压缩移除空格
      removeComments: true,  //压缩移除注释
    }),
    new MinCssExtractPlugin({   //把css文件打包到一个新css 用link引入到html中 可修改地址/文件名
      filename: 'styles/[contenthash].css'
    })
  ],
 optimization: {
    minimizer: [
      new CssMinimizerWebpackPlugin()  //还需将mode改为production  会压缩css代码
    ],
    splitChunks: {
      // chunks: 'all',// 公共文件 lodash不会重复打包
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chuns: 'all'
        }
      }
    }
  }
};