一、Webpack是什么？

一个现代的JavaScript应用程序静态模块打包器、打包工具。

它主要用于管理JavaScript模块的依赖关系，并将它们打包成单个文件以供浏览器使用。
当Webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。Webpack可以处理JavaScript、CSS、图片等多种资源，并且支持各种各样的插件和loader，以满足不同的需求。Webpack的配置文件是一个JavaScript模块，可以通过导出一个配置对象来进行配置。

二、Webpack的常用配置选项

包括entry、output、module、plugins等。

entry指定应用程序的入口文件
output指定打包后的文件输出路径和文件名
module指定各种资源的处理方式
plugins用于扩展Webpack的功能

三、详解webpack-dev-server的配置属性

proxy
当您有一个单独的API后端开发服务器，并且想要在同一个域上发送API请求时，则代理这些 url 。

看例子好理解。

proxy: {
    
    
	'/proxy': {
    
    
		target: 'http://your_api_server.com',
		changeOrigin: true,
		pathRewrite: {
    
    
		'^/proxy': ''
	}
}

假设你主机名为 localhost:8080 , 请求 API 的 url 是 http：//your_api_server.com/user/list
‘/proxy’：如果点击某个按钮，触发请求 API 事件，这时请求 url 是http：//localhost:8080/proxy/user/list。
changeOrigin：如果 true ，那么 http：//localhost:8080/proxy/user/list 变为 http：//your_api_server.com/proxy/user/list 。但还不是我们要的 url 。
pathRewrite：重写路径。匹配 /proxy ，然后变为’’ ，那么 url 最终为 http：//your_api_server.com/user/list 。

四、如何使用？

以下是Webpack入门知识：

4.1 安装Webpack

要使用Webpack，首先必须安装它。
可以使用npm（Node.js包管理器）进行安装。
打开终端并输入以下命令：

npm install webpack webpack-cli --save-dev

4.2 创建Webpack配置文件

Webpack需要一个配置文件来告诉它如何打包代码。
创建一个名为webpack.config.js的文件，并添加以下内容：

module.exports = {
    
    
  entry: './src/index.js',
  output: {
    
    
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

这个配置文件告诉Webpack
将src目录中的index.js作为入口文件，并将打包后的文件输出到dist目录中的bundle.js文件中。

4.3 使用Webpack打包代码

运行以下命令来使用Webpack打包代码：

npx webpack --config webpack.config.js

这将使用Webpack配置文件中的设置来打包代码，并将打包后的文件保存在dist/bundle.js中。

4.4 使用Webpack加载器

Webpack还提供了加载器，用于处理各种类型的文件，如CSS、图片和字体等。要使用加载器，需要在配置文件中添加相应的规则。例如，要使用css-loader和style-loader来处理CSS文件，可以在配置文件中添加以下规则：

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

这将告诉Webpack在遇到CSS文件时使用css-loader和style-loader来加载和处理它们。

【项目实战】Webpack入门知识