【软件测试部署基础】webpack的认识

1. 什么是webpack

webpack 是一个 JavaScript 应用程序的静态模块打包器(module bundler)。

它做的事情就是分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

正如webpack官网的这张图片，可以看出Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

简单的说，webpack是一个打包模块化js的工具，可以通过loader转换文件，通过plugin扩展功能。

1.1 工作方式

把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件:

读取文件分析模块依赖
对模块进行解析执行(深度遍历)
针对不同的模块使用相应的loader
编译模块，生成抽象语法树AST
循环遍历AST树，拼接输出js

2. webpack安装

同样，webpack也需要本地环境有Node.js支持。我们直接可以使用npm进行webpack的安装：

npm install webpack ：使用npm本地项目安装webpack

npm install webpack -g ：使用npm全局安装webpack

cnpm install webpack ：使用cnpm本地项目安装webpack

当我们在安装路径下的node_modules中查看到webpack时表明成功安装了webpack。

成功安装了webpack后，我们输入webpack -h查看帮助：

webppack -h

输出内容如下：

从内容我们可以看出，命令提示要求安装webpack-cli，这是因为在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。所以我们还需要安装webpack-cli

npm install webpack-cli

安装完之后，我们进入node_modules/.bin/后，输入如下命令就可以查看具体的信息了：

webpack -v

webpack -h

所以总的来说，我们安装webpack时的命令应该是：

npm install webpack webpack-cli

或者

npm install webpack webpack-cli -D ：将webpack和webpack-cli安装到devDependencies中

3. webpack简单示例

创建一个空文件夹

mkdir webpacktest

或者在cmd中

md webpacktest

cd webpacktest

npm初始化并生成一个package.json文件

npm init

安装webpack

安装webpack和webpack的客户端wepback-cli（简易客户端，用来以webpack协议连接相应服务）到开发依赖devDependencies。
npm i -D webpack webpack-cli   ：-D表示安装到devDependencies

创建示例脚本

创建helloworld.js内容如下：

function hello() {

console.log("hello world")

}

打包

.\node_modules\.bin\webpack helloworld.js   直接运行webpack 打包，默认前目录下的默认会创建dist目录，打包为main.js

从提示我们可以看出，使用webpack打包时，如果没有webpack的配置文件时，应该提供mode，使用mode可以为webpack获得一些默认的配置，其主要包括如下：

- 　　none:默认情况，表示没有任何配置优化处理，这样打包出来的文件可读性比较差，如刚才打包时默认情况下打包的main.js文件。

- 　　development:是告诉程序，现在是开发状态，也就是打包出来的内容要对开发友好显示，并且启动了一些插件，如使用--mode development模式进行导报时，打包的main.js文件。

- 　　production:是告诉程序，现在是正式版本状态，同时也是增加了一些比较实用的插件，如使用--mode development模式进行打包

所以webpack的三种mode可以简单总结如下：

同时，在webpack打包时，默认是将打包的main.js文件放入当前文件目录的dist文件下，我们也可以使用-o参数来指定出口文件：

.\node_modules\.bin\webpack helloworld.js -o .\test\main.js --mode development

我们可以看到打包的main.js文件就放到了当前文件目录下的test文件夹下：

结合npm run命令打包

首先在package.json文件中增加如下内容

"scripts": {

"build": "webpack ./helloworld.js -o ./dist/main.js --mode development"

}

然后打包，就直接运行npm run build即可

npm run build

4. webpack配置

从 webpack v4.0.0 开始，可以不用引入一个配置文件，也就是我们说的可以使用--mode模式，但为了更强的功能，我们仍然需要自己配置webpack，配置文件为webpack.config.js，而webpack的配置主要从下面五个方面入手：

入口(entry)
输出(output)
loader
插件(plugins)
模式

4.1. 入口(entry)

入口指示了 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。正如上面webpack的工作方式所讲的，webpack进入指定的入口后，从这个文件开始找到你的项目的所有依赖文件（直接和间接），并构建依赖图，然后每个依赖项随即被处理，最后输出到称之为 bundles 的文件中。

webpack.config.js中入口的配置使用entry属性，如单个入口配置方式：

module.exports = {
entry: './path/to/my/entry/file.js'
};

多个入口配置方式：

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

如上，告诉了webpack 需要 3 个独立分离的依赖图，也就是表示了这是一个多页面应用程序，在多页应用中，（每当页面跳转时）服务器将为你获取一个新的 HTML 文档。页面重新加载新文档，并且资源被重新下载。

4.2. 输出(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。webpack.config.js文件中使用outpu属性来配置出口，我们知道入口可以存放多个，但是出口就只能填写一个。

webpack.config.js文件中output属性最基本的配置要包含：

filename：用于输出文件的文件名；
path：目标输出目录的绝对路径。

module.exports = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

如上，通过 output.filename 和 output.path 属性，来告诉我们打包文件的文件名和路径。

如果是针对多个入口（也就是多个应用的），其入口配置可如下：

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

如上，最终打包的文件名及路径分别为：./dist/app.js，./dist/search.js

4.3. loader

loader 用于对模块的源代码进行转换，让webpack 能够去处理那些非 JavaScript 文件（因为webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后就可以利用 webpack 的打包能力，对它们进行处理。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

比如我们想要webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript，那么我们先要引入这两个loader：

npm install --save-dev css-loader

npm install --save-dev ts-loader

然后在webpack.config.js文件配置如下：

module.exports = {

module: {

rules: [

#表示webpack 对每个 .css 使用 css-loader

{ test: /\.css$/, use: 'css-loader' },

#表示webpack对每个 .ts 文件使用 ts-loader

{ test: /\.ts$/, use: 'ts-loader' }

]

}

};

其中test用于使用正则表示的方式匹配文件，而use表示使用的loader。

4.4. 插件(plugins)

插件是 webpack 的支柱功能，其目的在于解决 loader 无法实现的其他事。

webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

const config = {

entry: './path/to/my/entry/file.js',

output: {

filename: 'my-first-webpack.bundle.js',

path: path.resolve(__dirname, 'dist')

module: {

rules: [

{ test: /\.(js|jsx)$/, use: 'babel-loader'}

]

plugins: [

new webpack.optimize.UglifyJsPlugin(),

new HtmlWebpackPlugin({template: './src/index.html'})

]

};

module.exports = config;

4.5. 模式

模式用来告知 webpack 使用相应模式的内置优化，通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化。

启用模式为development开发模式：

module.exports = {
mode: ‘development’
};

当启用mode为development时，相当于：

module.exports = {
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
    ]
};

启用模式为production正式模式：

module.exports = {
mode: ‘production’
};

当启用mode为production时，相当于：

module.exports = {
    plugins: [
        new UglifyJsPlugin(/* ... */),
        new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
        ]
};

5. webpack常用构建命令

webpack -开发环境构建

webpack -p -生产环境构建(压缩混淆脚本)

webpack --watch –监听变动并自动打包

webpack -d –生成 map 映射文件

webpack --colors –构建过程带颜色输出

6. 其他

本文只是简单的了解了下webpack，包括其工作原理和基本的配置项，具体的配置内容以及前端项目怎么去配置可能后续再了解。

参考网址：

https://www.webpackjs.com/

https://blog.csdn.net/userkang/article/details/83504048