安装和配置webpack

安装

要使用Webpack，首先要安装之，安装的命令如下：

npm install --save-dev webpack webpack-cli

按照官方的建议，我们开发时应该是在项目中局部安装webpack，而不要全局安装。

还有一件事儿得解释一下，我们干吗要安装webpack-cli，光安装webpack不行吗？这个还真不行。
因为安装完webpack后，打开node_modules/webpack/bin/webpack.js文件，通过看代码就可以知道，webpack依赖webpack-cli，所以不装不行，截图如下：

webpack-cli.png

配置

安装完成后，就该使用webpack了。编辑package.json文件，添加build脚本：

...
"scripts": {
    "build": "webpack"
  },
...

• 0配置
  默认情况下，webpack（我安装的是4.0以上的版本）是0配置的，就是说，如果不添加任何配置文件的话，它会将src/index.js文件打包到dist目录下，打包后的文件是main.js，如图所示：
  

  0配置.png

• 使用配置文件webpack.config.js（推荐）
  虽然0配置比较方便，但功能较弱。通常开发时，咱们要手动添加配置文件。配置文件的默认名称是webpack.config.js，这个默认的配置文件名可以更改，但没有必要，一般就用默认的吧。
  在项目的根目录下，新建webpack.config.js文件，然后编辑内容，代码如下：

let path = require('path');

module.exports = {
    mode: 'production',         // 模式，默认两种 production和development
    entry: './src/index.js',    // 入口，从哪个文件开始打包
    output: {                   // 出口
        filename: 'bundle.js',  // 打包后的文件名
        path: path.resolve(__dirname, './build')   // 路径必须是一个绝对路径
    }
};

保存后，在命令行窗口执行build命令：

npm run build

打包结果如图所示：

打包.png

如果想使每次生成的bundle.js文件不一样，可以为其添加哈希戳，代码如下：

filename: 'bundle.[hash].js'

打包结果如图所示：

哈希戳.png

成功了，但是哈希戳有点儿长。如果想设置哈希戳的长度，比如长度为5，代码如下：

filename: 'bundle.[hash:5].js'

打包结果如图所示：

设置哈希戳的长度.png