Webpack基础知识总结
本文将从多个方面回顾下自己了解的Webpack知识，包括常见的配置项，前端搭建的一些方法和项目实际优化方法，有错误的地方还请指出并多多包涵。
一、关于Webpack
1.概念
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。常见构造结构如下：
module.exports = {
entry:'./main.js',
output:{
path:__dirname,
filename:'bundle.js'
},
module:{
rules:[
{
test:/\.(png|jpg)$/,
use:[
{
loader:'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
}
2.入口(entry)
入口起点(entrypoint)指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的。可以通过在 webpack配置中配置entry属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。
{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
}
3.出口(output)
output 属性告诉 webpack在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个output字段，来配置这些处理过程。在上面的示例中，我们通过output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。当有多个入口起点的时候，可以使用如下对象的形式来写入口和出口：
4.模式(mode)
提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。
mode : 'development' | 'production'
5.loader
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！
5.1.使用loader
Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：
- test：一个用以匹配loaders所处理文件的拓展名的正则表达式 （必须）
- loader：loader的名称 （必须）
- include/exclude: 手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
- query：为loaders提供额外的设置选项 （可选）
module.exports = {
entry:'./main.jsx',
output:{
path:__dirname,
filename:'bundle.js'
},
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.jsx?$/,
exclude:/node_modules/,
use:{
loader:'babel-loader',
options:{
presets:['es2015','react']
}
}
}
]
}
}
5.2.loader特性
- loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
- loader 可以是同步的，也可以是异步的。
- loader 运行在 Node.js 中，并且能够执行任何可能的操作。
- loader 接收查询参数。用于对 loader 传递配置。
- loader 也能够使用 options 对象进行配置。
- 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
- 插件(plugin)可以为 loader 带来更多特性。
- loader 能够产生额外的任意文件。
- include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）。
6.插件(plugins)
- 插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 loader 无法实现的其他事。
- webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。
- 由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
--
--
--
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
二、前端搭建
当前开发构建项目过程，不管是Vue还是React，他们的脚手架
Vue-cli和Create React App工具都会自动把Webpack添加到项目中，下面介绍的是自己手动搭建的一些基本配置和过程。
1.安装
npm install webpack webpack-cli -g
或者
yarn global add webpack webpack-cli
2.配置
新建一个webpack的文件夹，在其下新建一个try-webpack(防止init时项目名和安装包同名)并初始化和配置webpack。
npm init -y //-y 默认所有的配置
yarn add webpack webpack-cli -D //-D webpack安装在devDependencies环境中
三、部署webpack
在package.json里配置scripts
"scripts": {
"build": "webpack --mode production" //我们在这里配置，就可以使用npm run build 启动我们的webpack
},
"devDependencies": {
"webpack": "^4.16.0",
"webpack-cli": "^3.0.8"
}
四、配置
1.html
打包html使用 html-webpack-plugin
plugins: [ //插进的引用, 压缩，分离美化
new HtmlWebpackPlugin({ //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上，项目包。可以直接上线
file: 'index.html', //打造单页面运用 最后运行的不是这个
template: 'src/index.html' //vue-cli放在跟目录下
}),
],
2.live-server
安装完成后进入根目录 可直接启动node服务
3.js
babel。在.babelrc配置文件中，主要是对预设（presets）和插件（plugins）进行配置，因此不同的转译器作用不同的配置项，大致可分为以下三项
- 语法转义器
- 补丁转义器
- jsx和flow插件
创建预设(presets)
"presets": [
[
"@babel/preset-env",
{ //options配置介绍:targets可以制定兼容浏览器版本
"targets": {
"chrome": 52,
"browsers": [
"last 2 versions",
"safari 7"
]
}
}
],
"@babel/preset-react",
"@babel/preset-flow"
]
插件（plugins）
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
],"react-hot-loader/babel",[
"@babel/plugin-transform-runtime",
{
// "regenerator": true
}
]]
五、项目优化
在实际的开发项目中，我遇到了打包后文件过大导致的页面首次打开速度特别慢的情况，在查过好多资料和博客后，总结了一些简单的优化方法。
1.打包可视化插件
name: webpack-bundle-analyzer -> BundleAnalyzerPlugin
简介: 该插件可以将打包的项目以可视化的形式展现到浏览器上，并展示打包项目的名称大小等，更加方便针对优化
// install
sudo npm i -D webpack-bundle-analyzer
// code
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
baseConfig.plugins.push(
new BundleAnalyzerPlugin({ analyzerPort: 8082 })
)
2.JS代码压缩
name: webpack-parallel-uglify-plugin
简介: 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码，并对具体压缩内容做具体配置
// install
sudo npm i -D webpack-parallel-uglify-plugin
// code
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
new ParallelUglifyPlugin({
// 传递给 UglifyJS 的参数
uglifyJS: {
output: {
// 最紧凑的输出
beautify: false,
// 删除所有的注释
comments: false,
},
compress: {
// 删除所有的 `console` 语句，可以兼容ie浏览器
drop_console: true,
// 内嵌定义了但是只用到一次的变量
collapse_vars: true,
// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: true,
}
},
})
3.动态导入文件插件
name: dynamic-import-webpack
简介: 用来支持React懒加载,否则会报错
// install
npm i -D dynamic-import-webpack
//code 配置在 .babelrc文件 plugins中
{
"plugins": "dynamic-import-webpack",
}
