【整理篇】上手webpack4！安装、配置文件、loader加载及常用命令详解

Webpack作为前端模块打包工具，根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。由于其能够大大提高开发效率，适合大规模的多页面项目构建，很好地落实到业务而深受企业喜爱，成为目前最流行的前端构建工具之一，被称为“模块打包机”。对于webpack的深入理解及机制介绍将在日后撰文发布，本篇主要详细讲解webpack4.x版本安装、编写配置文件、对脚本、样式和文件的处理（安装loader和插件）及常用命令，实现快速上手与简单理解。

 

一. webpack的安装

      在安装之前确保已经下载安装了node.js，并已经进行npm init 初始化生成了package.json，在此基础上开始用npm安装webpack。

1.1 国内淘宝镜像cnpm

      npm由于npm服务器在国外，在安装过程中经常出现下载过慢（慢到头掉）或丢失链接的情况，称“npm被墙”，这时我们可以使用国内的淘宝镜像cnpm，输入下面命令安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org

      在之后执行npm命令时，直接用cnpm代替npm，或者也可以把配置写死，即将代理网址写入配置文件中：

//通过config命令
npm config set registry https://registry.npm.taobao.org
npm info underscore

//命令行指定
npm --registry https://registry.npm.taobao.org info underscore

//编辑 ~/.npmrc 加入下面内容
registry = https://registry.npm.taobao.org

      注：上面命令写法源于网络，本人没有写入配置文件中，在后面的命令行中都将会使用cnpm代替npm。

2.2 安装webpack

      全局安装webpack。此时默认安装webpack最新版，如要安装特定版本，在webpack后加@版本号如：webpack@1.1.3。

cnpm install webpack -g

      为安装模块到项目node_modules目录下，将模块依赖写入package.json中的devDependencies 节点，输入加上--save-dev的如下命令。后面安装中会出现只有--save 没有-dev，意为安装模块到项目node_modules目录下，将模块依赖写入package.json中的dependencies 节点。主要区别为加dev的用于开发过程中，不会打包进业务代码，如测试工具、打包工具，而加--save会打包进业务代码，是项目运行必备的，如引入jquery。详细的区别见原文：https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html

cnpm install webpack@4.27.1 --save-dev

      安装成功后命令行输入webpack -v能够查看到已安装的webpack版本号。

      本篇主要基于webpack 4.x 的安装，在webpack 4 当中，命令行工具cli被单独分离到webpack-cli包当中，以前的版本中它们是在同一个包内，现在需要额外安装webpack-cli才能使用命令：

cnpm install webpack-cli -g

      注：在后面的安装过程中踩了很多次版本问题的坑，经过好几波版本升降的操作，建议最初安装时就指定版本，尤其是采用低版本的童鞋。这里放上我目前的node.js版本6.15.1、webpack版本：4.27.1 以及文末的package.json 供大家参考。

      这个时候尝试打包，直接输入：webpack ，会发现打包时报错“The 'mode' option has not been set, ......"原因是没有指定没有指定mode为 development（开发模式）或者production（生产模式），这时需要在package.json文件中加入：

"scripts": {
    "dev": "webpack --mode development",      // 开发模式
     "build": "webpack --mode production",    // 生产模式
  },

      使用方法为：命令行输入npm run dev (开发模式输出的index.js没有压缩) 或npm run build (生产模式输出的index.js压缩过，内容紧凑) 可在自动生成的dist文件夹中看到。

 

二. 配置文件webpack.config.js的初次编写

      webpack.config.js是webpack打包的配置文件，我们在控制台输入一个webpack指令，默认在根目录中查找webpack.config.js并并根据该文件加载与执行相应的依赖。

      进入根目录，建立webpack.config.js文件，初次编写主要内容是入口文件路径和打包后文件的存放路径：

const path = require('path');

var config = {