webpack四大核心配置
① entry：entry指定打包入口，可以是一个字符串，也可以是一个字符串数组，还可以是一个对象。
②output：指定出口文件位置
③plugins：引入插件
④module：用来指定loader的，loader实质上是用来对我们的资源进行预处理的工具，便于webpack将他们当成模块
什么是webpack？
webpack是一个模块打包器（bundler）。
在webpack的概念中，前端的所有资源文件（js/css/json/img/sass/less/...）都会作为模块来被处理，webpack会根据模块的依赖关系进行静态分析，生成对应的静态资源，最终打包部署上线。
webpack干的工作就如下图所示：
image
我们先来了解下webpack需要的一些铺垫性知识：
loader
webpack本身只能加载js/json模块，如果要加载其它类型的文件/模块, 就需要使用对应的loader进行转化和加载。
loader 可以将所有类型的文件转换为webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
loader自身也是运行在node.js环境中的JavaScript模块，其本身是一个函数，接收源文件作为参数，返回转化的结果。
loader一般以 xxx-loader 的方式命名，xxx代表了这个loader要做的转化功能，比如：css-loader，json-loader等。
插件
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。
插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
- 可以完成一些loader不能实现的功能；
- 使用插件一般在webpack的配置信息plugins选项中指定
- UglifyJSPlugin: 压缩js文件
- HtmlWebpackPlugin: 自动生成HTML文件
- CleanWebpackPlugin: 自动清除指定文件夹资源
2.1 初始化项目
在工程的目录结构下，新建webpack_demo工程文件，并进行初始化，如下所示：
-
安装webpack （先安装全局的webpack，后安装局部webpack）
image
-
项目初始化
image
image
2.2 打包项目中的js和json文件
（一）新建单个js文件，如下图所示：
image
打开命令行执行打包代码：
image
image
打包成功后，你就可以引入bundle.js，其执行效果和引入main.js一样，在开发过程中，我们就可以把多个js文件都打包到bundle.js中，这样客户端请求资源就由多次变成一次。
运行结果如下图所示：
image
（二）新建多个js和json文件，如下图所示：
新建多个js文件，并在main.js中引入并调用。
image
运行结果：
image
新建多个json文件，并在main.js中引入并调用，如下图所示：
image
运行结果如下：
image
2.3 在webpack中使用配置文件
在 webpack 4 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，所以 配置文件比在终端(terminal)中手动输入大量命令要高效的多。
新建 webpack.config.js 文件，写入相关配置信息，在终端直接执行webpack即可打包，如下图所示：
image
2.4 打包项目中的CSS文件
首先安装并添加 style-loader 和 css-loader 模块：
image
然后进入webpack.config.js中配置loader选项：
image
创建main.css文件，写入样式，并在main.js中引入，然后通过webpack命令打包，如下图所示：
image
运行结果如下：
image
2.5 打包项目中的图片文件
首先安装并添加 file-loader 模块：
image
然后进入webpack.config.js中配置loader选项：
image
引入图片文件，在index.html中创建标签，在css文件中的样式里面使用图片背景，执行webpack打包到bundle.js文件，如下图所示：
image
运行结果：
image
通过上面的操作，我们可以了解到，如果要加载其它的资源，只需要配置好相应的loader，然后统一打包到bundle.js文件中运行即可。
接下来，我们思考一个问题：在开发过程中，每增删改某一块内容，都需要打包后才能正常运行，那我们能不能做到修改好动态打包运行呢？此时，借助服务器可以帮助实现这一操作。
2.6 自动编译打包
webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。
(一) 下载安装
image
(二） 修改配置文件
在webpack.config.js告诉开发服务器(dev server)，在哪里查找文件：
image
以上配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。
(三） package配置
增加"start": "webpack-dev-server --open"选项。
image
(四）编译打包应用并运行
npm start
image
当功能开发完毕后，关掉服务器，执行webpack打包成本地文件即可。
2.7 webpack中各种插件的使用
在webpack中插件有很多，都是基于解决某一方面功能而产生的。大部分插件使用方式相同，我们可以做到举一反三。
（一） HtmlWebpackPlugin
该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。
安装：
image
在项目中引入，进入webpack.config.js文件中，增加如下配置：
image
删除掉原先打包编译生成的dist文件夹，重新执行webpack，该插件会自动根据指定的模板页面帮助我们创建index.html文件，并做好相关配置引入，如下图所示：
image
该篇转载自旋之华公众号https://mp.weixin.qq.com/s/kQUh4Mk3mOLQ1QhuiJM_jg
网友评论