• webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

实际上，就是可以在代码中写先进的代码，然后通过打包器转换为浏览器能够读得懂的代码。

$npm install webpack -g
$npm install webpack-cli -g

如果安装了淘宝镜像，建议使用cnpm安装，速度会更快。
webpack中提供了核心api ,cli中提供了命令

$npm install webpack -D
$npm install webpack-cli -D

代码如下（示例）：

entry 入口用于指引webpack应该先从哪个模块开始，通过在webpack配置文件中配置entry属性来指定入口。

//入口
	entry:{
		main:path.resolve(__dirname,"./src/main.js")
	},
	//路径可以使用绝对路径，也可以使用相对路径

用于指引webpack所构建的bundler在哪里输出,默认路径是 ./dist

//出口
	output:{
		//filename:"bundle.js" 可以直接这样定义 bundle表示一束，一捆
		//这时的name对应的是entry中的main。如果main是其他字段，name也响应改变。
		filename:"[name].[hash].js",
		//path必须是绝对路径
		path:path.resolve(__dirname,"./dist")
	},

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）

module.exports = {
	//入口
	entry:{
		main:path.resolve(__dirname,"./src/main.js")
	},
	//出口
	output:{
		//filename:"bundle.js" 可以直接这样定义 bundle表示一束，一捆
		//这时的name对应的是entry中的main。如果main是其他字段，name也响应改变。
		filename:"[name].[hash].js",
		//path必须是绝对路径
		path:path.resolve(__dirname,"./dist")
	},
	module: {
	    rules: [
	      // 打包时，当检测到是.js文件时，我就用babel-loader来进行加载，使用babel编译器进行代码编译
	      { test: /.js$/, use: ['babel-loader'], exclude: /node_modules/ }
	    ]
	  }
}

plugins插件的主要作用是打包优化,压缩等,它的功能和loader一样非常强大,使用任何插件时,只需要require引入进来即可

 // plugins
  plugins: [
    // 用于把打包(编译)后的js脚本与index.html关联起来
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './public/index.html'),
      title: 'react'
    })
  ]

5、webpack模式

在项目中,会区分开发环境( development )和生产环境(production),两种环境,可以通过mode参数来配置

module.exports={
    mode:'production'  //  production||development 
}

全局安装：
cnpm install webpack -g
cnpm install webpack-cli -g
局部安装：
cnpm install webpack -D
cnpm install webpack-cli -D

使用 CleanWebpackPlugin 插件自动清理 dist目录，见其官方文档。

webpack --config xxx.config.js

cnpm install webpack-dev-server -D
cnpm install html-webpack-plugin -D

webpack-dev-server --config xxx.config.js

devServer.hot = true
在plugins中添加两个webpack内置的插件实例

需要安装两个插件
config.plugins.push(new webpack.NamedModulesPlugin())
config.plugins.push(new webpack.HotModuleReplacementPlugin())

//热更新原理：启动本地服务时创建一个webSocket长连接，当代码有变化时，把变化的数据推送客户端进行更新

cross-env 的使用

cnpm install babel-loader -D  
// 用于加载.js文件
cnpm install @babel/core @babel/preset-env -D  
// 这两个库才是真正用于编译js的