首先，来个官网文档对webpack的定义：
webpack 是代码编译工具，有入口、进口、loader 和插件。webpack 是一个用于古代 JavaScript 应用程序的动态模块打包工具。当 webpack 解决应用程序时，它会在外部构建一个依赖图(dependency graph)，此依赖图对应映射到我的项目所需的每个模块，并生成一个或多个 bundle。
webpack 的外围价值就是前端源码的打包，行将前端源码中每一个文件（无论任何类型）都当做一个 pack ，而后剖析依赖，将其最终打包出线上运行的代码。
webpack 的四个外围局部：
- entry 规定入口文件，一个或者多个
- output 规定输入文件的地位
- loader 各个类型的转换工具
- plugin 打包过程中各种自定义性能的插件
那么，webpack在日常工作中，是如何配置的呢？
通常状况下，webpack的配置文件在我的项目内会分为：
- webpack.common.js
- webpack.dev.js
- webpack.prod.js
别离代表专用配置，开发环境配置，线上环境配置。
接下来，将按这三个文件来解说如何配置，局部基础知识和要点会写在正文中，要晓得全副配置内容，倡议查看官网文档：https://www.webpackjs.com/con...
webpack.common.js：
const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const srcPath = path.join(__dirname, '..', 'src')module.exports = { entry: path.join(srcPath, 'index.js'), //以该门路下的index.js作为构建的开始进入入口终点后， //webpack 会找出有哪些模块和库是入口终点（间接和间接）依赖的 module: { rules: [ { test: /\.js$/, loader: ['babel-loader'], //应用哪个loader来解决文件 include: srcPath, exclude: /node_modules/ //test,include,exclude都是拿来匹配哪些文件须要被loader解决的， //优先级是exclude > include > test }, { test: /\.css$/, // loader 的执行程序是：从后往前 loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss }, { test: /\.less$/, // 减少 'less-loader' ，留神程序 loader: ['style-loader', 'css-loader', 'less-loader'] } ] }, plugins: [ new HtmlWebpackPlugin({ template: path.join(srcPath, 'index.html'), filename: 'index.html' }) ]}