How to optimize packaging for webpack 4.0

  module: {

    rules: [

      {

        test: /\.js$/,

        use: 'babel-loader',

        exclude: /node_modules/, // 排除不处理的目录

        include: path.resolve(__dirname, 'src') // 精确指定要处理的目录

      }

    ]

  }

module: {

  rules: [

    {

      test: /\.js$/,

      use: 'babel-loader?cacheDirectory', // 缓存loader执行结果 发现打包速度已经明显提升了

      exclude: /node_modules/,

      include: path.resolve(__dirname, 'src')

    }

  ]

}

const path = require('path');

function resolve(dir) { // 转换为绝对路径

  return path.join(__dirname, dir);

}

resolve: {

  modules: [ // 优化模块查找路径

    path.resolve('src'),

    path.resolve('node_modules') // 指定node_modules所在位置 当你import 第三方模块时 直接从这个路径下搜索寻找

  ]

}

// main.js

import dep1 from 'util/dep1';

import add from 'util/add';

alias: {

 Utilities: path.resolve(__dirname, 'src/utilities/'),

 Templates: path.resolve(__dirname, 'src/templates/')

}

import Utility from '../../utilities/utility';

import Utility from 'Utilities/utility';

resolve: {

  alias: { // 别名配置 通过别名配置 可以让我们引用变的简单

    'vue$': 'vue/dist/vue.common.js', // $表示精确匹配

    src: resolve('src') // 当你在任何需要导入src下面的文件时可以 import moduleA from 'src/moduleA' src会被替换为resolve('src') 返回的绝对路径 而不需要相对路径形式导入

  }

}

alias: {

  util$: resolve('src/util/add.js')

}

import Test1 from 'util'; // 精确匹配，所以 src/util/add.js 被解析和导入

import Test2 from 'util/dep1.js'; // 精确匹配，触发普通解析 util/dep1.js

// 忽略对jquery lodash的进行递归解析

module: {

  // noParse: /jquery|lodash/

  // 从 webpack 3.0.0 开始

  noParse: function(content) {

    return /jquery|lodash/.test(content)

  }

}

npm i happypack@next -D

const HappyPack = require('happypack');

const os = require('os'); // node 提供的系统操作模块

 // 根据我的系统的内核数量 指定线程池个数 也可以其他数量

const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().lenght})

module: {

  rules: [

    {

      test: /\.js$/,

      use: 'happypack/loader?id=babel',

      exclude: /node_modules/,

      include: path.resolve(__dirname, 'src')

    }

  ]

},

plugins: [

  new HappyPack({ // 基础参数设置

    id: 'babel', // 上面loader?后面指定的id

    loaders: ['babel-loader?cacheDirectory'], // 实际匹配处理的loader

    threadPool: happyThreadPool,

    // cache: true // 已被弃用

    verbose: true

  });

]

npm run dev

module.exports = {

  entry: {

    react: ['react', 'react-dom']

  },

  output: {

    filename: '[name].dll.js', // 动态链接库输出的文件名称

    path: path.join(__dirname, 'dist'), // 动态链接库输出路径

    libraryTarget: 'var', // 链接库(react.dll.js)输出方式 默认'var'形式赋给变量 b

    library: '_dll_[name]_[hash]' // 全局变量名称 导出库将被以var的形式赋给这个全局变量 通过这个变量获取到里面模块

  },

  plugins: [

    new webpack.DllPlugin({

      // path 指定manifest文件的输出路径

      path: path.join(__dirname, 'dist', '[name].manifest.json'),

      name: '_dll_[name]_[hash]', // 和library 一致，输出的manifest.json中的name值

    })

  ]

}

webpack --config webpack_dll.config.js --mode production

// webpack.config.js

const webpack = require('webpack');

plugins: [

  // 当我们需要使用动态链接库时 首先会找到manifest文件 得到name值记录的全局变量名称 然后找到动态链接库文件 进行加载

  new webpack.DllReferencePlugin({

    manifest: require('./dist/react.manifest.json')

  })

]

npm i html-webpack-plugin html-webpack-include-assets-plugin -D

const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const HtmlIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');

pluings: [

  new webpack.DllReferencePlugin({

    manifest: require('./dist/react.manifest.json')

  }),

  new HtmlWebpackPlugin({

    template: path.join(__dirname, 'src/index.html')

  }),

  new HtmlIncludeAssetsPlugin({

    assets: ['./react.dll.js'], // 添加的资源相对html的路径

    append: false // false 在其他资源的之前添加 true 在其他资源之后添加

  });

]

cnpm i webpack-parallel-uglify-plugin -D

// webpck.config.js

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

plugins: [

  new ParallelUglifyPlugin({

    workerCount: 4,

    uglifyJS: {

      output: {

        beautify: false, // 不需要格式化

        comments: false // 保留注释

      },

      compress: { // 压缩

        warnings: false, // 删除无用代码时不输出警告

        drop_console: true, // 删除console语句

        collapse_vars: true, // 内嵌定义了但是只有用到一次的变量

        reduce_vars: true // 提取出出现多次但是没有定义成变量去引用的静态值

      }

    }

  });

]

// .babelrc

{

  "presets": [

    [

      "env", {

        modules: false // 不要编译ES6模块

      },

      "react",

      "stage-0"

    ]

  ]

}

// funs.js

export const sub = () => 'hello webpack!';

export const mul = () => 'hello shaking!';

// main.js

import {sub} from './funs.js'

sub();

webpack --mode production //此时funs.js中没有被用到的代码并没打包进来 而被剔除出去了