【React中配置Webpack】

前言

在了解如何配置Webpack之前，我们应该先知道Webpack是干什么的，以及我们为什么要配置webpack。

首先关于webpack是干什么的

webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。

从这段话中我们可以了解到Webpack中有三大特性，转换，打包，包裹任何资源。之后我会一一为大家讲解

在开发web应用时，假如我们没有任何构建工具，会出现那些问题呢？

1.浏览器运行速度缓慢
在我们实际开发中会引入很多的库，当浏览器加载过多的库时，就会导致浏览器响应很慢。

2.浏览器无法理解代码
当我们使用es6，es7或者ts进行开发时，我们会发现浏览器解析不了我们开发的代码，所以我们需要工具来将我们的代码转化成浏览器能识别的语言

在现在的开发中，打包工具的构建已经是必不可少的一部分
现在我们就来了解如何配置Webpack

一、基本配置

entry

entry指示应使用哪个模块 webpack 开始构建其内部依赖关系图。Webpack将找出入口点依赖的其他模块和库（直接和间接）。

官网地址
用法：entry: string | [string]
一个webpack工程，首先至少要有一个入口。

module.exports = {
  entry: './index.js'
};

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

两种写法都可以
也可以有多个入口：

module.exports = {
  entry: {
    pageA: './pageA.js',
    pageB: './pageB.js'
  }
};

module.exports = {
  entry: ['./pageA.js', './pageB.js']
};

这样配置后会将多个js文件，最终打包成一个入口。

output

output属性告诉 webpack 在何处发出它创建的捆绑包以及如何命名这些文件。它默认为主输出文件和任何其他生成的文件的文件夹

最基本的配置为：

module.exports = {
  output: {
    filename: 'output.js', // 文件名
  }
};

如果您的配置创建了多个“块”（例如多个入口点或使用CommonsChunkPlugin等插件），则应使用变量来确保每个文件具有唯一的名称。

