webpack的配置详解持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情【

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

【webpack】是一个用于现代 JavaScript 应用程序的静态模块打包工具。

通俗的解释就是：webpack 可以将你项目中的每一个模块都进行打包编译成一个或者多个静态资源，然后可以通过打包过后的静态资源来展示你的项目内容。

webpack（webpack.config.js）的核心概念：

1.入口(entry)

打包模块的入口，在没有设置【入口(entry)】的时候，默认的入口路径为：【./src/index.js】。

代码：

单页面应用：

module.exports = {
  entry: './src/main.js'
}

多页面应用：

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js'
  }
}

2.输出(output)

webpack 将打包编译的文件输出到【output】配置的路径之中。注意，即使可以存在多个 entry 起点，但只能指定一个【output】配置。

代码：

const path = require('path');
module.exports = {
  output: {
    filename:path.join(__dirname,"/build/dist"),
    filename: "[name].[hash].dist.js"//打包后输出文件的文件名
  }
}

3.loader

【loader】用于对模块的源代码进行转换。

需要进行安装：

npm install --save-dev babel-loader style-loader css-loader less-loader postcss-loader

解释：

babel-loader：对.jsx、.js的代码进行转化。

postcss-loader：自动添加前缀的插件

less-loader：用于处理编译 .less 文件，将其转为 css 文件代码。

css-loader：帮我们分析出各个 css 文件之间的关系，把各个css文件合并成一段 css 。

style-loader：将css-loader生成的css代码挂载到页面的header部分。

代码：

module.exports ={
	module: {
	    rules: [
			{
				test: /(\.jsx|\.js)$/,
				use: {
					loader: "babel-loader",
				},
				exclude: /node_modules/
			},
			{
				test:/\.(css|less)$/,
				use:[
					{
						// 将所有的计算后的样式加入页面中,html页面中插入css代码
						loader:"style-loader"
					},
					{
						// 解析CSS样式,可以用模块的方式手动对象形式写样式,style-loader自动处理了这个注入
						loader:"css-loader",
					},// 能够使用类似@import 和 url(...)的方法实现 require()的功能
					{
						loader:"less-loader"
					},
					{
						loader: "postcss-loader"
					}// 自动添加前缀的插件
				]
			}
	    ]
	}
}

4.插件(plugin)

【插件(plugin)】是 webpack 的重要功能，目的在于解决 loader 无法实现的其它事。

可以安装各种插件：

热加载插件：webpack.HotModuleReplacementPlugin()

模板插件：npm install --save-dev html-webpack-plugin

静态资源复制到指定目录（一般是编译打包的输出目录）：npm install --save-dev copy-webpack-plugin

等等插件。

代码：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const copyWebpackPlugin = require('copy-webpack-plugin')

module.exports ={
	plugins: [
		new webpack.HotModuleReplacementPlugin(),// 热加载插件
		new HtmlWebpackPlugin({
			template: path.join(__dirname, `src/index.tmpl.html`),
			filename: `index.html`,
		}),
		// 静态资源输出到webpack的打包编译的输出目录
		new copyWebpackPlugin([{
			from:  path.resolve(__dirname, "./public"),
			to: path.resolve(__dirname, './build/development') // 放到 output 文件夹下
		}])
	]
}

5.模式(mode)

通过选择 development、 production 、none 之中的一个，来设置【mode】参数，默认值为 production。

代码：

// 开发环境

module.exports = {
  mode: 'development',
}

// 生产环境

module.exports = {
  mode: 'production',
}

6.devtool

是配置sourceMap的。

sourse-map 就是一份源码和转换后代码的映射文件。

eval：打包后的模块都使用 eval() 执行，行映射可能不准；不产生独立的 map 文件。

cheap：map 映射只显示行不显示列，忽略源自 loader 的 source map。

inline：映射文件以 base64 格式编码，加在 bundle 文件最后，不产生独立的 map 文件。

module：增加对 loader source map 和第三方模块的映射。

开发环境：为了方便代码调试。

module.exports = {
  devtool:"cheap-module-eval-source-map",
}

生产环境：打包出来的文件相对小。

module.exports = {
  devtool:"none" // 或者不配置
}

7.devServer

是webpack开发服务器。

安装：npm install --save-dev webpack-dev-server

contentBase：本地服务器加载的页面所在的目录。

inline：设置是否实时刷新。

port：端口号设置，如果省略，默认为"8080"。

hot：热加载。

overlay：设置报错信息是否在浏览器上面显示。

proxy：配置代理。

代码：

module.exports = {
  	devServer:{
		contentBase:"./build/development",//本地服务器所加载的页面所在的目录
		historyApiFallback:true,//不跳转，所有的跳转将指向index.html
		inline: true,//实时刷新,
		port:8887,//如果省略，默认为"8080"
		hot:true, //热加载，还需要安装pm install --save-dev babel-plugin-react-transform react-transform-hmr
		overlay: {//报错信息在浏览器上面显示
			warnings: true,
			errors: true
		},
		// 配置代理
		proxy: {
			'/': {
				target:"http://localhost:8085"
			}
		}
	}
}

关注公众号（月影WEB），了解更多的前后端知识；

欢迎大家关注互相交流学习；

webpack的配置详解

webpack（webpack.config.js） 的核心概念：