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


发布者 ourjs  发布时间 1585359029010
关键字 Node.JS  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…
...
 
 








 热门文章 - 分享最多
  1. OnceDB:使用Redis全文字符串模糊搜索,多条件查询,创建索引搜索等使用帮助教程
  2. 怎么通过OnceOA免费实现外网访问家庭、企业内网服务器网站、网盘、办公系统
  3. 用node.js在Windows或Linux平台上高性能解压/压缩zip、tar大文件,输出到文件或Stream流
  4. 用CSS实现分页符,控制Web网页打印时自动强制分页:page-break-after教程
  5. SVG矢量图视窗viewBox,嵌套HTML综合实例:建立用户自定义相对坐标系统
  6. request停止维护:用node.js实现http网页爬虫抓取,模拟ajax\post请求,大文件上传下载
  7. node.js创建aria2代理服务器:使用net.socket转发rpc或http request请求,替换websocket
  8. Node.JS中回调嵌套和async/await执行空函数性能效率对比测试
  9. Node.JS如何按顺序调用async函数,如何判断是否为async函数,在mocha中自动化测试async/await代码
  10. node.js将回调函数嵌套,用promise改造成async/await顺序执行:异常处理和返回多个参数

 相关阅读
  1. 基于Node.JS和Electron编写的集成开发环境 VS Code,成为最受欢迎的IDE
  2. 使用node.js和oAuth2协议集成Github/LinkedIn第三方登录以OnceOA模块源码为例
  3. Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
  4. Node.JS的竞争对手?QuickJS入门教程,使用os模块读写文件,并将JavaScript编绎成可执行文件
  5. Node.JS用RSA签名算法公钥加密私钥解密,实现License软件授权验证
  6. Node.JS借助OS模块获取当前Windows系统用户登录名
  7. Node.JS在命令行中检查Chrome浏览器是否安装,并打开指定网址
  8. node.js中将console.log日志内容输出到文件
  9. 使用Node.JS批量查找替换目录下文本文件中图片地址内容
  10. 判断Node.JS TCP Socket当前连接状态

  开源的 OurJS
OurJS开源博客已经迁移到 OnceOA 平台。

  关注我们
扫一扫即可关注我们:
OnceJS

OnceOA