webpack打包

webpack 是前端项目工程化的具体解决方案。

它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。

目前，在企业级的前端项目开发中，绝大多数的项目都是基于 webpack 进行打包构建的。

1.安装
npm install webpack

2.配置
2.1 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置:

点击查看代码

module.exports = {
  // mode 用来指定构建模式，可选值有 development（开发环境） / production（生产环境）
  mode: 'development',
  }

2.2 在 package.json 的 scripts 节点下，新增 dev 脚本如下：

点击查看代码

"dev": "webpack"

3.mode 的可选值

mode 节点的可选值有两个，分别是：

1.development

• 开发环境

• 不会对打包生成的文件进行代码压缩和性能优化

• 打包速度快，适合在开发阶段使用

2.production

• 生产环境

• 会对打包生成的文件进行代码压缩和性能优化

• 打包速度很慢，仅适合在项目发布阶段使用

4.webpack.config.js

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

在 webpack 中有如下的默认约定：

1. 默认的打包入口文件为 src -> index.js

2. 默认的输出文件路径为 dist -> main.js

5. 自定义打包的入口与出口

点击查看代码

// 导入 node.js 中专门操作路径的模块
const path = require('path')

module.exports = {
  // 指定打包的入口
  entry: path.join(__dirname, './src/index.js'),
  // 指定打包的出口
  output: {
    // 输出文件的存放路径
    path: path.join(__dirname, './dist'),
    // 输出文件的名称
    filename: 'js/bundle.js'
  }
}`

6.devServer 节点

在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，示例代码如下：

点击查看代码

devServer: {
    // 初次打包后，自动打开浏览器
    open: true,
    // 实时打包所使用的主机地址
    host: '127.0.0.1',
    // 实时打包所使用的端口号
    port: 80
  }

7.Source Map
Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着代码压缩混淆前后的对应关系。

1.开发环境下：

• 建议把 devtool 的值设置为 eval-source-map

• 好处：可以精准定位到具体的错误行

2.生产环境下：

• 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map(只定位行数不暴露源码)

• 好处：防止源码泄露，提高网站的安全性

但是，实际开发中不需要自己配置 webpack，使用命令行工具一键生成带有 webpack 的项目即可。