精华内容
下载资源
问答
  • 主要介绍了webpack3升级到webpack4遇到问题总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 仅适用于Webpack 4 。 安装 只需在终端中运行: npm add --save-dev webpack-mode 或(如果您使用Yarn) yarn add --dev webpack-mode 用法 当您运行webpack --mode=production或NODE_ENV=production webpack ...
  • 主要介绍了webpack 4 升级迁移的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue-element-ui-scaffold-webpack4 注: 目前已升级为webpack5,如需要使用webpack4,可切换分支:git checkout webpack4。 **vue3 + element-ui + webpack5 版本:可切换分支:git checkout vue3 ** 本项目为vue下...
  • 前段时间,泡面将自己的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本,现在才拉出来记录一下,已备忘之用,也和大家分享一下,以免大家采坑。 原先的环境 项目原先通过Vue-cli 2.9.3 版本构建,原先使用...
  • webpack4中文手册,手工导出带书签,包含概念、配置、Api、指南、loader、插件,方便大家离线使用,感谢webpack中文网的各位贡献人员
  • vue webpack4示例 笔记 现在您可以使用创建webpack4项目,不需要此项目。 现在你可以使用创建webpack4项目,不必再看下面的了。 这是带有webpack4的Vue项目的示例 用法 通过克隆此库开始使用webpack4: git clone -...
  • 文章目录webpack 4打包使用—基础篇全局安装webpack4打包项目webpack-dev-serverwebpack-dev-server 的命令参数 全局安装webpack4 npm i webpack -g npm i webpack-cli -g webpack4在安装时跟3不一样 ,还需要安装...
  • webpack4.x基础入门

    2018-04-02 14:55:50
    对最新的webpack4.x进行解析,对常见的错误和运行方式进行案例展示。通过对webpack4.x的最新剖析,可以快速准确学习最新的webpack开发技术,对前端开发工作效率提升n倍。
  • webpack4

    千次阅读 2018-02-28 15:30:05
    还好前面写webpack3.x稍微赶上了...包含了大量的特性更新, 以及极大的性能优化(最高可达 98%)Webpack 4 中移除了 CommonsChunkPlugin, 替换以一系列默认的配置以及简单的 optimize.splitChunks 接口同时 Webpack 4 ...

    还好前面写webpack3.x稍微赶上了点热度,最近在准备重构,还在考虑要不要使用parcel,正好发布了webpack4.0.0,就研究了下,修改还是比较大的。包含了大量的特性更新, 以及极大的性能优化(最高可达 98%)Webpack 4 中移除了 CommonsChunkPlugin, 替换以一系列默认的配置以及简单的 optimize.splitChunks 接口同时 Webpack 4 为我们带来了 mode 的配置项, 允许开发者根据不同的需求选择是面向开发环境优化还是生产环境优化, 从而降低了初学者的门槛更多变化。
    webpack4.0.0更新
    下面摘取其中比较重要的几个点

    变化

    不再支持nodejs4以下的版本
    1.您现在必须选择(mode或–mode)两种模式:生产或开发
    生产能够实现各种优化以生成优化的捆绑包
    生产不支持观看,开发针对快速增量重建进行了优化
    生产也使模块连接(范围提升)
    process.env.NODE_ENV 被设置为生产或开发(仅在构建代码中,而不是在配置中)

    2.您不再需要使用这些插件:
    NoEmitOnErrorsPlugin- > optimization.noEmitOnErrors(默认情况下处于生产模式)
    ModuleConcatenationPlugin- > optimization.concatenateModules(默认情况下处于生产模式)
    NamedModulesPlugin- > optimization.namedModules(在开发模式下默认开启)
    CommonsChunkPlugin 被删除 - > optimization.splitChunks

    特点

    webpack现在支持这些模块类型:
    javascript / auto:(webpack 3中的默认版本)启用了所有模块系统的Javascript模块:CommonJS,AMD,ESM
    javascript / esm:EcmaScript模块,所有其他模块系统都不可用
    javascript / dynamic:只有CommonJS和EcmaScript模块不可用
    json:JSON数据,可通过require和import获取
    webassembly / experimental:WebAssembly模块(目前是实验性的)
    WebAssembly模块
    可以导入其他模块(JS和WASM)
    来自WebAssembly模块的导出通过ESM导入进行验证
    尝试从WASM导入不存在的导出时,您会收到警告/错误
    只能用于异步块。它们不起作用(对网络性能不利)
    使用WASM通过导入模块 import()
    optimization.splitChunks选项介绍
    https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693

    下面的太冗长了,就不贴了

    我们在社区中请求大家对 webpack 4 进行构建性能测试,得出的结果非常有趣。结果很惊人,构建时间降低了 60%-98%!!
    性能测试过程中也发现了一些 loader 的 bug 我们已经及时修复了!!计划在v5版实现多进程,或者缓存功能。进一步提高性能.

    Mode, 零配置以及默认值

    webpack 新增了一个 mode 配置项。mode 有两个值:development 或者是 production,默认值是 production。mode 是我们为减小生产环境构建体积以及节约开发环境的构建时间提供的一种优化方案。entry,output 这些配置项也都有默认值了。这意味着你不需要每次都配置它们了,当然包括 mode。这可能意味着从现在开始,在我们做出如此巨大改变之后,你的配置文件会变得非常小!

    WebAssembly 支持

    Webpack 现在默认支持在任何本地 WebAssembly 模块中的 import 和 export 语句。这意味着你可以直接在 Rust, C++, C 或者其它 WebAssembly 支持语言中使用 import。

    总结

    : 估计受到了parcel的威胁,在构建速度和配置这两个比较不好的方面有了极大的提升,但是并未做到极致,可以用webpack-cli以体验webpack4.0.0的功能,目前vue-cli目前还不支持,可以再vue-cli的包里查看版本@vue/cli-service/package.json中查看webpack版本

    展开全文
  • webpack5新功能_Webpack 4的新增功能

    千次阅读 2020-08-12 20:48:31
    webpack5新功能 介绍 (Introduction) Webpack is a static module bundler for modern JavaScript applications. It helps to bundle all of the different modules and packages them into one or more bundles. ...

    webpack5新功能

    介绍 (Introduction)

    Webpack is a static module bundler for modern JavaScript applications. It helps to bundle all of the different modules and packages them into one or more bundles.

    Webpack是用于现代JavaScript应用程序的静态模块捆绑器。 它有助于捆绑所有不同的模块,并将它们打包成一个或多个捆绑。

    This week, Webpack 4 was released, offering new features and improvements. This article explores the new features and improvements in Webpack 4.

    本周,发布了Webpack 4,提供了新功能和改进。 本文探讨了Webpack 4中的新功能和改进。

    To get started with webpack 4, install in your project using npm:

    要开始使用webpack 4,请使用npm在项目中安装:

    • npm install webpack webpack-cli --save-dev

      npm安装webpack webpack-cli --save-dev

    You can also install it with Yarn:

    您也可以使用Yarn安装它:

    • yarn add webpack webpack-cli --dev

      纱线添加webpack webpack-cli --dev

    Node.js支持 (Node.js Support)

    Webpack 4 drops support for Node.js 4. This decision was made so as to take advantage of the modern ES6 syntax which results in a more cleaner and stable codebase.

    Webpack 4放弃了对Node.js 4的支持。做出此决定是为了利用现代ES6语法,从而使代码库更加简洁和稳定。

    It’s important to note that projects using older versions of Webpack might have reduced performance as modern JavaScript syntax is now in use.

    重要的是要注意,由于现在使用的是现代JavaScript语法,因此使用旧版Webpack的项目可能会降低性能。

    提高构建速度 (Increased Build Speed)

    Using Webpack 4 now guarantees you up to a 98% decrease in build time for your projects thanks to performance improvements.

    现在,由于性能提高,使用Webpack 4可以使您的项目构建时间最多减少98%。

    The following images show the build time for a project using Webpack 3 and Webpack 4, respectively:

    下图分别显示了使用Webpack 3和Webpack 4的项目的构建时间:

    Webpack 3 built the project in 1350 milliseconds. Webpack 4 built the project in 865 milliseconds:

    Webpack 3在1350毫秒内完成了该项目。 Webpack 4在865毫秒内完成了该项目:

    模式属性 (The Mode Property)

    Webpack 4 ships with a property called mode which allows you to set which environment you’re working on: development or production. Each option has its own advantages and usage.

    Webpack 4附带了一个名为mode的属性,该属性使您可以设置要处理的环境: developmentproduction 。 每个选项都有其自身的优点和用法。

    Setting the mode to development allows you to focus on building by giving you the best development experience with features like:

    mode设置为development可以通过以下功能为您提供最佳的开发体验,从而使您可以专注于构建:

    • Tooling for browser debugging.

      浏览器调试工具。
    • Comments, detailed error messages and hints for development are enabled.

      启用注释,详细的错误消息和开发提示。
    • Fast and optimized incremental rebuilds.

      快速优化的增量重建。

    Setting mode to production offers you the best option and defaults needed for deploying your project such as:

    production mode设置为production可以为您提供最佳选项和部署项目所需的默认值,例如:

    • Optimizations to generate optimized bundles.

      用于生成优化包的优化。
    • Module concatenating (Scope Hoisting).

      模块级联(示波器吊装)。
    • Smaller output size.

      输出尺寸较小。
    • Exclusion of development-only code.

      排除仅开发代码。

    webpack will always throw an error if the mode has not been set as seen in the following figure:

    如果未设置mode则webpack始终会引发错误,如下图所示:

    You can set your mode in the webpack.config.js file to either development or production.

    您可以在webpack.config.js文件中将模式设置为developmentproduction

    webpack.config.js
    webpack.config.js
    module.exports = {
        mode: 'development'
    }

    or

    要么

    webpack.config.js
    webpack.config.js
    module.exports = {
        mode: 'production'
    }

    The mode property also accepts none instead of development or production if you’d like to do away with the error thrown by Wepback and disable everything.

    如果您想消除Wepback引发的错误并禁用所有功能, mode属性也将不接受none而不是进行developmentproduction

    插件和优化 (Plugins and Optimizations)

    The CommonsChunkPlugin was removed in Webpack 4 and has been replaced with a set of defaults and API called optimization.splitChunks and optimization.runtimeChunk. This means you now get to have shared chunks automatically generated for you. Some other plugins were also deprecated in version 4.

    所述CommonsChunkPlugin中的WebPack 4除去并已被替换为一组缺省值和API调用的optimization.splitChunksoptimization.runtimeChunk 。 这意味着您现在可以自动为您生成共享块。 其他一些插件在版本4中也已弃用。

    • NoEmitOnErrorsPlugin was deprecated and is now optimization.noEmitOnErrors. It’s set to on by default in production mode

      NoEmitOnErrorsPlugin已被弃用,现在为optimization.noEmitOnErrors 。 在生产模式下默认设置为打开

    • ModuleConcatenationPlugin was deprecated and is now optimization.concatenateModules. It’s set to on by default in production mode

      不推荐使用ModuleConcatenationPlugin ,现在是optimization.concatenateModules 。 在生产模式下默认设置为打开

    • NamedModulesPlugin was deprecated and is now optimization.namedModules. It’s set to on by default in production mode

      不建议使用NamedModulesPlugin,现在为optimization.namedModules 。 在生产模式下默认设置为打开

    In a bid to improve performance and get the best optimizes, UglifyJs now caches and parallizes by default in webpack 4.

    为了提高性能并获得最佳的优化,UglifyJs现在默认在webpack 4中缓存和并行化。

    新模块类型 (New Module Types)

    Webpack now supports these module types:

    Webpack现在支持以下模块类型:

    • javascript/auto: (The default in webpack 3) Javascript module with all module systems enabled: CommonJS, AMD, ESM

      javascript / auto :(webpack 3中的默认设置)启用了所有模块系统的Javascript模块:CommonJS,AMD,ESM

    • javascript/esm: EcmaScript modules, all other module system are not available

      javascript / esm:EcmaScript模块,所有其他模块系统均不可用

    • javascript/dynamic: Only CommonJS and, EcmaScript modules are not available

      javascript / dynamic :仅CommonJS和EcmaScript模块不可用

    • json: JSON data, it’s available via require and import

      json :JSON数据,可通过require和import获得

    • webassembly/experimental: WebAssembly modules (currently experimental)

      webassembly / experimental :WebAssembly模块(目前处于实验阶段)

    javascript/auto used to be the default module in Webpack 3, but Webpack 4 completely abstracted the JavaScript specificity from the code base to allow for this change so that users can specify the kind of module they want.

    javascript/auto曾经是Webpack 3中的默认模块,但是Webpack 4从代码库中完全提取了JavaScript的特殊性,以允许进行此更改,以便用户可以指定所需的模块类型。

    Also, Webpack will look for the .wasm, .mjs, .js and .json extensions in this order.

    此外,将的WebPack寻找的.wasm.mjs.js.json顺序扩展。

    0CJS (0CJS)

    0CJS means a Zero Config app. It’s the idea that you need the minimum or zero config to get a JavaScript project up and running. That’s the premise the relatively new bundler, Parcel also runs on. You don’t need a configuration file to get started building your app.

    0CJS表示零配置应用程序。 这个想法是您需要最小或零的配置才能启动和运行JavaScript项目。 这是相对较新的打包机( Parcel)也要运行的前提。 您不需要配置文件即可开始构建应用程序。

    With version 4, Webpack no longer requires a webpack.config.js file.

    在版本4中,Webpack不再需要webpack.config.js文件。

    All you need to do is have a ./src/index.js file. Whenever you run the webpack command in the terminal, Webpack knows to use that file as the entry point for the application. This might come in handy for small projects.

    您需要做的只是创建一个./src/index.js文件。 每当您在终端中运行webpack命令时,Webpack就会知道使用该文件作为应用程序的入口点。 对于小型项目,这可能会派上用场。

    其他更新 (Other Updates)

    • Dead branches are now removed by Webpack itself. This was done by Uglify before but Webpack is responsible for removing dead code now.

      死分支现在已由Webpack本身删除。 这是以前由Uglify完成的,但Webpack现在负责删除无效的代码。
    • import() now supports webpackInclude and webpackExclude as a magic comment. This allows filtering files when using a dynamic expression.

      import()现在支持将webpackIncludewebpackExclude作为魔术注释。 这样可以在使用动态表达式时过滤文件。

    • Using System.import() in your code now emits a gentle warning. import() is advised.

      现在,在代码中使用System.import()会发出警告。 建议使用import()

    • UglifyJs now caches and runs in parallel by default.

      UglifyJs现在默认情况下缓存并并行运行。
    • script tags no longer use text/javascript and async as this are the default values. This saves a few bytes.

      脚本标记不再使用text/javascriptasync因为这是默认值。 这样可以节省一些字节。

    结论 (Conclusion)

    These are just some of the many features that are in webpack 4. There are still so many updates and improvement to look forward to such as:

    这些只是webpack 4中的许多功能中的一部分。仍有许多更新和改进值得期待,例如:

    • HTML/CSS modules. This means you can use an HTML/CSS file as an entry point.

      HTML / CSS模块。 这意味着您可以将HTML / CSS文件用作入口点。
    • Persistent Caching.

      持久缓存。
    • Multi-threading and Multicore.

      多线程和多核。
    • Move WebAssembly support from experimental to stable.

      将WebAssembly支持从实验性移到稳定。

    You can check out the full release log for webpack 4 here.

    您可以在此处查看webpack 4的完整发布日志。

    翻译自: https://www.digitalocean.com/community/tutorials/whats-new-in-webpack-4

    webpack5新功能

    展开全文
  • Webpack 4演示·Legato :musical_notes: 演示项目开始使用并进行实验 开始 恢复依赖关系并启动开发服务器: yarn && yarn dev 在主机上检查浏览器控制台 产品特点 entry / output自定义配置。 块分割( app | ...
  • Webpack4 配置 Entry

    千次阅读 2019-07-11 17:26:04
    Webpack4 配置 Entry entry是配置模块的入口,可抽象成输入,Webpack 执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块。 entry 配置是必填的,若不填则将导致 Webpack 报错退出。 简单的配置代码:...

    Webpack4 配置 Entry

    entry是配置模块的入口,可抽象成输入,Webpack 执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块。

    entry 配置是必填的,若不填则将导致 Webpack 报错退出。

    简单的配置代码:( 在 webpack.config.js 文件下 配置 )

    module.exports = {
      // 1.JavaScript 执行入口文件
      entry: './src/main.js',
      .......
        
    };
    

    1.Entry的类型

    Entry 类型可以是以下三种中的一种 或者 相互组合:

    类型例子含义
    string'./app/entry'入口模块的文件路径,可以是相对路径。
    array['./app/entry1', './app/entry2']入口模块的文件路径,可以是相对路径。
    object{ a: './app/entry-a', b: ['./app/entry-b1', './app/entry-b2']}配置多个入口,每个入口生成一个 Chunk

    如果是 array 类型,则搭配 output.library 配置项使用时,只有数组里的最后一个入口文件的模块会被导出。

    什么是Chunk?

    Chunk是代码块的意思,Webpack在执行构建的时候,会把多个模块合并为一个文件,该文件就称为Chunk。

    Webpack 会为每个生成的 Chunk 取一个名称,Chunk 的名称和 Entry 的配置有关:

    • 如果 entry 是一个 stringarray,就只会生成一个 Chunk,这时 Chunk 的名称是 main
    • 如果 entry 是一个 object,就可能会出现多个 Chunk,这时 Chunk 的名称是 object 键值对里键的名称。

    2.字符串类型Entry

    新建一个项目,目录结构如下图

    |-- src
    |   |                               `-- common.js
    |   |                               `-- index.html
    |                                   `-- main.js
    `-- webpack.config.js
    

    webpack.config.js 是项目中 Webpack 的配置文件:

    // 1.从 node环境 中导入 path 模块
    const path = require('path');
    
    // 2.声明导出一个 对象
    module.exports = {
      // 3.JavaScript 执行入口文件
      entry: './src/main.js',
      output: {
        // 4.输出 bundle.js 文件都放到 dist 目录下
        path: path.resolve(__dirname, './dist'),
      }
    };
    

    main.js是 Webpack 打包入口文件:

    // 1.通过 CommonJS 规范导入 showHelloWorld 函数
    const showHelloWorld = require('./common.js');
    // 2.执行 showHelloWorld 函数
    showHelloWorld('Webpack的安装和使用');
    

    common.js 是项目存放公共代码文件:

    function showHelloWorld(content) {
      alert('hello world')
    }
    
    // 通过 CommonJS 规范导出 showHelloWorld 函数
    module.exports = showHelloWorld;
    

    index.html 是项目的首页:

    <html>
    <head>
      <meta charset="UTF-8">
    </head>
    <body>
    <div id="app"></div>
    <!--导入 Webpack 输出的 JavaScript 文件-->
    <script src="../dist/main.js"></script>
    </body>
    </html>
    

    执行webpack命令打包后输出的目录结构:( 多出了一个main.js 文件 )

    |-- dist
    |                   `-- main.js
    |-- src
    |   |               `-- common.js
    |   |               `-- index.html
    |                   `-- main.js
    `-- webpack.config.js
    
    

    注意:

    Webpack3执行 webpack 命令后打包出来的 main.js 文件是没有压缩的;

    Webpack4执行 webpack 命令打包出来的main.js文件是压缩过,想打包后的文件没压缩可执行下面命令:

    webpack --mode development 打包后没压缩

    webpack --mode production 打包后压缩

    webpack 打包后压缩

    3.数组类型Entry

    新建一个项目,目录结构如下图

    |-- src
    |   |-- common.js
    |   |-- index.html
    |   |-- main.js
    |   `-- myjQuery.js
    `-- webpack.config.js
    

    webpack.config.js 是项目中 Webpack 的配置文件:

    // 1.从 node环境 中导入 path 模块
    const path = require('path');
    
    // 2.声明导出一个 对象
    module.exports = {
      // 3.JavaScript 执行入口文件
      entry: ['./src/main.js', './src/myjQuery.js'],
      output: {
        // 5.输出 bundle.js 文件都放到 dist 目录下
        path: path.resolve(__dirname, './dist'),
      }
    };
    

    main.js是 Webpack 第一个打包入口文件:

    // 1.通过 CommonJS 规范导入 showHelloWorld 函数
    const showHelloWorld = require('./common.js');
    // 2.执行 showHelloWorld 函数
    showHelloWorld('Webpack的安装和使用');
    

    common.js 是项目存放公共代码文件:

    function showHelloWorld(content) {
      alert('hello world')
    }
    
    // 通过 CommonJS 规范导出 showHelloWorld 函数
    module.exports = showHelloWorld;
    

    myJQuery.js 是第二个打包入口文件:

    alert("我是myJQuery.js文件")
    

    index.html 是项目的首页:

    <html>
    <head>
      <meta charset="UTF-8">
    </head>
    <body>
    <div id="app"></div>
    <!--导入 Webpack 输出的 JavaScript 文件-->
    <script src="../dist/main.js"></script>
    </body>
    </html>
    

    执行webpack --mode development命令打包后输出的目录结构:( 多出了一个main.js 文件 )

    |-- dist
    |   `-- main.js
    |-- src
    |   |-- common.js
    |   |-- index.html
    |   |-- main.js
    |   `-- myjQuery.js
    `-- webpack.config.js
    
    

    查看打包后的main.js文件的简单源码代码:

    // 2.modules 是下面传递过来的参数 
    (function(modules) { // webpackBootstrap
    
     	// The require function
     	function __webpack_require__(moduleId) {
    
     		// Check if module is in cache
     		if(installedModules[moduleId]) {
     			return installedModules[moduleId].exports;
     		}
     		// Create a new module (and put it into the cache)
     		var module = installedModules[moduleId] = {
     			i: moduleId,
     			l: false,
     			exports: {}
     		};
    
     		// Execute the module function
     		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    
     		// Flag the module as loaded
     		module.l = true;
    
     		// Return the exports of the module
     		return module.exports;
       }
       
       // ......
       // ......
       // ......
    
     	// Load entry module and return exports
        // 3.使用 __webpack_require__ 去加载 index 为 0 的模块,并且返回该模块导出的内容
        // index 为 0 的模块就是 main.js 对应的文件,也就是执行入口模块
        // __webpack_require__.s 的含义是启动模块对应的 index
     	return __webpack_require__(__webpack_require__.s = 0);
     })
    
    // 1.这个对象会被传递到上面的modules中( 在webpack3以前这个是一个数组,webpack4以后变成了对象 )
     ({
    
      "./src/common.js":(function(module, exports) {
        eval("\r\nfunction showHelloWorld(content) {\r\n  alert('hello world')\r\n}\r\n\r\n// 通过 CommonJS 规范导出 showHelloWorld 函数\r\nmodule.exports = showHelloWorld;\n\n//# sourceURL=webpack:///./src/common.js?");
      }),
      
      // 6.main.js加载__webpack_require__('./common.js') 
      // 7.加载完common.js后调用 showHelloWorld() 函数
      "./src/main.js":(function(module, exports, __webpack_require__) {
        eval("// 1.通过 CommonJS 规范导入 showHelloWorld 函数\r\nconst showHelloWorld = __webpack_require__(/*! ./common.js */ \"./src/common.js\");\r\n// 2.执行 showHelloWorld 函数\r\nshowHelloWorld('Webpack的安装和使用');\n\n//# sourceURL=webpack:///./src/main.js?");
      }),
    
      // 9.执行myjQuery.js 中的 alert 函数    
      "./src/myjQuery.js":(function(module, exports) {
        eval("alert(\"我是myJQuery.js文件\")\n\n//# sourceURL=webpack:///./src/myjQuery.js?");
      }),
          
      // 4.加载 是入口模块(因为配置了entry为数据,下面加载入口会有多个)
      0:(function(module, exports, __webpack_require__) {
         // 5.第一个入口,加载__webpack_require__('./src/main.js')
         // 8.第二个入口,加载__webpack_require__('./src/myjQuery.js') 并声明导出
        eval("__webpack_require__(/*! ./src/main.js */\"./src/main.js\");\nmodule.exports = __webpack_require__(/*! ./src/myjQuery.js */\"./src/myjQuery.js\");\n\n\n//# sourceURL=webpack:///multi_./src/main.js_./src/myjQuery.js?");
      })
    
    });
    

    上面的源码只是从打包后里抽取的核心代码,其中代码执行的顺序上面标有序号。其中entry配置为数组和字符串的区别就是第4步加载的入口个数。如果是数组,将会有多个加载的入口,如果为字符串将会只有一个加载的入口。

    注意:

    webpack3 以前 modules 接收的参数是数组;webpack4 中的 modules 接收的参数是对象;

    4.对象类型Entry

    1.对象简单语法

    webpack.config.js` 是项目中 Webpack 的配置文件:

    // 1.从 node环境 中导入 path 模块
    const path = require('path');
    
    // 2.声明导出一个 对象
    module.exports = {
      // 3.JavaScript 执行入口文件是一个对象( 全写 )
      entry: {
        main:'./src/main.js'
      },
      output: {
        // 5.输出 bundle.js 文件都放到 dist 目录下
        path: path.resolve(__dirname, './dist'),
      }
    };
    

    上面这种写法是下面这种写法的全写:

    // 1.从 node环境 中导入 path 模块
    const path = require('path');
    
    // 2.声明导出一个 对象
    module.exports = {
      // 3.JavaScript 执行入口文件( 简写 )
      entry: './src/main.js',
      output: {
        // 4.输出 bundle.js 文件都放到 dist 目录下
        path: path.resolve(__dirname, './dist'),
      }
    };
    

    2.对象标准语法

    语法:entry: { [entryChunkName: string]: string | Array }

    新建一个项目,目录结构如下图

    |-- src
    |   |-- common.js
    |   |-- index.html
    |   |-- main.js
    |   `-- myjQuery.js
    `-- webpack.config.js
    

    webpack.config.js` 是项目中 Webpack 的配置文件:

    const path = require('path');
    
    module.exports = {
      // app  是指定入口代码块的名称(打包输出的文件默认以这个命名)
      // './src/main.js'  是加载的入口文件   
      entry: {
        app:'./src/main.js'
      },
      output: {
        path: path.resolve(__dirname, './dist'),
      }
    };
    

    其它文件的内容和上面保持不变

    执行webpack --mode development命令打包后输出的目录结构:( 多出了一个app.js 文件 )

    |-- dist
    |   `-- app.js
    |-- src
    |   |-- common.js
    |   |-- index.html
    |   |-- main.js
    |   `-- myjQuery.js
    `-- webpack.config.js
    

    3.多页面多入口语法

    webpack.config.js` 是项目中 Webpack 的配置文件:

    const path = require('path');
    
    module.exports = {
      // home  是指定第一个入口代码块的名称(打包输出的文件默认以这个命名)
      // about 是指定第二个入口代码块的名称(打包输出的文件默认以这个命名)
      entry: {
        home:'./src/main.js',
        about:'./src/myjQuery.js'
      },
      output: {
        path: path.resolve(__dirname, './dist'),
      }
    };
    

    其它文件的内容和上面保持不变

    执行webpack --mode development命令打包后输出的目录结构:( 多出了about.js 和 home.js文件 )

    |-- dist
    |   |-- about.js
    |   `-- home.js
    |-- src
    |   |-- common.js
    |   |-- index.html
    |   |-- main.js
    |   `-- myjQuery.js
    `-- webpack.config.js
    

    5.函数类型(动态)的Entry

    entry 也可以接收一个函数,好处是在函数里面可以通过for循环可以产生:多个页面多个入口

    const path = require('path');
    
    module.exports = {
      // 1.JavaScript 执行入口文件( entry是一个函数 )
      entry: () => {
        // 2.好处是这里面通过for循环可以产生:多个页面多个入口
        return {
          main:'./src/main.js'
        }
      },
      output: {
        path: path.resolve(__dirname, './dist'),
      }
    };
    

    其它文件的内容和上面保持不变,这个打包后和《2.字符串类型Entry》的案例一样

    源码下载地址

    展开全文
  • 初探webpack4

    千次阅读 2018-06-10 14:56:01
    2018/2/25,webpack4正式发布,距离现在已经过去三个多月了,也逐渐趋于稳定,而且现在的最新版本都到了4.12.0(版本迭代快得真是让人害怕)。 很多人都说webpack复杂,难以理解,很大一部分原因是webpack是基于...

    一、前言

    2018/2/25,webpack4正式发布,距离现在已经过去三个多月了,也逐渐趋于稳定,而且现在的最新版本都到了4.12.0(版本迭代快得真是让人害怕)。

    最新版本

    很多人都说webpack复杂,难以理解,很大一部分原因是webpack是基于配置的,可配置项很多,并且每个参数传入的形式多种多样(可以是字符串、数组、对象、函数。。。),文档介绍也比较模糊,这么多的配置项各种排列组合,想想都复杂。而gulp基于流的方式来处理文件,无论从理解上,还是功能上都很容易上手。

    //gulp
    gulp.src('./src/js/**/*.js')
    .pipe('babel')
    .pipe('uglifyjs')
    .dest('./dist/js')
    
    //webpack
    module.exports = {
      entry: './src/main.js',
      output: __dirname + '/dist/app.js',
      module: {
        rules: [{
          test: /\.js$/,
          loader: 'babel-loader'
        }]
      },
      plugins: [
        new require('uglifyjs-webpack-plugin')()
      ]
    }

    上面简单对比了webpack与gulp配置的区别,当然这样比较是有问题的,gulp并不能进行模块化的处理。这里主要是想告诉大家使用gulp的时候,我们能明确的知道js文件是先进行babel转译,然后进行压缩混淆,最后输出文件。而webpack对我们来说完全是个黑盒,完全不知道plugins的执行顺序。正是因为这些原因,我们常常在使用webpack时有一些不安,不知道这个配置到底有没有生效,我要按某种方式打包到底该如何配置?

    为了解决上面的问题,webpack4引入了零配置的概念(Parcel ???),实际体验下来还是要写不少配置。
    但是这不是重点,重点是官方宣传webpack4能够提升构建速度60%-98%,真的让人心动。

    二、到底怎么升级

    0、初始化配置

    首先安装最新版的webpack和webpack-dev-server,然后再安装webpack-cli。webpack4将命令行相关的操作抽离到了webpack-cli中,所以,要使用webpack4,必须安装webpack-cli。当然,如果你不想使用webpack-cli,社区也有替代方案webpack-command,虽然它与webpack-cli区别不大,但是还是建议使用官方推荐的webpack-cli。

    npm i webpack@4 webpack-dev-server@3 --save-dev
    npm i webpack-cli --save-dev

    webpack-cli除了能在命令行接受参数运行webpack外,还具备migrateinit功能。

    1. migrate用来升级webpack配置,能将webpack1的api升级到webpack2,现在用处不大。
    $ webpack-cli migrate ./webpack.config.js
     ✔ Reading webpack config
     ✔ Migrating config from v1 to v2
    -    loaders: [
    +      rules: [
    -        loader: 'babel',
    -          query: {
    +            use: [{
    +              loader: 'babel-loader'
    +            }],
    +            options: {
    -              loader: ExtractTextPlugin.extract('style', 'css!sass')
    +              use: ExtractTextPlugin.extract({
    +                fallback: 'style',
    +                use: 'css!sass'
    +              })
    ? Are you sure these changes are fine? Yes
    
     ✔︎ New webpack v2 config file is at /home/webpack-cli/build/webpack.config.js
    1. init可以快速生成一个webpack配置文件的模版,不过用处也不大,毕竟现在的脚手架都集成了webpack的配置。
    webpack-cli init
    
    1. Will your application have multiple bundles? No // 如果是多入口应用,可以传入一个object
    2. Which module will be the first to enter the application? [example: './src/index'] ./src/index // 程序入口
    3. What is the location of "app"? [example: "./src/app"] './src/app'
    4. Which folder will your generated bundles be in? [default: dist]
    5. Are you going to use this in production? No
    6. Will you be using ES2015? Yes //是否使用ES6语法,自动添加babel-loader
    7. Will you use one of the below CSS solutions? SASS // 根据选择的样式类型,自动生成 loader 配置
    8. If you want to bundle your CSS files, what will you name the bundle? (press enter to skip)
    9. Name your 'webpack.[name].js?' [default: 'config']: // webpack.config.js
    
    Congratulations! Your new webpack configuration file has been created!

    更详细介绍请查看webpack-cli的文档

    1、零配置

    零配置就意味着webpack4具有默认配置,webpack运行时,会根据mode的值采取不同的默认配置。如果你没有给webpack传入mode,会抛出错误,并提示我们如果要使用webpack就需要设置一个mode。

    没有使用mode

    The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
    You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

    mode一共有如下三种配置:

    1. none

      这个配置的意思就是不使用任何默认配置

    2. development,开发环境下的默认配置

    module.exports = {
      //开发环境下默认启用cache,在内存中对已经构建的部分进行缓存
      //避免其他模块修改,但是该模块未修改时候,重新构建,能够更快的进行增量构建
      //属于空间换时间的做法
      cache: true, 
      output: {
        pathinfo: true //输入代码添加额外的路径注释,提高代码可读性
      },
      devtools: "eval", //sourceMap为eval类型
      plugins: [
        //默认添加NODE_ENV为development
        new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
      ],
      optimization: {
        namedModules: true, //取代插件中的 new webpack.NamedModulesPlugin()
        namedChunks: true
      }
    }
    1. production,生产环境下的默认配置
    module.exports = {
      performance: {
        hints: 'warning',
        maxAssetSize: 250000, //单文件超过250k,命令行告警
        maxEntrypointSize: 250000, //首次加载文件总和超过250k,命令行告警
      }
      plugins: [
        //默认添加NODE_ENV为production
        new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") })
      ],
      optimization: {
        minimize: true, //取代 new UglifyJsPlugin(/* ... */)
        providedExports: true,
        usedExports: true,
        //识别package.json中的sideEffects以剔除无用的模块,用来做tree-shake
        //依赖于optimization.providedExports和optimization.usedExports
        sideEffects: true,
        //取代 new webpack.optimize.ModuleConcatenationPlugin()
        concatenateModules: true,
        //取代 new webpack.NoEmitOnErrorsPlugin(),编译错误时不打印输出资源。
        noEmitOnErrors: true
      }
    }

    其他的一些默认值:

    module.exports = {
      context: process.cwd()
      entry: './src',
      output: {
        path: 'dist',
        filename: '[name].js'
      },
      rules: [
        {
          type: "javascript/auto",
          resolve: {}
        },
        {
          test: /\.mjs$/i,
          type: "javascript/esm",
          resolve: {
            mainFields:
            options.target === "web" ||
            options.target === "webworker" ||
            options.target === "electron-renderer"
              ? ["browser", "main"]
              : ["main"]
          }
        },
        {
          test: /\.json$/i,
          type: "json"
        },
        {
          test: /\.wasm$/i,
          type: "webassembly/experimental"
        }
      ]
    }

    如果想查看更多webpack4相关的默认配置,到这里来。可以看到webpack4把很多插件相关的配置都迁移到了optimization中,但是我们看看官方文档对optimization的介绍简直寥寥无几,而在默认配置的代码中,webpack对optimization的配置有十几项,反正我是怕了。

    文档对optimization的介绍

    虽然api发生了一些变化,好的一面就是有了这些默认值,我们想通过webpack构建一个项目比以前要简单很多,如果你只是想简单的进行打包,在package.json中添加如下两个script,包你满意。

    {
      "scripts": {
        "dev": "webpack-dev-server --mode development",
        "build": "webpack --mode production"
      },
    }

    开发环境使用webpack-dev-server,边预览边打包再也不用f5,简直爽歪歪;生产环境直接生成打包后的文件到dist目录

    2、loader与plugin的升级

    loader的升级就是一次大换血,之前适配webpack3的loader都需要升级才能适配webpack4。如果你使用了不兼容的loader,webpack会告诉你:

    DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

    DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

    如果在运行过程中遇到这两个警告,就表示你有loader或者plugin没有升级。造成这两个错误的原因是,webpack4使用的新的插件系统,并且破坏性的对api进行了更新,不过好在这只是警告,不会导致程序退出,不过建议最好是进行升级。对于loader最好全部进行一次升级,反正也不亏,百利而无一害。

    关于plugin,有两个坑,一个是extract-text-webpack-plugin,还一个是html-webpack-plugin

    先说说extract-text-webpack-plugin,这个插件主要用于将多个css合并成一个css,减少http请求,命名时支持contenthash(根据文本内容生成hash)。但是webpack4使用有些问题,所以官方推荐使用mini-css-extract-plugin

    ⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

    这里改动比较小,只要替换下插件,然后改动下css相关的loader就行了:

    -const ExtractTextPlugin = require('extract-text-webpack-plugin')
    +const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    
    module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/,
    -       use: ExtractTextPlugin.extract({
    -         use: [{
    -           loader: 'css-loader',
    -           options: {
    -             minimize: process.env.NODE_ENV === 'production'
    -           }
    -         }],
    -         fallback: 'vue-style-loader'
    -       })
    +       use: [
    +         MiniCssExtractPlugin.loader,
    +         {
    +           loader: 'css-loader',
    +           options: {
    +           minimize: process.env.NODE_ENV === 'production'
    +         }
    +       ],
          }
        ]
      },
      plugins:[
    -   new ExtractTextPlugin({
    +   new MiniCssExtractPlugin({
          filename: 'css/[name].css',
        }),
      ...
      ]
    }
    

    然后看看html-webpack-plugin,将这个插件升级到最新版本,一般情况没啥问题,但是有个坑,最好是把chunksSortMode这个选项设置为none。

    const HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = {
      plugins:[
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'index.html',
          inject: true,
          hash: true,
          chunksSortMode: 'none' //如果使用webpack4将该配置项设置为'none'
        })
      ]
    }
    

    官方有个issues讨论了这个问题,感兴趣可以去看看。目前作者还在寻找解决方案中。
    html-webpack-plugin issues

    另外,webpack-dev-server也有个升级版本,叫做webpack-serve,功能比webpack-dev-server强大,支持HTTP2、使用WebSockets做热更新,暂时还在观望中,后续采坑。

    3、webpack4的模块拆分

    webpack3中,我们经常使用CommonsChunkPlugin进行模块的拆分,将代码中的公共部分,以及变动较少的框架或者库提取到一个单独的文件中,比如我们引入的框架代码(vue、react)。只要页面加载过一次之后,抽离出来的代码就可以放入缓存中,而不是每次加载页面都重新加载全部资源。

    CommonsChunkPlugin的常规用法如下:

    module.exports = {
      plugins: [
        new webpack.optimize.CommonsChunkPlugin({ //将node_modules中的代码放入vendor.js中
          name: "vendor",
          minChunks: function(module){
            return module.context && module.context.includes("node_modules");
          }
        }),
        new webpack.optimize.CommonsChunkPlugin({ //将webpack中runtime相关的代码放入manifest.js中
          name: "manifest",
          minChunks: Infinity
        }),
      ]
    }

    之前CommonsChunkPlugin虽然能用,但是配置不够灵活,难以理解,minChunks有时候为数字,有时候为函数,并且如果同步模块与异步模块都引入了相同的module并不能将公共部分提取出来,最后打包生成的js还是存在相同的module。

    现在webpack4使用optimization.splitChunks来进行代码的拆分,使用optimization.runtimeChunk来提取webpack的runtime代码,引入了新的cacheGroups概念。并且webpack4中optimization提供如下默认值,官方称这种默认配置是保持web性能的最佳实践,不要手贱去修改,就算你要改也要多测试(官方就是这么自信)。

    module.exports = {
      optimization: {
        minimize: env === 'production' ? true : false, //是否进行代码压缩
        splitChunks: {
          chunks: "async",
          minSize: 30000, //模块大于30k会被抽离到公共模块
          minChunks: 1, //模块出现1次就会被抽离到公共模块
          maxAsyncRequests: 5, //异步模块,一次最多只能被加载5个
          maxInitialRequests: 3, //入口模块最多只能加载3个
          name: true,
          cacheGroups: {
            default: {
              minChunks: 2,
              priority: -20
              reuseExistingChunk: true,
            },
            vendors: {
              test: /[\\/]node_modules[\\/]/,
              priority: -10
            }
          }
        },
        runtimeChunk {
          name: "runtime"
        }
      }
    }

    有了这些默认配置,我们几乎不需要任何成功就能删除之前CommonChunkPlugin的代码,好神奇。

    什么模块会进行提取?

    通过判断splitChunks.chunks的值来确定哪些模块会提取公共模块,该配置一共有三个选项,initialasyncall
    默认为async,表示只会提取异步加载模块的公共代码,initial表示只会提取初始入口模块的公共代码,all表示同时提取前两者的代码。

    这里有个概念需要明确,webpack中什么是初始入口模块,什么是异步加载模块。e.g.

    //webpack.config.js
    module.exports = {
      entry: {
        main: 'src/index.js'
      }
    }
    
    //index.js
    import Vue from 'vue'
    import(/* webpackChunkName: "asyncModule" */'./a.js')
      .then(mod => {
        console.log('loaded module a', mod)
      })
    
    console.log('initial module')
    new Vue({})
    
    //a.js
    import _ from 'lodash'
    const obj = { name: 'module a' }
    export default _.clone(obj)

    上面的代码中,index.js在webpack的entry配置中,这是打包的入口,所以这个模块是初始入口模块。再看看index.js中使用了动态import语法,对a.js(该异步模块被命名为asyncModule)进行异步加载,则a.js就是一个异步加载模块。再看看index.jsa.js都有来自node_modules的模块,按照之前的规则,splitChunks.chunks默认为async,所以会被提取到vendors中的只有webpackChunkName中的模块。

    chunks为async

    如果我们把splitChunks.chunks改成all,main中来自node_modules的模块也会被进行提取了。

    module.exports = {
      optimization: {
        splitChunks: {
          chunks: "all"
        }
      }
    }

    chunks为all

    现在我们在index.js中也引入lodash,看看入口模块和异步模块的公共模块还会不会像CommonsChunkPlugin一样被重复打包。

    //index.js
    import Vue from 'vue'
    import _ from 'lodash'
    
    import(/* webpackChunkName: "asyncModule" */'./a.js')
      .then(mod => {
        console.log('loaded module a', mod)
      })
    
    console.log('initial module')
    console.log(_.map([1,2,3], a => {
        return a * 10
    }))
    new Vue({})
    
    //a.js
    import _ from 'lodash'
    const obj = { name: 'module a' }
    export default _.clone(obj)

    解决了CommonsChunkPlugin的问题

    可以看到之前CommonsChunkPlugin的问题已经被解决了,main模块与asyncModule模块共同的lodash都被打包进了vendors~main.js中。

    提取的规则是什么?

    splitChunks.cacheGroups配置项就是用来表示,会提取到公共模块的一个集合,也就是一个提取规则。像前面的vendor,就是webpack4默认提供的一个cacheGroup,表示来自node_modules的模块为一个集合。

    除了cacheGroups配置项外,可以看下其他的几个默认规则。

    1. 被提取的模块必须大于30kb;
    2. 模块被引入的次数必须大于1次;
    3. 对于异步模块,生成的公共模块文件不能超出5个;
    4. 对于入口模块,抽离出的公共模块文件不能超出3个。

    对应到代码中就是这四个配置:

    {
        minSize: 30000,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
    }

    三、赠送webpack常见优化方式

    1、一个人不行,大家一起上

    webpack是一个基于node的前端打包工具,但是node基于v8运行时只能是单线程,但是node中能够fork子进程。所以我们可以使用多进程的方式运行loader,和压缩js,社区有两个插件就是专门干这两个事的:HappyPack、ParallelUglifyPlugin。

    使用HappyPack

    const path = require('path')
    module.exports = {
      module: {
        rules: [
          {
            test: /\.js$/,
            // loader: 'babel-loader'
            loader: 'happypack/loader?id=babel'
          }
        ]
      },
      plugins: [
        new require('happypack')({
          id: 'babel',
          loaders: ['babel-loader']
        }),
      ],
    };

    使用ParallelUglifyPlugin

    module.exports = {
      optimization: {
        minimizer: [
          new require('webpack-parallel-uglify-plugin')({
            // 配置项
          }),
        ]
      }
    }

    2、打包再打包

    使windows的时候,我们经常会看到一些.dll文件,dll文件被称为动态链接库,里面包含了程序运行时的一些动态函数库,多个程序可以共用一个dll文件,可以减少程序运行时的物理内存。

    webpack中我们也可以引入dll的概念,使用DllPlugin插件,将不经常变化的框架代码打包到一个js中,比如叫做dll.js。在打包的过程中,如果检测到某个块已经在dll.js中就不会再打包。之前DllPlugin与CommonsChunkPlugin并能相互兼容,本是同根生相煎何太急。但是升级到webpack4之后,问题就迎刃而解了。

    使用DllPlugin的时候,要先写另外一个webpack配置文件,用来生成dll文件。

    //webpack.vue.dll.js
    const path = require('path')
    
    module.exports = {
      entry: {
        // 把 vue 相关模块的放到一个单独的动态链接库
        vue: ['vue', 'vue-router', 'vuex', 'element-ui']
      },
      output: {
        filename: '[name].dll.js', //生成vue.dll.js
        path: path.resolve(__dirname, 'dist'),
        library: '_dll_[name]'
      },
      plugins: [
        new require('webpack/lib/DllPlugin')({
          name: '_dll_[name]',
          // manifest.json 描述动态链接库包含了哪些内容
          path: path.join(__dirname, 'dist', '[name].manifest.json')
        }),
      ],
    };

    然后在之前的webpack配置中,引入dll。

    const path = require('path')
    
    module.exports = {
      plugins: [
        // 只要引入manifest.json就能知道哪些模块再dll文件中,在打包过程会忽略这些模块
        new require('webpack/lib/DllReferencePlugin')({
          manifest: require('./dist/vue.manifest.json'),
        })
      ],
      devtool: 'source-map'
    };

    最后生成html文件的时候,一定要先引入dll文件。

    <html>
        <head>
            <meta charset="UTF-8">
        </head>
        <body>
            <div id="app"></div>
            <script src="./dist/vue.dll.js"></script>
            <script src="./dist/main.js"></script>
        </body>
    </html>

    3、你胖你先跑,部分代码预先运行

    前面的优化都是优化打包速度,或者减少重复模块的。这里有一种优化方式,能够减少代码量,并且减少客户端的运行时间。

    使用Prepack,这是facebook开源的一款工具,能够运行你的代码中部分能够提前运行的代码,减少在线上真实运行的代码。

    官方的demo如下:

    //input
    (function () {
      function hello() { return 'hello'; }
      function world() { return 'world'; }
      global.s = hello() + ' ' + world();
    })();
    
    //output
    s = "hello world";

    想在webpack中接入也比较简单,社区以及有了对应的插件prepack-webpack-plugin,目前正式环境运用较少,还有些坑,可以继续观望。

    module.exports = {
      plugins: [
        new require('prepack-webpack-plugin')()
      ]
    };

    这里简单罗列了一些webpack的优化策略,但是有些优化策略还是还是要酌情考虑。比如多进程跑loader,如果你项目比较小,开了之后可能变慢了,因为本来打包时间就比较短,用来fork子进程的时间,说不定都已经跑完了。记住过早的优化就是万恶之源

    四、总结

    webpack4带了很多新的特性,也大大加快的打包时间,并且减少了打包后的文件体积。期待webpack5的更多新特性,比如,以html或css为文件入口(鄙人认为html才是前端模块化的真正入口,浏览器的入口就是html,浏览器在真正的亲爹,不和爹亲和谁亲),默认开启多进程打包,加入文件的长期缓存,更多的拓展零配置。

    同时也要感谢前端社区其它的优秀的打包工具,感谢rollup,感谢parcel。

    五、参考

    1. webpack 为什么这么难用?
    2. Webpack 4进阶
    3. RIP CommonsChunkPlugin
    4. webpack 4: mode and optimization
    5. webpack 4 不完全迁移指北
    展开全文
  • webpack4版本也出了很久了 之前弄过一段时间的升级 后面因为种种原因搁浅了 今天有硬着头皮升级了一波 yeah 还好升级成功了 先贴一波原先webpack3的github配置 ps(我只是一个菜鸡= = webpack的配置很辣鸡 )废话少...
  • vue/cli2下的webpack3升级webpack4记录。

    千次阅读 2019-11-15 10:29:35
    听说升级到webpack4之后打包速度贼快,所以早就想体验一下,但是又不敢拿公司项目开刀,因此先找一个以前写过的demo项目练练手。下面就记录一下vue/cli2下的webpack3升级webpack4中遇到的一些问题及解决方案。 ...
  • webpack4.x开发环境配置

    万次阅读 多人点赞 2018-03-09 23:14:36
    写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过时,由于webpack版本更新后许多操作变化很大...为此,笔者进行了最新版配置的探索,使用的是windows操作系统,如果你的是webpack4.x版本,可...
  • webpack4.x - webpack安装

    千次阅读 2020-01-05 17:26:16
    关于webpack的介绍,大家可以移步webpack4.x - 初始webpack 二.前提条件 在开始之前,请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support),是理想的起步。使用旧版本...
  • webpack4 从零开始

    千次阅读 2018-08-04 18:34:10
     新建文件夹webpack4Demo    2、初始化package.json  进入文件夹 执行 npm init 初始化一个工程,里面会有一个初始化的package.json    3、安装webpack 和webpack-cli  cnpm instal...
  • webpack4打包优化配置

    千次阅读 2019-05-31 10:11:37
    1、对图片进行压缩和...image-webpack-loader可以帮助我们对图片进行压缩和优化 cnpm install image-webpack- --save-dev 复制代码 { test: /\.(png|svg|jpg|gif|jpeg|ico)$/, use: [ 'file-loader', { loade...
  • webpack3升级到webpack4

    千次阅读 2019-04-22 16:34:47
    webpack4出来有一段时间了,现在3升级到4 运行 npm i npm-check -g npm-check -u 选择要更新的依赖,loader之类都更新到最新 npm i webpack-cli --save-dev dev和prod 添加不同mode utils.js css 预编译处理 ...
  • webpack4搭建vue项目(完整版本)

    千次阅读 2019-06-14 20:16:56
    最近研究了下webpack4,顺便用webpack 4搭建了一个vue项目,搭建过程如下: 1.安装node,然后使用npm init (初始化项目); npm init 2.npm i webpack vue vue-loader,同级创建src(建app.vue及index.js文件)、...
  • webpack4打包流程总结

    千次阅读 2018-08-31 16:08:48
    webpack4入门   前提 已安装node(版本号&gt;4.0,已自带NPM) mac机器 有一个空目录 要实现的功能 JSX语法,ES6语法,LESS语法编写的模块转化为浏览器可执行的模块 代码的混淆压缩 多页面多入口 提取...
  • webpack4.x实现热更新

    千次阅读 2019-05-01 19:07:22
    webpack 的 webapck-dev-server 包会启动一个开发服务器,当修改入口文件或者入口文件中引入的其他文件时,webpack 会自动编译入口文件,然后刷新整个页面。然我们仅仅修改了一个文件就刷新了整个页面,这样的操作太...
  • |- webpack_code.zip - 932.00 kB |- 18 - webpack的打包分析报表插件与优化总结.mp4 - 23.10 MB |- 17 - webpack的模块的外部依赖配置.mp4 - 21.70 MB |- 16 - webpack的模块解析后缀和别名配置详解.mp4 - 17.30...
  • 手动创建一些文件夹和文件 ...cnpm install webpack webpack-cli html-webpack-plugin -D 目录结构如下 index.js console.log("index在控制台打印") print.js console.log("print在控制台打印") index.html <...
  • vue 从webpack 3X升级到 webpack 4.X全过程

    千次阅读 2019-08-10 14:04:50
    当前项目我是采用的webpack3.6 应用的是vue-cli安装的项目,由于webpack4官方尚未出脚手架,所以我们升级到webpack4的话需要手动升级。我是按照如下步骤去升级的。 备注:我用的npm的版本是6.4.1;你们可以在终端...
  • webpack3和webpack4区别

    千次阅读 2019-09-29 02:47:39
    webpack增加了一个mode配置,只有两种值development | production。对不同的环境他会启用不同的配置。 比如设置mode等于'development',会将process.env.NODE_ENV的值设为development,开发环境下启用optimization....
  • 将 vue-cli 2 项目升级 webpack4

    千次阅读 2018-11-22 23:31:12
    Vue 项目升级 webpack4 Github项目地址 由于 vue-cli 2 构建的项目是基于 webpack3,所以只能自己动手改动,至于升级 webpack4之后提升的编译速度以及各种插件自己去体验。 修改配置 替换插件 extract-text-...
  • webpack4官方发布以来,很多博主都已经上手开撸了,但是大体都是对着API新配置一份,我今天尝试了一下将我们公司的webpack2项目迁移到webpack4,下面是记录的几个坑。一、环境准备 1、node 6.10+ 2、下载webpack4...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 268,566
精华内容 107,426
关键字:

webpack4