Webpack5 打包工具了解

Webpack5 打包工具（一）

了解更多请访问https://webpack.docschina.org/
特别注意：依赖与插件的版本问题，最好按照官方网站的文档进行配置，避免各种因为版本不对而出现的报错。
我这里使用的是 webpack5.x+

一、Webpack 简介

Webpack 是一个现代 JavaScript 的静态模块打包器(module bundler)；

打包器(构建工具)会将所有依赖关系按照规则合并为单个 JS 文件，一次加载；

最终，生成浏览器能够使用的静态资源，下图为官方宣传效果图：

那为什么要用这种构建工具进行打包呢？

从上图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求，解决模块依赖和兼容性。

二、安装 Webpack

1、安装Webpack需要使用 npm(或 cnpm)命令，本地环境需要支持 node.js。

2、找到官网下载 node.js，任意版本均可，下载安装，在命令行测试版本号：

node -v

3、使用开发工具VScode创建一个 Webpack 项目，准备使用 npm 安装，可以先测试版本号：

npm -v
npm config get registry //查看镜像，不是国内，设置淘宝镜像即可
npm config set registry https://registry.npm.taobao.org

4、有时 npm 命令不太稳定，安装速度过慢或者报错，可以使用淘宝的镜像及其命令 cnpm，语法一模一样

npm install -g cnpm --registry=https://registry.npm.taobao.org

5、安装好 npm 或 cnpm 后，测试 webpack 命令是否有效，如下：

webpack -v

很明显基础工作已经做好了，但是webpack命令还不可以使用。

6、首先，先全局安装，需要两个：webpack 核心模块、webpack-cli 命令行工具。

7、其中：install 可以简写为 i，-g 表示全局。

npm i webpack webpack-cli -g

这样webpack就安装完成，可以正常使用webpack命令了。

三、模块打包

1、我们创建 webpack目录，在其创建约定俗成的两个子目录 src 和 dist；

2、其中：src 表示源文件，dist 表示生成发布的文件；

3、在 src 中建立两个 js 文件，用 node 环境支持的 CommonJS 规范的模块化；

module.js文件

//module.js
module.exports = {
    name : 'Mr.Lon'
}

index.js文件

//入口文件
const name = require('./module.js')
console.log(name)

4、建立 index.html 文件，引入 src 中的 index.js 文件，但浏览器是无法运行的，会出现报错提醒；

5、此时，我们需要进行打包来解决两个问题：浏览器兼容和导入导出 js 文件的合并；

6、使用打包命令，注意目录的问题，如果在根目录带上子目录路径；

webpack ./src/index.js -o ./dist/js --mode=development

PS：只要打包入口文件即可，依赖的文件会自动合并；

PS：development 表示开发模式，production 表示生产模式，压缩成一行

四、配置文件

1、打包一次的命令太过于冗长，且特别容易出错，所以要对这些路径参数进行存储；

2、我们可以创建 package.json 文件，来配置 scripts 属性来部署生成路径；

npm init -y //生成配置文件命令

3、然后在 package.json 文件中找打 scripts 属性里添加子属性：build，属性值具体如下

"build" : "webpack ./src/index.js -o ./dist/js --mode=development"

4、然后使用 npm 命令自动执行这个属性值的路径

npm run build

5、如果是比较简单的打包，package.json 还行，当参数越发复杂维护将变得困难；

6、因此 Webpack 提供了一个 webpack.config.json 配置文件，解决这个问题；

webpack.config.js 文件基本配置

/*
    webpack配置文件，每次执行会自动读取这里的配置
 */
const path = require('path')
module.exports = {
    //出口文件
    entry : './src/index.js',
    //出口文件
    output : {
        //文件名
        filename : 'bundle.js',
        //路径，绝对路径
        path : path.resolve(__dirname , './dist/js')
    },
    //生成模式
    mode : "development"
}

直接执行命令：webpack，即执行打包；

打包好了之后，在index.html文件之后引入打包目录下生成main.js，这样在浏览器中就可以正常访问了

四、将 DevServer 服务工具整合部署到 Webpack。

1、问题需求

由于代码可能有 CommonJS 等非浏览器支持的语法，每次都必须打包才行运行；

虽然借助 VScode等工具可以构建服务器环境，但实际上不能时时监控刷新；

如果要方便的话，开发者需求的想法是，开发时方便调试，最后再打包；

所以，官方提供了 Webpack-dev-Server 工具来解决这个问题，支持特性：

(1) .支持 HTTP 服务访问：localhost,127.0.0.1 这种；

(2) .监听变化时时刷新网页，时时预览；

(3) .支持 Source Map

2、安装部署

DevServer 只要安装到本地即可使用，命令如下:

npm i webpack-dev-server -D

PS：在应用根目录安装，package.json 会自动添加 webpack-dev-server 版本号

webpack-dev-server v4.0.0+ 要求 node >= v12.13.0、webpack >= v4.37.0和 webpack-cli >= v4.7.0。

3、devServer 自动化

在 webpack.config.js 配置一些最基本的参数，方便运行；

/*
    webpack配置文件，每次执行会自动读取这里的配置
 */
const path = require('path')
module.exports = {
    //生成模式
     mode : "development",
    //出口文件
    entry : './src/index.js',
    //出口文件
    output : {
        //文件名
        filename : 'bundle.js',
        //路径，绝对路径
        path : path.resolve(__dirname , './dist/js')
    },
    //devServer
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist/js'), //访问路径
        },
        compress: true,    //更快的进行压缩
        port: 3000,     //独立端口，测试是避免发生端口冲突
    },
}

我们可以再 package.json 文件，在 scripts 设置 dev 属性

"dev" : "webpack-dev-server"

在终端直接输入命令

npm run dev

PS : 我们通过访问 http://localhost:3000/ 来查看页面；

PS：此时我们可以发现并不需要打包到本地，它是自动打包到内存让你时时预览调试的；

PS：也就是说：调试阶段，可以用 devServer，完成了，再最终打包到本地即可；

PS : 如果打开 http://localhost:3000/ 没有看到index.html中的内容，只有显示打包目录文件，需要将index.html文件放到打包目录下;

Webpack5 打包工具（一）

相关文章