Webpack是现代JavaScript应用程序的静态模块打包器。从官网借用一张图片，就可以把一些预处理语言，js的最新语法，转换成浏览器可以识别的内容。目前通用前端框架已经有了成熟的脚手架，大部分都与webpack有很好的集成。我们只需要键入一些简单的命令就可以生成一个通用的项目模板，这很方便，但是我们需要知道为什么，所以今天我们尝试从头开始构建一个前端开发环境。

项目源代码：

https://github.com/gerryli0214/webpack-demo

webpack的四个核心概念：

1.入口(入口)

2.输出(输出)

3、装载机

4.插件

首先，我们执行npm init初始化一个节点项目并填写项目信息。整个项目的目录结构如下：

安装所有webpack-cli:

Npm install webpack-cli -g新建一个webpack.config.js，这是webpack的默认配置文件，我们可以在其中配置打包信息，初始化文件为：

const config={ }；module.exports=config入口(入口):

项目的入口文件可以配置为单/多，这是入口文件的相对路径，type : string/object；我们项目的入口文件是index.js

const config={ entry: '。/src/index . js ' } module . exports=config；输出(输出):

打包文件路径和配置信息，path是打包文件路径，filename是输出文件名，name是原始文件名，hash是打包哈希地址：

output : { path : path . resolve(_ dirname，' dist ')，filename: '[name]。[hash . min . js ' } loader :

加载器可以处理非JavaScript文件，默认情况下webpack只能处理JavaScript文件。使用加载程序时，必须首先安装指定加载程序的依赖项。本部分的配置规则与上一版本不同。具体配置如下：

