圆桌会议III: webpack简介

Posted 2021-04-29 前端经验书

1.什么是webpack

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand. Through "loaders," modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff. 

它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loaders 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

简而言之：

1. 一个打包工具

2. 一个模块加载工具

3. 各种资源都可以当成模块来处理

2.webpack的特点

丰富的插件

• html-webpack-plugin 自动生成html插件

• extract-text-webpack-plugin 提取css样式插件

• autoprefixer 自动检测兼容性补全css前缀

• webpack.optimize.UglifyJsPlugin() 解析/压缩/美化所有的js

  
  

大量的加载器

• 处理样式，转成css，如：less-loader, css-loader, style-loader

• 图片处理，如: url-loader, file-loader

• 处理js，将我们写的es6源代码打包时转成es5的代码。如：babel-core，babel-preset-latest，babel-loader

代码分割

智能解析
Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、AMD、CDM、ES6 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".vue")。

发布工具

• 区分开发模式，打包未压缩模式，打包压缩模式，默认是打包未压缩模式

• 开发模式开启source-map,开启dev-server，可以方便的来调试页面代码，支持实时打包

  
  

3. webpack与gulp相比有什么优点

Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。

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

总结下来其主要的优势：

1. 按需加载模块，按需进行懒加载，在实际用到某些模块的时候再增量更新

2. webpack 是以 commonJS 的形式来书写脚本，但对 AMD/CMD/ES6 的支持也很全面，方便旧项目进行代码迁移。

3. 能被模块化的不仅仅是 JS 了，能处理各种类型的资源。

4. 开发便捷，能替代部分 gulp 的工作，比如打包、压缩混淆、图片转base64等。

5. 扩展性强，插件机制完善

4.如何使用webpack

安装webpack

npm install -g webpack

npm install --save-dev webpack 

webpack可以在终端中使用

$ webpack main.js main.bundle.js //打包生成main.bundle.js 

$ webpack main.js main.bundle.js --module-bind 'css=style-loader!css-loader' //添加css-loader 

$ webpack --config webpack.conf.js //另一份配置文件 

$ webpack --display-error-details //显示异常信息 

$ webpack --progress //显示打包过程 

$ webpack --display-modules //显示打包模块 

$ webpack --display-reasons //显示打包原因 

$ webpack --watch //监听变动并自动打包 

$ webpack -p //压缩混淆脚本，这个非常非常重要！ 

$ webpack -d //生成map映射文件，告知哪些模块被最终打包到哪里了 

通过配置文件来使用Webpack
Webpack拥有很多其它的比较高级的功能（比如说本文后面会介绍的loaders和plugins），这些功能其实都可以通过命令行模式实现，但是正如已经提到的，这样不太方便且容易出错的，一个更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，可以把所有的与构建相关的信息放在里面。

Webpack的配置主要为这几大项目：

1.entry：js入口源文件

2.output：生成文件

3.Loaders：每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块处理

4.resolve：文件路径的指向

5.plugins：插件，比loader更强大，能使用更多webpack的api

还是继续上面的例子来说明如何写这个配置文件，在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件，并在其中进行最最简单的配置。

入口(Entry) 与 出口(Output)

如下所示，它包含入口文件路径和存放打包后文件的地方的路径。
js module.exports = { entry: './src/js/clickFn.js', // 入口文件 output: { path: path.resolve(__dirname, './dist'), // 编译输出目录 filename: '[id].[name].[chunkhash:8].js' // 编译输出文件名 我们可以添加hash } } 

加载器(Loaders)
webpack 把每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块处理。然而 webpack只理解 JavaScript。webpack loader 会将这些文件转换为模块，而转换后的文件会被添加到依赖图表中。并且最终添加到 输出文件bundle.js 中。

插件(Plugins)
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，你需要使用 new 创建实例来调用它。
npm install extract-text-webpack-plugin --save-dev

npm install html-webpack-plugin --save-dev

缓存
webpack可以把一个哈希值添加到打包的文件名中，添加特殊的字符串混合体（[name], [id] and [hash]）到输出文件名前

开发环境配置
webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端，客户端根据消息作出响应。