webpack打包

概述

webpack是前端打包工具，默认只能打包js，可通过loader打包其他模块，可使用plugin实现自动化，如自动压缩代码等

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
    publicPath: 'dist/'
  }
}

工作模式

配置mode，指定生产和开发，生产会压缩等

  // mode有三种取值，production、development 和 none。
  // production Webpack 会自动优化打包结果；
  // development Webpack 会自动优化打包速度，添加一些调试过程中的辅助；
  // none Webpack 就是运行最原始的打包，不做任何额外处理；
  mode: 'none',

loader

css-loader style-loader 打包css
file-loader url-loader 打包图片、字体等
bable-loader 转换es6

module: {
    rules: [
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /.png$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024 // 10 KB以下使用url-loader否则使用file-loader，项目需引用file-loader
          }
        }
      },
      {
        test: /.html$/,
        use: {
          loader: 'html-loader',
          options: {
            attrs: ['img:src', 'a:href'] // 可把a标签的href当做模块打包
          }
        }
      }
    ]
  }

plugin

插件配置，可实现自动化的功能，如压缩代码，拷贝文件，清空打包目录等

plugins: [
	// 清空打包文件目录
    new CleanWebpackPlugin(),
    // 用于生成 index.html
    new HtmlWebpackPlugin({
      title: 'Webpack Plugin Sample',
      meta: {
        viewport: 'width=device-width'
      },
      template: './src/index.html'
    }),
    // 复制静态资源目录到打包目录
    new CopyWebpackPlugin([
      'public'
    ]),
    new MiniCssExtractPlugin(), // 压缩css
    new webpack.DefinePlugin({
      // 值要求的是一个代码片段 用来定义全局变量，可根据环境不同去配置不同的值
      URL: 'http://api.com'
    })
  ]

dev server

  devServer: {
    contentBase: './public',
    hot: true, // 启动热更新开发
    // hotOnly: true // 只使用 HMR HMR只替换修改模块
    // 服务器代理
    proxy: {
      '/api': {
        // http://localhost:8080/api/users -> https://api.github.com/api/users
        target: 'https://api.github.com',
        // http://localhost:8080/api/users -> https://api.github.com/users
        pathRewrite: {
          '^/api': ''
        },
        // 不能使用 localhost:8080 作为请求 GitHub 的主机名
        changeOrigin: true
      }
    }
  },

source map

eval  cheap-eval-source-map  cheap-module-eval-source-map  eval-source-map  cheap-source-map  cheap-module-source-map  inline-cheap-source-map  inline-cheap-module-source-map  source-map  inline-source-map  hidden-source-map  nosources-source-map
共有12中source map模式，eval代表使用js的eval函数生成，cheap代表简洁的，module代表和源代码相同而不是转换后的，hidden代表隐藏source map但是把文件生成出，nosource是隐藏源代码只显示行列

  devtool: 'eval', // 开启source map 设置为false不开启

生产环境优化

  // 多入口
  entry: {
    index: './src/index.js',
    about: './src/album.js'
  },
  output: {
    filename: '[name].bundle.js'
  },
  optimization: {
    splitChunks: {
      // 自动提取所有公共模块到单独 bundle，代码分割
      chunks: 'all'
    }
  },

    // 代码按需加载，动态导入，
    import(/* webpackChunkName: 'components' */'./posts/posts').then(({ default: posts }) => {
      posts()
    })

  optimization: {
    // 模块只导出被使用的成员
    usedExports: true,
    // 尽可能合并每一个模块到一个函数中
    concatenateModules: true,
    // 压缩输出结果
    minimize: true
  }

hash

  output: {
    filename: '[name]-[contenthash:8].bundle.js', // 8位hash contenthash代表每个打包文件有改动hash变化，[hash]代表项目有变更就会变化，[chunkhash]代表入口文件有变更就会变化
  },