深入学习webpack 4.x核心用法及其源码（四）

最新推荐文章于 2024-09-22 17:40:25 发布

赵sir来了

最新推荐文章于 2024-09-22 17:40:25 发布

阅读量173

点赞数

分类专栏： webpack 文章标签： js webpack

本文链接：https://blog.csdn.net/qq_43389371/article/details/104868665

版权

webpack 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这一章主要是一些关于 webpack 打包组件、库的一些配置

引入方式

我们可以通过配置 webpack 来实现不同方式的引用，不管是 import 、require、AMD方式 引入都可以正常的引入，通过把 libraryTarget设置成 umd 就可以了

webpack.config.js

module.exports = {
    entry: './src/index.js',
    mode: 'production',
    output: {
        libraryTarget: 'umd',
    }
}

我们还可以通过 <script> 标签引入我们的代码，将 library 设置成 $ (这个是可以随意定义的)，webpack 就会将 $ 挂载在 window (全局变量) 上，通过 $ 我们就可以使用定义的函数

webpack.config.js

module.exports = {
    entry: './src/index.js',
    mode: 'production',
    output: {
        libraryTarget: 'umd',
        library: '$',
    }
}

其实 libraryTarget 是和 library 配合使用的，想了解更多的信息可以查看：https://www.webpackjs.com/guides/author-libraries/

还有一个属性 externals 也是需要与上面两个属性相配合的，那它有什么用呢？如果想引用一个库，但是不想让 webpack 进行打包，就可使用这个，它并不会影响程序。这个功能主要是用在创建一个库的时候用的。

webpack.config.js

module.exports = {
    externals: ["jquery"],
}

module.exports = {
    externals: {
      "jquery": {
      	commonjs: "$",//如果我们的库运行在Node.js环境中，必须将导入的对象名设置成:'$'
        commonjs2: "$",//同上
        amd: "$",//如果我们的库使用require.js等加载;
        root: "$"//如果我们的库在浏览器中使用，需要提供一个全局的变量‘$’
      }
	}
}

externals 的值可以是对象也可以是数组

PWA

全称：Progressive Web App，是一种渐进式增强WEB应用，是Google 在2016年提出的概念，2017年落地的web技术。其实它对标的是移动App的开发，目的就是解决移动App开发成本高、发布到不同应用商店（还有审核，版本更新等）及兼容问题。它可以让我们通过浏览器来实现与原生应用相近的用户体验。

可以使用 workbox-webpack-plugin 这个插件来进行打包

webpack.config.js

const workboxWebpackPlugin = require('workbox-webpack-plugin');

module.exports = {
    plugins:[
        new workboxWebpackPlugin.GenerateSW({
            clientsClaim:true,
            skipWaiting: true,
        })
    ],
}

大概就这么多，我也没这么用过，可以查看：https://webpack.js.org/guides/progressive-web-application/#root

TypeScirpt 的打包配置

TypeScirpt 是什么？TypeScirpt 是JavaScript的类型化超集，可编译为普通JavaScript、任何浏览器、任何主机、任何操作系统、并且开源。总之，这个可能成为行业的规范，所以最好还是学习。

首先先安装 ts-loader 和 typescirpt

npm i ts-loader typescript -D

webpack.config.js

module.exports = {    
    module: {
        rules: [{
            test: /.ts?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        }]
    },
}
// 只需要配置一下 loader 就行了

可以查看：https://www.webpackjs.com/guides/typescript/

还有在项目的更目录中创建一个 tsconfig.json 的配置的文件

{
    "compilerOptions": {
        "outDir": "./dist",	//输出文件到哪里去
        "module": "ES6", //用户使用的js语法版本
        "target": "ES5", //翻译成什么js语法版本
        "allowJs": true, //是否允许导入js文件
    }
}

tsconfig.json 有很多配置，可以查看：http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

webpack-dev-server 转发接口(代理)

通过配置 devServer.proxy 可以在开发环境时进行端口转发。

webpack.config.js

module.exports = {
	devServer: {
		proxy: {
			'/getCount': 'http://zhaosirlaile.com',
		},
	}
}

这种方法是用在 请求相对路径 的时候非常有用。

还有一个 devServer.historyApiFallback 很好用，是用来使用单页面的时候需要去配置的，如果想很多的了解这个参数的话，可以查看：https://www.webpackjs.com/configuration/dev-server/#devserver-historyapifallback 和 https://github.com/bripkens/connect-history-api-fallback

ESlint (代码约束)

介绍

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。

安装

npm i eslint -D

初始化

npx eslint --init

之后它就会在命令行中选择按照哪一种方式进行安装，按照安装英文提示选就可以了。

在你的根目录文件中会有一个叫做 .eslintrc.js 的配置文件(我选的是 javascirpt，也可以是 json ，这个随你)，这里可以配置一些东西。可以查看：https://eslint.bootcss.com/docs/user-guide/configuring

使用

可以使用：

npx eslint src

因为我的源文件在 src 中

其实更好的方式是使用 vscode 中的 eslint 插件，这个巨好用，如果你的代码有问题，它会自动标注起来。

提升打包速度

升级工具（node，包管理工具）
尽可能少使用 loader、插件(没有必要的)
因为每一次打包都会重新打包第三方库，可以在最开始的时候将所有第三方库合并到一个文件，就不用重复打包了从而提升打包速度。
控制文件大小（使文件近可能小，不要有冗余代码）
多进程的打包
合理使用 sourceMap
结合 stats文件分析打包结果
开发环境内存编译

等等…

多页面打包

其实就是借用 HtmlWebpackPlugin 这个插件，我记得我第二章说过，这里就不多说了

module.export={
    plugins:[
        new HtmlWebpackPlugin({
            template: 'src/template.html',
            filename: 'index.html',
            chunk: ['main']
        }),
        new HtmlWebpackPlugin({
            template: 'src/template.html',
            filename: 'List.html',
            chunk: ['vendors','main']
        }),
    ]
}