正文之前, 由于这是一个系列的文章, 可能第一次看到的看官老爷们会觉得突兀, 如果你是 webpack 新手, 我建议你先从前几篇文章看起, 如果你对 webpack 有一些了解, 也希望可以在 github https://github.com/ZakingQ/structure-demo/tree/master/webpackSeniorDemo上下载代码, 对照着看会更有效果
在当代的前端开发中, 很少会用原生 JS 来开发页面, 最基本的都会使用 jQuery 来节省我们开发的时间和效率, 而 angular,vue,react 的出现更是为前端开发者带来了福音那么这篇文章就说说如何用 webpack 来打包引入第三方框架 (类库) 如果单纯的引入 jQuery 或者其他第三方类库, 在打包的时候 webpack 会把它一起打包进我们的 main.js, 也就说, 如果我们引入两三个框架, 两三个 UI 库, 那么我们的集成包会很大, 页面的加载时间也会很长, 这是我们不愿见到的结果所以在学会引入的同时, 还要知道如何把第三方类库从我们的业务逻辑包中抽离出来
那么我们先来安装一下 jQuery, 因为在生产环境我们仍旧是需要 jQuery 作为依赖的, 所以我们需要用 npm install jquery --save 来安装它安装完成之后, 我们在 main.js 中增加两行代码:
- // 引入 jQuery
- import $ from 'jquery';
- // 编写 jQuery 代码
- $('#jqueryDiv').html('Hello Zaking,jQuery is useful');
我们还需要在 index.html 中增加一个 div 容器:
- <!-- jQuery 代码容器 -->
- <div id="jqueryDiv"></div>
然后, 我们 npm run dev 看一下, 会发现页面中已经有 jQuery 代码所生成的文字, 说明我们引入 jQuery 成功了你可以在每一个需要 jQuery 的页面这样引入但是这样会很麻烦, 我们如果通过这样的方式引入了 jQuery, 但是整个项目中却并没有写一行 jQuery 代码, 那么 webpack 也是会把它打包进去的而且每一个需要 jQuery 的页面都需要引入的话好麻烦, 那么我们可以使用 ProvidePlugin 来实现一次引入全局使用, 而且通过插件的方式来引入第三方类库, 如果你不使用它的话, webpack 就不会打包它, 还不错吧由于 ProvidePlugin 是 webpack 自带的插件, 我们不需要引入他, 但是需要引入一下 webpack:
- // 引入 webpack
- const webpack = require('webpack');
我们还需要在入口文件引入 jQuery, 还记得前面模块化的时候把入口文件单独拆分成了一个 entry.js, 所以我们在其中增加一点代码, 现在看起来应该是这样的:
- entry.path={
- main:'./src/main.js',
- jquery:'jquery'
- }
然后我们在 plugins 项下配置一下这个插件, 就像这样:
- // 创建一个 webpack 下的 ProvidePlugin 插件的实例, 使全局都可以使用 jQuery
- new webpack.ProvidePlugin({
- $:"jquery"
- })
这样就可以了, 但是别忘了把 main.js 中通过 import 引入的 jQuery 代码删除, 然后再 npm run dev 试一下会发现也同样出现了 jQuery 生成的文字
那么下面我们就学习一下, 如何抽离第三方类库, 使其存储在一个单独的文件夹下, 在 webpack3 时代, 通常是使用 CommonsChunkPlugin,CommonsChunkPlugin 也是 webpack 自带的插件官方文档是这样解释他的: CommonsChunkPlugin 插件, 是一个可选的用于建立一个独立文件 (又称作 chunk) 的功能, 这个文件包括多个入口 chunk 的公共模块通过将公共模块拆出来, 最终合成的文件能够在最开始的时候加载一次, 便存到缓存中供后续使用这个带来速度上的提升, 因为浏览器会迅速将公共的代码从缓存中取出来, 而不是每次访问一个新页面时, 再去加载一个更大的文件
简单来说, 就是将公共模块拆分出来以便使浏览器加载速度更快但是在 webpack4 时代, 已经取消了这个插件取而代之的是 splitChunks 和 runtimeChunk , 那么我们就来看一下, 在 webpack4 的环境下, 如何抽离多个第三方类库
我们先来安装一下 vue, 跟 jQuery 的安装方式一样, 就不多说了, 同样的我们也需要在入口文件处引入 vue:
- entry.path={
- main:'./src/main.js',
- // 引入 jQuery 和 vue
- jquery:'jquery',
- vue:"vue"
- }
然后再 ProvidePlugin 中加入 vue 这个选项:
- new webpack.ProvidePlugin({
- $:"jquery",
- vue:"vue"
- })
然后我们在 plugins 中增加一个配置:
- new webpack.optimize.SplitChunksPlugin({
- chunks: "all",
- minSize: 20000,
- minChunks: 1,
- maxAsyncRequests: 5,
- maxInitialRequests: 3,
- name: true
- })
然后我们 npm run build 一下, 会发现在 dist 的根目录下已经生成了 vue.js 和 jQuery.js 说明我们打包成功了那么我们想要测试一下, vue 究竟能用了么?
我们在 main.js 中引入 vue, 并且加上 vue 官网例子中最简单的一个:
- import Vue from 'vue'
- //vue 代码
- var app = new Vue({
- el: '#vueApp',
- data: {
- message: 'Hello Vue!'
- }
- })
然后, 我们在 index.html 创建一个 div 容器:
- <!-- vue 容器 -->
- <div id="vueApp">
- {{message}}
- </div>
然后我们试一下 npm run dev, 页面打开之后我们发现没有 hello vue,f12 看下控制台, 发现报错了不出意外的话, 你的报错信息是这样的:
什么意思呢, 官方解释是: 运行时构建不包含模板编译器, 因此不支持 template 选项, 只能用 render 选项, 但即使使用运行时构建, 在单文件组件中也依然可以写模板, 因为单文件组件的模板会在构建时预编译为 render 函数就是说, 如果我们想使用 template, 我们不能直接在客户端使用 npm install 之后的 vue
那么我们需要新增一点配置:
- resolve: {
- alias: {
- 'vue$': 'vue/dist/vue.esm.js'
- }
- }
- //resolve 是在最外层的, 与 plugins 等同级
这样就可以了, 然后运行一下, 会发现 Hello Vue 已经出现在我们的页面之中了这两天一直加班, 所以更新的有点慢, 这个系列的文章还有最后一篇, 尽量在这两天就可以完成
来源: https://www.cnblogs.com/zaking/p/8656625.html