与webpack的初次见面

1.简介

webpack，即web-pack，是一个前端自动化打包工具。它的使用是基于Node和NPM，其应用非常广泛，很多框架的脚手架都是基于webpack的，比如vue、angular、reactjs等框架。

2.安装

npm i webpack  webpack-cli -g

3.概念

在webpack中，所有的静态资源都可以被处理为一个模块，包括js、图片、css、字体。
webpack四大核心概念：

• 入口（entry）：工程的入口文件配置
• 输出（output）：打包输出文件配置
• 加载器（loader）：加载器，用于处理各种不同类型的模块，可扩展
• 插件（plugins）：插件，在webpack打包过程中不同时机执行一些任务，比如清除打包目录、复制静态文件、抽取css文件。

（1）入口

在webpack.config.js中

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

最常用的就是这种对象格式，单页面应用（SPA）就是使用这种方式（不包括vendors，一般都是动态加载第三方模块，动态加载的模块不是入口起点）。通过配置主入口，相关模块从这里开始依赖。每个依赖项随即被处理，最后输出到称之为bundles 的文件中。
注：为了支持提供更佳vendor 分离能力的DllPlugin。官方现在不太建议将第三方模块放到entry.vendors中。

（2）输出

官方定义：配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。
输出主要配置以下两点：

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

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

（3）加载器

loader可以理解为不同类型模块的处理器，将这些类型的模块处理为浏览器可运行和识别的代码。比如babel-loader将es6以上代码转换为es5代码；sass-loader将sass代码解析为css代码；url-loader和file-loader可以将图片、字体等静态文件解析为base64码或者静态文件地址。Loaders给我们提供了处理模块的入口，在里面可以使用全部的js功能，从而使webpack具有了强大而灵活的能力。
我们要对不同类型模块安装相应的加载器，比如解析css代码：

npm i --save css-loader

webpack.config.js

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

（4）插件

plugins用来在一些合适的时机执行一些特定的任务，比如打包、压缩、代码分割、静态资源处理、环境变量的注入、将所有css的module抽取为单个文件等。webpack自身也是用插件系统构建起来的。想要使用一个插件，你只需要require() 它，然后把它添加到plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用new 操作符来创建它的一个实例。插件目的在于解决 loader 无法实现的其他事。
webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const config = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

更多详情请移步官网：webpackjs