webpack初识

1、什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。

这段话有三个重点：

• 打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。
• 转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。
• 优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。

2、为什要使用WebPack

如今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

a:模块化，让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；

c:scss，less等CSS预处理器

 

 

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于

• ES2015 模块语法（import和export）
• 在项目 package.json 文件中，添加一个 "sideEffects" 入口。
• 引入一个能够删除未引用代码(dead code)的压缩工具(minifier)（例如 UglifyJSPlugin, babel-minify-webpack-plugin, webpack-closure-compiler);或者将mode设成production。

将文件标记为无副作用（side-effect-free）

这种方式是通过 package.json 的 "sideEffects" 属性来实现的.

{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js",
    "*.css"
  ]
}

压缩输出：从 webpack 4 开始，可以通过 "mode" 配置选项设置为 "production"，轻松实现压缩输出。

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
    },
 mode: "production"
};

 devtool:   开发环境下使用inline-source-map,生产环境使用source-map.

Code spliting（代码分离）

 

• 为 Vendor 单独打包（Vendor 指第三方的库或者公共的基础组件，因为 Vendor 的变化比较少，单独打包利于缓存）
• 为 Manifest （Webpack 的 Runtime 代码）单独打包
• 为不同入口的公共业务代码打包（同理，也是为了缓存和加载速度）
• 为异步加载的代码打一个公共的包

【链接：https://juejin.im/post/5b304f1f51882574c72f19b0】

 

1.手动添加入口起点

2.移除重复的依赖模块：（webpack4取消了CommonsChunkPlugin），转而使用下面的方法。

optimization与entry/plugins同级

optimization: {  // 优化
    splitChunks: {  // 分离
      cacheGroups: {
        commons: {
          name: 'common',   // 共享模块的名称
          chunks: 'initial',  //
          minChunks: 2  // 公享模块最少复用过几次
        }
      }
    }
  }

 3.动态导入  import()

async function getComponent () {
       const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');
       var element = document.createElement('div');
       element.innerHTML = _.join(['hello', 'webpack'], ' ');
       return element;
 }

 

缓存：确保 webpack 编译生成的文件能够被客户端缓存，而在文件内容变化后，能够请求到新的文件。

1.使用 [chunkhash] 生成文件名

output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  },

2. 代码分离：optimization.splitChunks在每次修改后的构建结果中，将 webpack 的样板(boilerplate)和 manifest 提取出来。

此外，将第三方库(library)（例如 lodash 或 react）提取到单独的 vendor chunk 文件中。

 

entry: {
    app: './src/script/index.js',
    vendor: ['lodash']
  },
optimization: {  // 优化
      splitChunks: {  // 分离
        cacheGroups: {
          vendor: {
            name: 'vendor',
            priority: 10,
            chunks: 'initial',  //
            // enforce: true
          },
          commons: {
            name: 'manifest',   // 共享模块的名称
            chunks: 'initial',  //
            minChunks: 1  // 公享模块最少复用过几次
          }
        }
    }
}    

注意问题：

 1.混合使用ES2015，AMD CommonJS

你可以自由混合使用三种模块类型（甚至在同一个文件中）。在这个情况中 webpack 的行为和 babel一致。

// ES2015 模块调用 CommonJS
import fs from "fs"; // module.exports 映射到 default
import { readFileSync } from "fs"; // 从返回对象(returned object+)中读取命名的导出方法(named exports)

typeof fs.readFileSync === "function";
typeof readFileSync === "function";

需要让 Babel 不解析这些模块符号，从而让 webpack 可以使用它们。可以通过设置如下配置到 .babelrc

{
  "presets": [
    ["@babel/preset-env", {"modules": false}],
  ]
}

2.只在production环境下才会用到的工具（在development时应避免）

• UglifyJsPlugin
• ExtractTextPlugin
• [hash]/[chunkhash]
• AggressiveSplittingPlugin
• AggressiveMergingPlugin
• ModuleConcatenationPlugin

升级到webpack 4必读 ，webpack一键升级

转载于:https://www.cnblogs.com/ceceliahappycoding/p/10553526.html