Webpack01

1.认识Webpack

        Webpack是一个静态模块打包器，可以将我们写的程序打包成一个或者多个文件。那么什么是模块呢？Webpack中的模块指的是Webpack可以处理的最小文件，js、css、图片等等。什么是静态呢？静态指的是在开发过程中，存放在本地的资源（js、css、图片这些），而非是从远程服务器获取到的资源。场景：我们开发ES6的时候，会使用module，把写的代码拆分为好多个模块，这些操作下，浏览器需要解析就得做其他处理，手动解决这个问题就很慢，所以就使用了Webpack。

2.使用Webpack

初始化项目

        首先我们需要先初始化自己的项目，同Babel一样，在项目目录下键入命令：npm init，给项目起一个自己的名字（依旧注意不能是中文名），生成package.json表示初始化成功。

安装Webpack依赖的包

        安装webpack-cli和webpack包，同Babel，这两个包一个就是命令行工具，另外一个就是核心包。安装完成后会在package.json中体现出来。因为webpack是开发时需要使用到的，所以安装成开发依赖 (--save-dev)。

配置Webpack

        同Babel一样，webpack也是需要配置的。官方文档路径：https://webpack.docschina.org/concepts/

        我们来试一下，创建好webpack.config.js文件，其中配置如下：

其中entry表示文件入口，用来指定webpack使用哪个模块(./src/index.js)进行分析模块的依赖关系的。

output表述输出，指定输出目录(./dist)及输出文件名(testWebpack.js)。

index.js内代码为：

module.js中代码为：

 接下来需要设置启动webpack的命令，在package.json中的“script”中进行设置。

好的，设置完成后让我们来看看效果吧！在命令行工具中使用命令 npm run webpack

 运行成功后，可以看到生成了dist目录，目录下的文件名为testWebpack.js

 

 这也不用测试了，明眼就能看出来是已经把我们的代码合并为一个文件了，并且可以正确输出。

 3.webpack的核心概念

入口（entry）

单个入口文件可以简写为以上图中所示：

module.exports = {
  entry: './path/to/my/entry/file.js',
};

这其实是以下的简写（单一入口简写就行，下图是为了讲多入口的）：

module.exports = {
  entry: {
    main: './path/to/my/entry/file.js',
  },
};

而当我们实际开发的时候如果是多页面开发，入口文件并不一定是一个，所以可以这么写：

module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js',
  },
};

可见对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。

输出（output）

单入口的上边已经做了介绍，这里主要是看一下多入口的文件输出是怎么样的：

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
};

可以看到设置了filename是'[name].js' ，使用name占位符，webpack会自动把入口文件的名字传进来，生成./dist/app.js和./dist/search.js。

我们试一下吧：配置文件如下

新增search.js如下：

 npm run webpack 试试：

 生成了index.js和search.js， 成功。

 加载器（loader）

官方文档：https://webpack.docschina.org/concepts/loaders/

loader的作用是让webpack处理非js的模块的，默认的webpack是用来处理js的，但是我们需要他去处理其他的资源(css\图片等)，那么就需要loader去加载处理其他资源的能力。

我们这里使用babel-loader来做例子使用loader，babel是来编译ES6的代码的，webpack是用来打包js文件的，这是两个相互独立的东西，而把这两个独立的东西关联起来的正是babel-loader。

我们来安装一下依赖的包。

npm install --save-dev babel-loader @babel/core @babel/preset-env

然后创建babel的配置文件babel.config.json

配置webpack.config.js配置文件：

 写一个之前的index.js测试用

 

   npm run webpack试试：

 可以看到已经进行编译了，但是很明显Array.from 、Promise这些都还没有转，是因为babel也不认识这些东西，所以还需要加载其他的模块：Polyfill，所以需要在引入一个包：core-js

 在index.js中引入:

再试一下：

可见生成的文件相当大，但是解决了兼容性的问题，引入了core-js写的之前没有的方法。成功。

 插件（plugin）

 官方：https://webpack.docschina.org/plugins/

我们使用html-webpack-plugin来试试：

首先需要安装包 npm install --save-dev html-webpack-plugin

然后在webpack.config.js中配置

 然后npm run webpack试试：

生成成功。 

同样的，插件的使用也得考虑多入口的因素，

其中template指定模板文件，filename指定输出文件名，chunks指定引入的脚本名（要和上边的命名相同）。