1 webpack的安装 使用 配置

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

webpack官网 https://www.webpackjs.com/

webpack基础

webpack的安装

注意：请先自行安装nodejs最新版的环境

• 初始化项目

  npm init -y

• 全局安装webpack

  npm i webpack webpack-cli -g

• 项目中安装webpack (推荐)

  npm i webpack webpack-cli -D

全局安装webpack后，可以在控制台任何一个地方进行项目的打包构建；项目中安装webpack，不能直接使用webpack,可借助npx(npm5.2后出现npx，没有全局安转也可以使用webpack指令)；更推荐在项目中安装webpack，不推荐全局安装webpaxk，因为webpack是基于项目，为项目进行打包操作;

使用-D，不用-S，因为打包完毕，上线后就不需要了;

webpack的使用

webpack-cli

npm 5.2 以上的版本中提供了一个npx命令

npx 想要解决的主要问题，就是调用项目内部安装的模块，原理就是在node_modules下的.bin 目录中找到对应的命令执行

在项目中使用webpack命令：npx webpack

webpack4.0之后可以实现0配置打包构建，0配置的特点就是限制较多，无法自定义很多配置;推荐开发中常用的还是使用webpack配置进行打包构建；

webpack配置

webpack有四大核心概念:

• 入口(entry): 程序的入口js
• 输出(output): 打包后存放的位置
• loader: 用于对模块的源代码进行转换
• 插件(plugins): 插件目的在于解决 loader无法实现的其他事

1. 配置webpack.config.js
2. 运行npx webpack

在配置文件中，output输出的路径必须是绝对路径，否则报错；
在node中如果涉及路径的操作，直接引入核心模块path；

const path = require('path')

module.exports = {
  // 入口文件配置
  entry: './src/index.js',
  // 出口文件配置项
  output: {
    // 输出的路径，webpack2起就规定必须是绝对路径
    path: path.join(__dirname, 'dist'),
    // 输出文件名字
    filename: 'bundle.js'
  },
  mode: 'development' // 默认为production, 可以手动设置为development, 区别就是是否进行压缩混淆
}

将webpack命令配置到package.json

将npx webpack命令配置到package.json的脚本中

在前面提到，打包命令是：npx webpack

webpack.config.js写配置文件，如果想指定其他配置文件，这个后面可以跟一些参数，进行--config的设置
npx webpack --config 新的配置文件

实际开发中，这样的配置文件是有2个甚至以上，比如一个生产打包指令，一个开发打包指令，上面的写法每次打包指令很长也很麻烦，最佳实现是：

1. 配置package.json
2. 运行npm run build

//package.json
{
  "name": "webpack-basic",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack --config webpack.dev.config.js"
  },
  "devDependencies": {
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1"
  }
}