莫克力学习博客

webpack学习

webpack概念

  • entry
  • output
  • loader
  • plugin
  • optimization // webpack4
  • externals
  • mode
    development 或 production

entry

单页面入口

1
2
3
4
5
6
7
const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

多页面片

filename 用于输出文件的文件名。
目标输出目录 path 的绝对路径。 

1
2
3
4
5
6
7
const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
}

output

1
2
3
4
5
6
7
8
const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;

多页面片入口起点

1
2
3
4
5
6
7
8
9
10
{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

mode 模式

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。 

1
2
3
4
5
6
module.exports = {
  mode: 'production'
};
// 或者
或者从 CLI 参数中传递：  
webpack --mode=production

loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！ 

1
2
3
4
5
6
7
8
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

插件(plugins)

插件目的在于解决 loader 无法实现的其他事 

1
2
3
4
plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]

构建目标(targets)

1
2
3
module.exports = {
  target: 'node' // 默认为web
};

devServer本地服务器

1
2
3
4
5
6
7
devServer: {
        contentBase: "./dist", // 本地服务器所加载文件的目录
        port: "8088",  // 设置端口号为8088
        inline: true, // 文件修改后实时刷新
        historyApiFallback: true, //不跳转
        hot: true // 热更新
    }

模块热替换

HMR

Source Maps调试配置

作为开发，代码调试当然少不了，那么问题来了，经过打包后的文件，你是不容易找到出错的地方的，Source Map就是用来解决这个问题的

__dirname

在任何模块文件内部，可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径。

配置：

configureWebpack

如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。

Runtime

在浏览器运行时，webpack 用来连接模块化的应用程序的所有代码。runtime 包含：在模块交互时，连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。

Manifest

当编译器(compiler)开始执行、解析和映射应用程序时，它会保留所有模块的详细要点。这个数据集合称为 “Manifest”，当完成打包并发送到浏览器时，会在运行时通过 Manifest 来解析和加载模块。无论你选择哪种模块语法，那些 import 或 require 语句现在都已经转换为 webpack_require 方法

webpack.optimize.CommonsChunkPlugin来帮我们分离代码，将mainfest、第三方库包，业务代码独立成三个文件

1.runtime

在浏览器运行时,webpack用来连接模块化的应用程序的所有代码 runtime包含:

在模块交互时,连接模块所需的加载和解析逻辑
包括浏览器中的已加载模块的连接,以及懒加载模块的执行逻辑

2.manifest

manifest数据用来管理生成的index.html文件和bundle以及各种资源,把他们加载到浏览器中

当编译器开始执行、解析和映射应用程序,会保留所有模块的详细要点. 这个集合称为Manifest

打包完成发送到浏览器 运行时通过Manifest来解析和加载模块 import 或require语句转换为 webpack require 方法 此方法指向模块标识符 通过manifest 中的数据 runtime 将能够查询模块标识符,检索出背后对应的模块

chainWebpack

是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。

webpack3和webpack4对比

1.替换插件 extract-text-webpack-plugin，使用 webpack4 推荐使用的插件mini-css-extract-plugin
2.在 webpack4 中不再支持 CommonsChunkPlugin，而是使用 splitChunks 替代

  • CommonsChunkPlugin 会提取一些我们不需要的代码
  • 它在异步模块上效率低下
  • splitChunks它不会打包不需要的模块
  • splitChunks对异步模块有效（默认情况下是打开的）
    webpack 4 已经废除了 之前 UglifyJsPlugin,用 optimization.minimize 替代

    vue-cli3使用

webpack多页面片

webpack3/4大致差不多，只是部分插件不一样

  • entry单页面片 ‘./src/index.html’，多页面片
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
      entry: {
        app: './src/app.js',
        search: './src/search.js'
      },
      output: {
        filename: '[name].js',
        path: __dirname + '/dist'
      }
    }
  • htmlWebpackPlugins
  • 使用 CommonsChunkPlugin 为每个页面间的应用程序共享代码创建 bundle。由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。