详解webpack打包第三方类库的正确姿势

2024-11-27 19:18:54

webpack 的使用越来越广泛，但其中不乏很多鲜为人知的细节设置，甚至很多人会认为这是 webpack 的 bug。这次，我们就来聊一聊 webpack.optimize.CommonsChunkPlugin。

这个 plugin 我相信几乎90%的用 webpack 的都用了这个，但我同样相信几乎 90% 的用了这个 plugin 的人都没有正确的使用。

  entry: {
    index: './app/main.jsx',
    vendor: ['react', 'react-dom', 'react-router', 'classnames']
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: "[name].[chunkHash:8].js",
    publicPath: '',
    chunkFilename: "[name].[chunkHash:8].js",
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor'],
    }),
  ]

上面这个配置应该大家都不陌生吧？打包第三方 vendor。

其实这样写是有问题的。有什么问题呢？我们根据这个配置来操作一下。

首先，运行起来，我们会得到 vendor.js 的添加 hash 值过后的输出；

然后，修改index入口里面的任意文件，再次编译，得到 vendor.js 的添加 hash 值过后的输出；

最后，比较 vendor.js 两次编译的hash的值，你会惊讶的发现，为什么hash值改变了？我并没有修改vendor啊。

hash值改变了，那我们打包这个vendor也就没有意义了。

置于为什么会造成这个问题，我就不班门弄斧了，想要知道的人自己去研究一下webpack的底层。

在这里，我只是抛出一个解决方案:

  entry: {
    index: './app/main.jsx',
    vendor: ['react', 'react-dom', 'react-router', 'classnames']
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: "[name].[chunkHash:8].js",
    publicPath: '',
    chunkFilename: "[name].[chunkHash:8].js",
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest'],
    }),
  ]

没错，就是上面这个配置，只是简单的加了 'manifest' 。

再次做我们前面的测试，你会发现多了一个manifest.js，但是vendor的hash值不再变化了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

webpack4打包vue前端多页面项目

之前一直用的脚手架,这次自己搭建webpack前端项目,花费了不少心思,于是做个总结. 1.用法项目结构如下: project |- bulid  |- public |- css |- js |- page1.html  |- page2.html  ... |- public/  |- src
三种Webpack打包方式(小结)

准备工作 mkdir webpack_demo && cd webpack_demo #新建文件夹 npm init #创建package.json文件 npm install --save-dev webpack #安装依赖(非全局安装) mkdir app && mkdir public #新建app和public文件夹 cd app && cd.>Greeter.js && cd.>main.js #app文件夹中创建Gre
详解如何使用webpack打包JS

如何使用webpack打包JS 我们在命令行中输入:webpack -h看看webpack的命令行大全 Usage: webpack-cli [options] webpack-cli [options] --entry <entry> --output <output> webpack-cli [options] <entries...> --output <output> webpack告诉我们,用webpack进行打包有三种方法: 1.新建为webpa
webpack 3.X学习之多页面打包的方法

简介我们开发不可能只写一个页面,每次都要写很多页面,这时为了开发效率,我们使用前端自动化工具webpack,那么webpack是如何打包页面的呢?又是如何打包多页面的呢? 单页面打包我们知道要打包单页面的方法,很简单,配置入口,和html插件, const HtmlWebpackPlugin = require('html-webpack-plugin'); const config = { entry:{ index:'./src/index.js' }, output:{ path: p
浅谈Webpack打包优化技巧

前端的打包工具从之前的browserify.grunt.gulp到现如今的rollup.webpack,涌现出了很多优秀的打包工具,而目前最火的无疑是webpack,无论是当前热门的框架还是工具库很多都选择了它作为打包工具,因此在开发中webpack作为打包工具是一个很好的选择.在最近的项目开发中我也用到了webpack,其中也碰到了不少优化方面的问题,这里总结一下webpack打包优化的一些细节和方法. 首先,这次项目用到的是vue的全家桶,在webpack的配置方面直接用的是 vue-cli
详解Webpack多环境代码打包的方法

在实际开发中常遇到,代码在在package.json文件的scripts中,会提供开发环境与生产环境两个命令.但是实际使用中会遇见测试版与正式版代码相继发布的情况,这样反复更改服务器地址,偶尔忘记更改url会给工作带来很多不必要的麻烦(当然也会对你的工作能力产生质疑).这样就需要在生产环境中配置测试版本打包命令与正式版本打包命令. 1.Package.json 文件中增加命令行命令,并指定路径. "scripts": { "dev": "node b
webpack打包nodejs项目的方法

适用情况首先说明,此情况不具备普遍性.若你的情况与笔者类似那么希望这篇文章能够帮到你. 我的项目情况是这样的:用node.js做后台,ejs做模板引擎(即整个页面是一个ejs文件)由node.js将数据渲染完成后,再将完整页面返回给用户. 那么这样做会遇到的问题: 1. 本项目没有html页面,ejs的作用也不是引入公共的组件,直接就是一个完整的页面,用webpack中处理ejs文件的loader返回的是一个函数,故会产生问题 2.由于node.js配置了静态资源目录public,而视图目录与
webpack4.x打包过程详解

一.全局安装 webpack-cli 脚手架 npm install webpack-cli -g 二.新建一个项目wp,并在wp目录下初始化一个package.json文件. npm init -y 在wp目录下新建一个src目录,并在该目录下新建一个index.js 作为入口文件 webpack4.x 给我们提供了两种打包模式: development 为开发模式 production 为生产模式,打包出的 main.js 代码自动压缩我们可以直接使用命令 webpack --mode d
详解webpack打包nodejs项目(前端代码)

随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而webpack就是用于将前端各种文件打包起来.一个简单的webpack应该包含以下几个概念入口起点输出配置组件加载器插件模块模块热替换适用情况首先说明,此情况不具备普遍性.若你的情况与笔者类似那么希望这篇文章能够帮到你. 我的项目情况是这样的:用node.js做后台,ejs做模板引擎(即整个页面是一个ejs文件)由node.js将数据渲染完成后,再将完整页面返回给用户. 那么这样做会遇到的问题: 1. 本项目没
解决vue-cli webpack打包后加载资源的路径问题

vue项目,访问打包后的项目,输入路径后,页面加载空白.这时会有两类问题,都是路径问题. 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白解决办法: config/index.js文件的build->assetsPublicPath的默认值改为 './' assetsPublicPath:资源的根目录.这个是通过http服务器运行的url路径.因为webapp和static中间还有层dist,所以要用'./' 2.另一个就是单纯的在背景图使用相对路径导致加

详解webpack打包第三方类库的正确姿势

相关推荐

随机推荐