【Webpack的使用指南 01】Webpack入门

使用Webpack有一段时间了，但是感觉之前学的用的都比较零散，所以在这里整理一下Webpack的使用知识，从入门到进阶。

创建项目

首先创建最简单的一个项目

npm init

得到以下项目结构：

安装Webpack

先来个全局的

npm i webpack -g

再安装项目中的

npm i webpack --save-dev

此时项目结构为，且注意到package.json中自动生成了对webpack的开发依赖：

Webpack的打包初体验

现在让我们用Webpack来打包文件，那么新建一个js文件如下：



然后执行命令

webpack ./src/app.js ./build/bundle.js

那么就会在根目录下生成一个build文件夹，里面会有一个bundle文件

可以查看bundle.js的js文件信息，里面的作用就是用了一个立即执行函数，然后将app.js的内容封装成一个函数，作为参数传进内部执行。这样就可以来分析处理依赖什么的了。

原理就是这个样子，具体的可以自己看一下底层代码就行，对于这种只打包一个文件的bundle.js，代码也很好看懂。

每次打包都这样输入一大串命令明显很烦，所以需要用到package.json的脚本功能，很简单，修改它为：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "webpack的使用demo",
  "main": "index.js",
  "author": "韩子卢",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^3.10.0"
  },
  "scripts": {
    "build": "webpack ./src/app.js ./build/bundle.js"
  }
}

对比之前的文件内容，明白玩法就好了，然后我们如果再想打包，那么运行命令：

npm run build

也行，当然命令不一定要用build，把在package.json 里把build改为dota都行，此时运行的命令自然是：

npm run dota

这样做的好处是，简单方便，一些命令就不用记下来了，其次其他人很容易知道这个项目中如何进行打包。

Webpack命令的一些常用参数

参数	作用
-p	对打包的文件进行压缩
-d	提供source map，方便调式代码
--watch	监控源文件，如果源文件做了修改，那么立马生成新的打包文件

webpack的配置文件

一般使用webpack都不会直接用webpack命令来生成某个脚本，因为它还有些强大的功能不好在简单命令里面实现，这个时候就需要用到webpack的配置文件了。

此时在根目录下新增一个文件：

然后命令行运行：

webpack

此时webpack会自动检索根目录下的webpack.config.js文件，然后根据这个文件中的配置去打包文件。

接下来我们分析一下webpack.config.js的代码：

module.exports = {
  entry: './src/app.js',
  output: {
    filename: './build/bundle.js'
  }
};

module.exports为导出对象，webpack会直接读取这个导出对象来打包代码，所以我们将打包的配置直接赋值给这个对象。

entry代表入口，即打包的时候从哪个文件开始打包，

output代表输出配置，即打包后生成的文件配置，其中的filename代表文件名。

上面的打包配置可以简单理解为，从'./src/app.js'文件开始打包，生成一个文件名为bundle.js的文件，它的路径是'./build/bundle.js'。

这里我们也可以这么写：

module.exports = {
  entry: './src/app.js',
  output: {
      path: __dirname + '/build',
      filename: 'bundle.js'
  }
};

注意，这里的path代表文件的输出目录，当我们用了path之后，filename就直接写文件名，而不要再写路径了，因为新的路径是path来的，如果还按照原来的，会在build文件夹下再生成一个build文件夹。

此时看到配置中还出现了一个__dirname变量，这个变量我们也没赋值，放的是什么呢?

__dirname实际上是webpack在编译时自己内部加上的一个变量，它代表webpack.config.js这个文件在电脑中的绝对路径。

想到这么玩的好处了吗，比如利用在filename中加相对路径可以直接生成文件到电脑中的发布网站下面。

publicPath 代表资源引用的路径。

publicPath一般用于bulid时，比如我现在生成js文件，但是我们不是放在本地服务器，而是放在CDN的某个文件夹test中。

那么我们将publicPath赋值为CDN上test文件夹的路径，那么最后index里面引用的就是cdn上的文件了。

webpack的插件

webpack的功能强大有一部分的原因就是插件的功能多且强。

然而我们在使用插件前需要明白一点，我们使用的目的是为了解决问题，而不是为了使用而使用。

现在我们项目的问题是什么？

首先没有html，这个简单，直接新建一个html即可，不需要插件。

但是如果这样玩的话，每次生成的js文件名都是bundle.js，那么网站就会形成缓存，导致明明发布了也没有效果啊。

解决这个问题的办法是在js后面加版本号，比如bundle.v1_1_0.js，我们可以手工操作进行修改，但是总有忘记的时候，这样就会出错。

那么问题就这么产生了，解决这个问题的插件就是：html-webpack-plugin。

接下来让我们来开始使用这个插件。

首先webpack内部没有集成这个插件，需要我们去安装：

npm i html-webpack-plugin --save-dev

然后删掉index.html，并修改webpack.config.js为：

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/build',
    filename: 'bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

此时运行

webpack

可以发现在我们的输出目录build下还生成了一个index.html,里面还自动引入了我们生成的的bundle.js。

可是这样并没有解决我们的问题，那么让我们来使用html-webpack-plugin的更多功能，修改webpack.config.js文件为：

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/build',
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack Demo",
      filename: 'demo.html',
      minify: {
        collapseWhitespace: true,
      },
      hash: true
    })
  ]
};

生成后发现在输出目录生成的html文件名变味了demo.html，html的标题成了Webpack Demo，引用的js有了hash值，并且html还被压缩了，去掉了里面所有可折叠的空白元素。

这样就行了吗？

不够的，实际的开发过程中我们遇到html结构没有这么简单，会需要更多的html结构。

就比如我想在生成的html中引入一个bootstrap的css。

这又是一个新的问题，然而html-webpack-plugin的模板功能可以解决这个问题。

新建一个模板html文件template.html，

修改webpack.config.js为：

这样就会以index.html文件为模板生成最后的html文件，当然html-webpack-plugin还有更多的功能，这里就不细说了。