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