官网

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

  （简单来说就是在使用ES6的模块编程时，webpack会分析这些文件的关系，然后打包成一个 JS 文件，最后直接使用这个 JS 文件即可。

从一个示例开始

  一个简单的项目，目录如下：

index.html :

<script src="./src/main.js"></script>

hello.js:

export default function() {
    console.log('hello webpack');
}

main.js：

import hello from './hello';

hello();

  就这样运行 HTML 页面，会出错：

  如果使用 webpack 来解决，有两种方式：一种是使用配置文件，另一种不使用配置文件。

全局安装方式

webpack安装：

npm install -g webpack webpack-cli

  先看不使用配置文件的方式：

  命令行输入的格式如下：webpack <entry> [<entry>] -o <output>

  示例：webpack src/main.js

  然后，程序会在 dist 目录下生成打包好的入口文件：

  接着，只要在 index.html 中替换 JS 入口文件即可：

<script src="./dist/main.js"></script>

  main.js 中生成的打包文件如下：

  再看看使用配置文件的方式：

  在项目中新建一个 webpack.config.js 文件，内容为：

const path = require('path');

module.exports = {
  entry: './src/main.js', // 文件入口
  mode: 'development', // 开发环境
  output: {	
    path: path.resolve(__dirname, 'dist'), // 输出文件目录
    filename: 'bundle.js' // 输出文件名
  }
};

  然后在命令行中输入 webpack 即可：

  这时候命令行的输出没有黄色字体了，这是因为我们指定了项目文件为开发环境（development)。而之前的打包文件是因为没指定环境，默认为生产环境（production)。

  这时， bundle.js 的内容为：与生产环境的main.js有很大区别。

局部安装方式

  先卸载全局安装的 webpack 和 webpack-cli : npm uninstall -g webpack webpack-cli

  在项目下新建文件 package.json ：

{
    "name": "hello-webpack",
    "version": "1.0.0",
    "dependencies": {}
}

  运行命令：npm install --save webpack webpack-cli

  安装完后再配置运行命令build：

{
    "name": "hello-webpack",
    "version": "1.0.0",
    "scripts": {
        "build": "webpack"
    },
    "dependencies": {
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.11"
    }
}

  这时候，运行 npm run build 命令也能执行 webpack：