module.exports = {
  entry: {
    pageA: './indexA.js',
    pageB: './indexB.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  }
};

在开发中，当我们需要访问服务器资源的地址时，我们需要配置publicPath

module.exports = {
 output: {
		publicPath: '/static/web/',
		path: path.resolve(__dirname, "../dist"),
		filename: '[name]_[chunkhash].js',
	},
};

path与publicPath

path：用来存放打包后文件的输出目录
publicPath：指定资源文件引用的目录
在实际开发中，publicPath是运维为我们配置的前端资源存放的地址，当我们配上publicPath地址后，我们的访问地址就需要带上publicPath
例：https://www.baidu.com/static/web/login
output还有很多其他属性，具体可以查看官网

module （转换）

正如最上面的的一段引用中所描述，我们需要Webpack来进行代码的转换(transform)。
Webpack不仅仅能处理js文件，还能处理css、图片。而且也能将ES6的代码、TypeScript的代码转换为浏览器可执行的代码。
不同的文件需要不同的loader来进行转换，如babel-loader，css-loader，less-loader，scss-loader等
这些转换操作都是在module中进行的，如将es6转化为es5：

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

上面的代码是转化我们项目中所有的资源，但当我们引入的一些第三方库中已经转化过，我们是不需要对他进行转化的。这时我们就需要排除指定库的转化：

module.exports = {
  //...
    module: {
	    rules: [
		     {
				test: /(\.jsx|\.js)$/,
					exclude: /(node_modules|bower_components)/,
					use: ['happypack/loader']
			},
			{
				test: /(\.jsx|\.js)$/,
				include: [path.resolve('node_modules/react-sortablejs')],
				use: ['babel-loader', 'happypack/loader',],
			},
	    ]
  }
};

exclude：过滤指定的库
include：匹配指定的库

在此列举一些常用的转换：

module: {
	rules: [
		//less样式转css
		{
			test: /(\.css|\.less)$/,
			use: ExtractTextPlugin.extract({
				fallback: "style-loader",
				use: ['css-loader', 'less-loader']
			})
		},
		//svg图片格式转化
		{
			test: /\.svg$/,
			issuer: { test: /\.(js|ts|jsx|tsx)x?$/ },
			use: ['@svgr/webpack']
		},
		//其他语法转es5
		{
			test: /(\.jsx|\.js)$/,
			exclude: /(node_modules|bower_components)/,
			use: ['happypack/loader']
		},
		{
			test: /(\.jsx|\.js)$/,
			include: [path.resolve('node_modules/react-sortablejs')],
			use: ['babel-loader', 'happypack/loader',],
		},
		//sass样式转css
		{
			test: /\.scss$/,
			use: ExtractTextPlugin.extract({
				fallback: "style-loader",
				use: ["css-loader", "sass-loader"]
			})
		},
		//图片转化
		{
			test: /\.(png|svg|jpg|gif|xlsx|pdf)$/,
			use: "url-loader?limit=1024&name=[name].[ext]&outputPath=img/"
		},
	]
},

resolve

resolve就是去解析配置的模块。通俗来讲就是为模块起别名。
该配置为非必须，你也可以不用配置它
例如：

module.exports = {
  //...
  resolve: {
    alias: {
      '@container': path.resolve(__dirname, "../src/container"),
    }
  }
};

这样在某些需要相对路径比较深的模块引入时，可以从这样：
import container from ‘…/…/…/src/container’
变为这样：
import container from ‘@container’

plugin （包裹任何资源）

loader 被用于转换某些类型的模块，而plugin则可以用于执行范围更广的任务。plugin的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。plugin接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个plugin，你只需要 require() 它，然后把它添加到 plugins 数组中。多数plugin可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个plugin，这时需要通过使用 new 操作符来创建它的一个实例。

使用方法：

plugins: [
	new HtmlWebpackPlugin({
		filename: "index.html",
		template: "./src/index.ejs",
		favicon: "favicon.ico",
		chunks: ["vendors", "index"]
	}),
]

当有多个出口文件时，我们就需要配置多个plugins

plugins: [
	new HtmlWebpackPlugin({
		filename: "indexA.html",
		template: "./src/indexA.ejs",
		favicon: "favicon.ico",
	}),
	new HtmlWebpackPlugin({
		filename: "indexB.html",
		template: "./src/indexB.ejs",
		favicon: "favicon.ico",
	}),
]

html-webpack-plugin中还有很多属性，具体可看github文档
需要了解plugins中还有那些插件，可以查看官方文档

还有一个比较重要的插件uglifyjs-webpack-plugin，使用该插件可对代码进行压缩、混淆。
使用方法：

plugins: [
	new UglifyJSPlugin({
		exclude: /node_modules/,
		parallel: true,
		uglifyOptions: {
			compress: {//其他压缩选项
				arguments: false,
				drop_console: true,   // 控制删除打印
				keep_infinity: true,
				top_retain: true,
			},
			output: {//其他输出选项（默认值已针对最佳压缩进行了优化）
				beautify: false,
				keep_quoted_props: true,
				wrap_iife: true,
			},
			ie8: true,//启用 IE8 支持
			mangle: false,//启用名称修改
			sourceMap: false// 如果要指定源映射选项，请传递对象
		}
	}),
]

uglifyjs-webpack-plugin常用的属性
test：测试匹配的文件
exclude：排除的文件
include：包含的文件
parallel：使用多进程并行运行和文件缓存来提高构建速度
uglifyOptions：压缩，混淆，优化代码的属性

devServer

至此我们已经大致了解了Webpack如何配置，以及配置Webpack的好处。
但是我们如何在本地运行我们的项目，以及在开发中如何热更新我们的代码呢？
通过上面的问题，我们就引出了devServer。
通过配置了devServer，我们就能在本地访问我们的测试服务器
下面我们就来看看devServer如何配置，以及他有那些常用属性

module.exports = {
	devServer: {
	        contentBase: path.resolve(__dirname, '../dist'),
	        disableHostCheck:true,
	        hot: false,
	        hotOnly: false,
	        host: "0.0.0.0",
	        port: 8081,
	        historyApiFallback: true,
	        stats: "errors-only",
	        proxy: [
	            {
	                context: [''],//模块名
	                target: 'www.baidu.com',//服务器域名地址
	                changeOrigin: true,
	                secure: true,//验证 SSL 证书
	            }
	        ]
	    }
}
 

contentBase：告诉服务器从哪里获取资源
disableHostCheck: 设置为 true 时，此选项将绕过主机检查。就是通常我们所说的跨域。
hot：启用 webpack 的模块热替换。当你启用后，webpack会自动帮你添加一个热更新插件，如没有插件是无法进行热更新的
hotOnly：启用热模块替换，无需页面刷新更新.
host：指定使用一个 可以访问静态资源的地址
默认可通过localhost域名访问，如需要通过配置的测试服务器地址访问则设置为0.0.0.0
例如：我如果设置为0.0.0.0，
那么我可以通过proxy属性中target设置的路径访问:www.baidu.com:8081。同域名下所有人都可访问到该地址
如果未设置，则只能通过localhost或者127.0.0.1访问
port：服务端口号。不配置时，默认为8080
historyApiFallback：当匹配的配置文件不存在时，不出现404
proxy：配置后端开发服务器 API，并且在同域名下发送 API 请求

至此，我们的Webpack基础配置已经讲解完成。后面会持续更新正式开发中如何配置，以及我们如何暴露我们自己的工具库来进行使用

如需转载，请注明出处

引用：
https://www.yuque.com/fe9/basic/fnvdeu#zph7uv
https://www.webpackjs.com/concepts/