4.webpack4打包简单优化

萌新自己学习webpack做的简单配置,如有错误请多包含,也可指点,谢谢.

# noParse 内置
# 设置不去解析的包以提高性能

# IgnorePlugin 内置
# 设置不去打包对应插件内的某些文件

# DllPlugin DllReferencePlugin 内置
# 使用额外的配置文件在dist中生成想要换存成dll文件的包
# 使用DllReferencePlugin读取dist中是否有对应的dll文件,如果有,则不再打包对应的包
# 需在html中引用dll包对应的js,不然无法找到

# happypack 
# 如果有比较大的打包需求,可以使用多线程打包提高打包速度

# webpack自带的优化
# 都是只在生产环境生效的功能
# tree-shaking  打包时把没用到的代码自动删除掉 只支持 import 导入的模块
# scope hosting 打包时会自动省略一些可以简化的代码

webpack.config.react.js
使用webpack执行当前配置文件打包生成react的dll文件,在使用webpack.config.js打包时会去查找是否有对应的dll文件.如果有,则不回去打包对应包

const path = require('path')
const webpack = require('webpack')
module.exports = {
  mode: 'development',
  entry: ['react','react-dom'],
  output: {
    filename: '_dll_[name].js',
    path: path.resolve(__dirname, 'dist'),
    library: '_dll_[name]',  // 打包后的js是一个有return的自执行函数,这个属性可以把这个函数赋值给指定的变量
    // libraryTarget: 'this',  // 指定上面赋值的方式,默认为var
  },
  plugins: [
    // 在打包文件中添加对应资源的dll文件 可以使用webpack自带模块DllReferencePlugin动态引入
    new webpack.DllPlugin({
      // 指定路径
      path: path.join(__dirname, './dist', '[name]-manifest.json'),
    // 指定依赖库的名称
      name: '_dll_[name]'
    }),
  ]
}

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const Happypack = require('happypack')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },

  devServer: {
    port: 8080,
    open: true, // 自动打开浏览器
    contentBase: './dst', // 指定启动后默认访问的文件路径
  },
  module: {
    // webpack会在页面引入包时检测该包是否有需要的依赖,会消耗一部分时间
    noParse: /jquery/, // 设置不去解析是否有依赖的包以提高性能
    rules: [{
        test: /.\js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react'
            ]
          }
        }
        // 把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
        // use: 'Happypack/loader?id=js'
      },
      {
        test: /.\css$/,
        use: ['style-loader','css-loader']
        // use: 'Happypack/loader?id=css'
      }
    ]
  },
  plugins: [ // 数组 存放所有的webpack插件
    new HtmlWebpackPlugin({
      template: './src/index.html', // 模板
      filename: 'index.html', // 打包后文件名
    }),
    // 打包时忽略moment插件的语言文件
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.DllReferencePlugin({ // 引用存储在打包文件中的dll文件
      context: path.resolve(__dirname, '..'),
      manifest: require('./dist/main-manifest.json')
    }),
    new Happypack({
      // 用id来标识 happypack处理那里类文件
      id: 'js',
      use: [{
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-env',
            '@babel/preset-react'
          ]
        }
      }]
    }),
    new Happypack({
      // 用id来标识 happypack处理那里类文件
      id: 'css',
      use: ['style-loader','css-loader']
    }),
  ],
}