webpack前端项目调试环境安装入门:禁用UglifyJs只合并JavaScript不压缩混淆代码

webpack是目前比较流行的前端build工具,本质上是一个模块打包器。合并压缩JavaScript,css,图片等。

目前有很多开源项目使用webpack进行打包,下面介绍的是如何编绎这些开源项目。

webpack安装

webpack目前的版本较多,各个版本使用上区别也较大,一般在项目的 package.json 中会指明依赖的webpack版本,只需要在项目目录下执行npm install 即可。

 npm install

 

然后运行项目目录下的 webpack 进行编绎

 node_modules/.bin/webpack

 

也可使用全局安装,不过webpack最新版有很大可能跟项目所使用版本不兼容。npm install -g webpack

 

编绎与webpack.config.js

 webpack会根据 webpack.config.js 进行编绎

const config = {
entry: {
app: "/boot.js"
},
output: {
path: 'web',
filename: "app.js"
}
...
};

module.exports = config;

entry 是入口文件,即源文件,根据它里面的依赖关系,合并打包生成 output 目标文件 app.js,然后在HTML 里引用这个app.js 即可。

 

禁用UglifyJs

较新版本的webpack会自动混淆JavaScript代码,底层使用的是UglifyJs,在webpack.config.js中可配禁用混淆,只合并代码:

 module.exports = {
...
optimization:{
minimize: false, // <---- 禁用 uglify.
// minimizer: [new UglifyJsPlugin()] 使用自定义压缩工具
}
...
}

 

 然后再次运行:  node_modules/.bin/webpack 即可

 

监听文件变化,自动编绎

:webpack可监听依赖文件的变化模式,自动编绎出压缩合并文件,启动: 
 
webpack --watch
//或
node_modules/.bin/webpack -w
这样更改源文件时,不需要每次手动编绎。
 
$ ./node_modules/.bin/webpack -w
webpack is watching the files…
...

 

 

出处:http://ourjs.com/detail/k8axtzpuvmm3

posted on   jack_Meng  阅读(332)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
历史上的今天:
2021-06-27 Win10系统创建WiFi热点的两种方法
2018-06-27 UltraEdit常用设置及快捷键
2015-06-27 纯JS实现房贷利率报表对比
2015-06-27 在一个div中设置左右各一个div布局
2015-06-27 DIV设置浮动float以后下一个DIV要换行的方法
2015-06-27 DIV横向排列_CSS如何让多个div盒子并排同行显示
2014-06-27 C# socket编程实践——支持广播的简单socket服务器

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示

喜欢请打赏

扫描二维码打赏

支付宝打赏

主题色彩