概述

Webpack是一个模块打包器，它能根据模块的依赖关系递归的构建一个依赖关系图，当中包含了应用程序需要的所有模块，最后打包成一个或者多个bundle。简单来说，就是将你的javascript编译成一个或多个文件。

创建项目和安装webpack

npm init -y
npm install -g webpack webpack-cli --save-dev

package.json

package.json文件存放了项目的基本信息（包括名称、版本，开发者、入口）以及第三方依赖包。无论任何时候，你安装一个新的包，包名和版本会添加到package.json文件中。package-lock.json包含了你项目的整个依赖树，包含了间接的依赖信息。package-lock.json还包括了每个模块具体的版本信息。
还可以在package.json中配置打包命令，如下所示：

“build”:”webpack --mode=production”

配置

webpack.config.js是webpack默认使用配置文件，也是大多开发者使用的配置文件。但可以在package.json中定义自己的配置文件。
Webpack4约定了默认的配置，可以实现零配置。

入口（entry）

entry用来指引Webpack应该从哪个模块开始，它是构建的入口。之后Webpack会自动找出应用内其他相互依赖的内容进行打包。默认配置如下：

 model.exports={
  entry:'./src/index.js'
}

出口（output）

定义Webpack所构建的bundle在哪里输出，默认的输出路径是dist/main.js。

Loaders和Plugins

Loaders和plugins是webpack的核心。常用的Loaders和plugins如下：

• Babel-loader
• css-loader
• sass-loader
• postcss-loader
• style-loader
• url-loader
• file-loader
• MiniCssExtractPlugin

Webpack DevServer

Webpack为我们提供了一个随时可用的开发web服务器，它将帮助我们大幅缩短编译时间，为我们提供一个HTTP URL来访问HTML页面（而不是文件协议），甚至可以在JavaScript、CSS等发生变化时重新编译打包并重新加载页面。

安装

$ npm install --save-dev webpack-dev-server

配置

module.exports = {
    devServer: {
        port: 9000,
        contentBase: path.resolve(__dirname, ' build' )
    },
    // ...
}