webpack入门介绍及简单配置

webpack在当前前端工程师常用的一个工程化打包工具，官方对webpack的介绍是：webpack本质上是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时，它会在内部创建一个依赖图(dependency graph)，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个bundle。

官网地址：https://webpack.js.org/，（也将其切换成中文）。

webpack 是一个高度可配置的打包工具，通过配置，能够很好的满足需求。在学习如果配置webpack之前，需要先了解一个webpack的四个核心概念。

四大核心概念：

入口(entry)
输出(output)
loader
插件(plugins)

入口(entry)

打包的入口：所有的依赖模块都可以通过这个入口直接或间接地找到，也就是构建webpack内部依赖的起点；

单个或多个：（1）多页面应用，存在多个入口，（2）单页面应用可能也存在多个入口，打包入口不代表文件执行的入口，例如我们可以将业务代码和框架代码分别打包。

基本用法：
在webpack.config.js中配置

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

其实上述是下面这种对象语法形式的简写：

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

对象语法形式看起来繁琐一点，但是可以定义每一个入口的key，每一个key相当于一个chunk，这有利于扩展，例如如果是一个多页面应用，有多个入口的话，直接在上述的对象语法形式上扩展即可，：

module.exports = {
  entry: {
    main: './path/to/my/entry/file.js',
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

我们也可以往一个入口中传入一个数组，即相当于把数组中的多个文件打包到一个chunk中：

module.exports = {
  entry: {
    main: ['file1.js','file2.js']
  }
};

输出(output)

output可定值打包后文件输出的文件名以及输出路径，所以output为一个对象，包括两点：

filename ：用于表示输出文件的文件名，
path：目标输出目录的绝对路径。

对于单个入口文件，output可以简单配置如下：

module.exports = {
  output: {
    filename: 'bundle.js',
    path: '/path/to/my/output'
  }
};

以上配置会将打包后的 bundle.js 文件输出到 /path/to/my/output 目录中。

如果有多个入口的话，可以采用占位符来确保每个文件具有唯一的名称：

module.exports = {
  entry: {
    main: './path/to/my/entry/file.js',
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
};

以上配置会在 /dist 目录下分别生成：main.js、pageOne.js、pageTwo.js、pageThree.js。

loader

loader 用于对模块的源代码以及文件进行转换，转换成浏览器可直接执行的模块。

常用loader：

编译相关：
babel-loader、ts-loader
样式相关：
style-loader、css-loader、less-loader、postcss-loader
文件相关：
file-loader、url-loader

由于loader解析模块时，将从模块路径（通常将模块路径认为是 npm install, node_modules）解析，因此我们使用前需要先安装相对应的 loader，以css-loader为例：

npm install --save-dev style-loader
npm install --save-dev css-loader

使用 loader 的方式有三种：配置、内联和CLI，常用的是通过配置来使用：

module: {
    rules: [
      {
        test: /\.css$/,
        use: [ { loader: 'style-loader' }, { loader: 'css-loader'  } ]
      }
    ]
  }

（插件）Plugins

插件的功能很强大，可以用于解决 loader 无法实现的其他事，例如：

参与打包整个过程
打包优化和压缩
配置编译时的变量

插件的使用方法与loader类似，也需要先安装，此处以html-webpack-plugin为例：

npm install --save-dev html-webpack-plugin

然后在webpack.config.js中配置：

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

module.exports = {
    //插件
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack demo1',
            template: path.resolve(TEMPLATES_PATH, 'template.html'),
            chunks: ['app'],
        })
    ]
}

先通过require将插件引入进来，然后，在配置对象中新增一个plugins属性，plugins的值是一个数组，数组中可以通过new 方式使用插件，数组中可以有多个插件，且对每一个插件分别定义options。

html-webpack-plugin是html模板插件，可以根据你的提供的html模板生成你需要的html文件，因此我在项目中定义了一个templates文件夹用于放html模板，template.html模板文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <h1>hello webpack!</h1>    
</body>

</html>

最后会在build文件夹下生成一个index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack demo1</title>
</head>
<body>
    <h1>hello webpack!</h1>    
<script type="text/javascript" src="app.js"></script></body>

</html>

可以发现，该插件会自动将你chunks中的js文件生成到html文件的<script> 标签内，如果你有任何CSS assets 在webpack的输出中（例如，利用ExtractTextPlugin提取CSS），那么这些将被包含在HTML head中的<link>标签内。

其他插件的功能及使用方法可以在此处查看：https://webpack.docschina.org/plugins/html-webpack-plugin/。

此处为一个简单的demo。