npm安装babel-loader CSS-loader-Dmodule : { rules : [{ test :/。css$/，使用： extract TextPlugin . extract({ fallback : ' style-loader '，使用： 'css-loader' }) }，{ test: /。js/，exclude: /node_modules/，//过滤node_modules文件夹使用：[{ loader : ' babel-loader ' }]}]}插件):

插件是webpack最强大的功能之一。使用插件，我们可以混淆和压缩代码，并重新定义项目环境变量。插件分为webpack内置插件和第三方插件。当使用第三方插件时，首先，应该安装和导入相关模块。详细用法请参考npm。下面列出了几个项目中常用的插件：

html-webpack-plugin:

主要功能：

1.为外部资源(如html文件中引入的脚本和链接)在编译后动态添加哈希，以防止引用缓存的外部文件的问题

2.您可以生成和创建html条目文件。例如，单个页面可以生成一个html文件条目，在配置时可以打包多个页面

extract-text-web pack-plugin :

主要功能：分离打包的css文件

uglifyjs-webpack-plugin:

主要功能：混淆js代码

网络包包分析器：

主要功能：生成打包后的文件报表，打包后可以看到各个模块的文件大小信息

clean-webpack-plugin:

主要功能：清除每个包前的dist文件夹

配置信息如下：

const path=require(' path ')；const web pack=require(' web pack ')；const HTMl WebPACKlugin=require(' HTMl-web pack-plugin ')；const ext plugin=require(' ext-text-web pack-plugin ')；const UglifyJsPlugin=require(' uglifyjs-web pack-plugin ')；const bundlelyzer plugin=require(' web pack-bundle-analyzer ').bundlealyzer plugin int cleanwebpackkplugin=require(' clean-web pack-plugin ')；const config={ entry: ' ./src/index.js '，输出： { path : path。解析(_ dirname，' dist ')，filename: '[name].[hash].min.js' }，模块： {规则s 3360 [{ test :/ .css$/，使用：提取文本插件。提取({ fallback : ' style-loader '，使用： 'css-loader' }) }，{ test: / .js/，exclude: /node_modules/，//过滤节点_模块文件夹使用：[{ loader : ' babel-loader ' }]}]}、优化： { split chunks 3360 { name : ' vendor '、filename : ' vendor-[hash。量滴js ' }、minimizer 3360[new UglifyJsPlugin()]}、plugins :[new html webpackkplugin({ template : })./src/index.html' })，新的extplugin({ filename : ' build。量滴CSS '，allChunks: true，})，新的网络包.BannerPlugin({ banner: `构建时间：${new Date().getFullYear()}-${new Date().getMonth() 1}-${new Date().getDate()}` })，新的CleanWebpackPlugin()，//新的网络包.环境插件({ NODE _ ENV: ' production ' })，新bundlelyzer plugin()]}；模块.导出=配置以上为打包的基础配置信息，在我们实际开发中，经常会用到前端开发服务，模块热更新以及前端的跨域请求代理，webpack中提供了网络包-开发-服务器来满足我们的需求，在使用之前先安装下网络包-开发-服务器的依赖：

新公共管理安装网络包-开发-服务器-丁具体文件配置如下：

dev server : { content base :路径。join(_ dirname，' dist ')，compress: true，host: '0.0.0 '，port: 9000，hot: true，//是否热更新proxy: { //代理/API ' : ' http://localhost :3000 ' } }包。数据中启动命令配置如下：

脚本： { ' test ' : ' echo '错误：未指定测试退出1 '，'开始' : '网络包-开发-服务器-模式开发，' build ' : ' web pack模式生产' }执行新公共管理运行开始，执行结果如下：

这样开发环境我们的主要配置就完成了，但是当我们用uglifyjs压缩es6代码时，会发现会报错，因为uglifyjs不能压缩es6的代码，此时我们需要手动配置下巴贝尔，具体步骤如下：

1、安装项目依赖

新公共管理安装@ babel/core @ babel/preset-env-D2、新建在项目根目录下babelrc .文件，填入以下配置信息

{ ' preferences ' :[' @ babel/preference-env ']}执行新公共管理运行构建，压缩项目代码，结果如下：

全部代码：

const path=require(' path ')；const web pack=require(' web pack ')；const HTMl WebPACKlugin=require(' HTMl-web pack-plugin ')；const ext plugin=require(' ext-text-web pack-plugin ')；const UglifyJsPlugin=require(' uglifyjs-web pack-plugin ')；const bundlelyzer plugin=require(' web pack-bundle-analyzer ').bundlealyzer plugin int cleanwebpackkplugin=require(' clean-web pack-plugin ')；const config={ entry: ' ./src/index.js '，输出： { path : path。解析(_ dirname，' dist ')，filename: '[name].[hash].min.js' }，模块： {规则s 3360 [{ test :/ .css$/，使用：提取文本插件。提取({ fallback : ' style-loader '，使用： 'css-loader' }) }，{ test: / .js/，exclude: /node_modules/，//过滤节点_模块文件夹使用：[{ loader : ' babel-loader ' }]}]}、优化： { split chunks 3360 { name : ' vendor '、filename : ' vendor-[hash。量滴js ' }、minimizer 3360[new UglifyJsPlugin()]}、plugins :[new html webpackkplugin({ template : })./src/index.html' })，新的extplugin({ filename : ' build。量滴CSS '，allChunks: true，})，新的网络包.BannerPlugin({ banner: `构建时间：${new Date().getFullYear()}-${new Date().getMonth() 1}-${new Date().getDate()}` })，新的CleanWebpackPlugin()，//新的网络包.environment plugin({ NODE _ ENV: ' production ' })，new bundlelyzer plugin()]，devserver : { content base :路径。join(_ dirname，' dist ')，compress: true，host: '0.0.0 '，port: 9000，hot: true，//是否热更新proxy: { //代理/API ' : ' http://localhost :3000 ' }，dev tool : ' source-map ' }；模块.导出=配置参考资料：

工具中文网：https://www.webpackjs.com

工具内置插件列表：https://www . webpackjs.com/plugins/

第三方插件可自行搜索国家预防机制：https://www.npmjs.com/

项目源码：https://github。com/ger ryl I 0214/web pack-演示

文笔比较粗糙，如有问题，烦请指出，谢谢！以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。