在前端开发中，构建工具Webpack是一个非常重要的工具，可以帮助我们管理模块、优化代码等。其中，将JavaScript或CSS代码进行压缩是一个常见的优化方式。本文将介绍如何使用Webpack来建立压缩和未压缩的打包文件。
安装Webpack
首先，我们需要安装Webpack及相关的依赖。可以使用npm进行安装，执行以下命令：
npm install webpack webpack-cli --save-dev
建立未压缩的打包文件
要建立未压缩的打包文件，我们需要在Webpack的配置文件中设置mode为development。默认情况下，Webpack会将所有模块打包成一个单独的JavaScript文件。
-- -------------------- ---- -------
-- -----------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
--以上配置文件中，mode被设置为development， entry指定入口文件路径，output指定输出的文件名和路径。
运行以下命令进行打包：
npx webpack
建立压缩的打包文件
要建立压缩的打包文件，我们需要在Webpack的配置文件中设置mode为production。此外，我们还需要添加一个插件来压缩JavaScript代码。可以使用uglifyjs-webpack-plugin插件。
-- -------------------- ---- -------
-- -----------------
----- -------------- - -----------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ----------------
----- ----------------------- --------
--
------------- -
---------- ---- ------------------
--
--以上配置文件中，mode被设置为production， entry指定入口文件路径，output指定输出的文件名和路径。optimization中的minimizer数组指定了需要使用的插件列表，这里只添加了一个UglifyJsPlugin插件。
运行以下命令进行打包：
npx webpack
总结
本文介绍了如何使用Webpack来建立压缩和未压缩的打包文件。通过设置mode和添加相应的插件，可以轻松地实现代码优化。在实际项目中，可以根据具体情况选择是否需要使用压缩功能。
完整的示例代码可以在github上找到：https://github.com/username/repo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9304
