【软件测试部署基础】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://blog.csdn.net/userkang/article/details/83504048
