【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还有更多的功能，这里就不细说了。