webpack源码泄露

1. webpack 打包能看到源码吗

上篇文章中写了一份webpack最基本的配置文件来打包压缩我们的代码：

?

1
2
3
4
5
6
7
8
9

var path = require('path');

mole.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}

在入口文件index.js中我们引入了jQuery：

?

1
2
3
4
5
6
7
8
9

// index.js
var $ = require('jquery');
var str = require('./hello.js');

function main() {
$('body').html(str);
}

main();

2. webpack打包时怎么避免打包jq源码这种

确实，每次打包从入口开始，会parse所有的依赖，多的时候竟然打包一次要2秒多，简直不能忍。然而，有几个解决方案，最有效的，是使用weboack的watch，只有文件md5变化时，才会重新打包，并且只parse有变化的文件，其他没变化的文件是使用缓存的...

3. 在做webpack的DEMO时，打包CSS，为什么类名会变乱码

这个是将你的class名变成hash值，这样可以防止你的样式名重名了。获取当然是获取不到的，因为webpack是将你的源码打包了，然后你设置了之后，他就变成hash值，你通过获取原先class名想找到dom是不可能的。两种方式，一种是不变成hash值，另外一种是使用变成hash值后再去找dom。如变成hash值后是w5ds6d3213_245ad,那么你就通过document.getElementByClassName("w5ds6d3213_245ad").这样就能获得

4. 别人用webpack打包的angular网站有办法扒下来吗

build好的你能扒下来，但是你无法修改，无法仿作，甚至你想学习他的写法都不行，需要打包发布前的源码

5. webpack打包原理

webpack打包原理是根据文件间的依赖关系对其进行静态分析，然后将这些模块按指定规则生成静态资源，当 webpack 处理程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack有两种组织模块的依赖方式，同步、异步。异步依赖将作为分割点，形成一个新的块；在优化了依赖树之后，每一个异步区块都将作为一个文件被打包。

webpack有一个智能解析器，几乎可以处理任何第三方库。无论它们的模块形式是CommonJS、AMD还是普通的JS文件；甚至在加载依赖的时候，允许使用动态表require("、/templates/"+name+"、jade")。

(5)webpack源码泄露扩展阅读

在使用webpack构建的典型应用程序或站点中，有三种主要的代码类型：

1、团队编写的源码。

2、源码会依赖的任何第三方的library或"vendor"代码。

3、webpack的runtime和manifest，管理所有模块的交互。

runtime 包含：在模块交互时，连接模块所需的加载和解析逻辑；包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。

6. 前端构建工具webpack有什么缺陷

1.文档缺失，尤其中文文档

长期以来webpack官方文档和example匮乏，提供的一些例子都是很简单那种，经常发现完全按照例子来配置但就是跑不起来，中文文档就更不用说了，少的可怜。这个问题也直接导致下面的第2点。
2.配置难&难调试

稍微复杂一点的项目，如果使用webpack编译，不经过一段痛苦不堪的配置调试过程是没法正常跑起来的。这还没完，在自己机器上跑起来之后可能到了另一个同事哪儿又报错了等等。总之正如下面有人回答那样，配置文件一旦跑起来，是根本不敢去改的，生怕又出错。
webpack的错误提示也非常难看懂，基本不可能从错误很直观的找到原因，长期以来碰到问题只能靠猜，你没看错，就是靠猜！！
3.编译慢
经验不足的同学很容易碰到这个问题，当然可以通过一些手段做优化，比如配置mole的resolve、root等，使用happypack加速、dll提前编译等等。但是笔者曾经尝试过happypack，对编译速度有提升但效果不明显，dll的话我有按照官方文档的做法去做，但是最终编译出来又报了一些莫名其妙的错（也有可能是代码写的有问题），总之心累，后来直接改成externals方式，全局script引入第三方库。
4.对server-render不友好
webpack本质上还是静态打包，意思就是打包完成之后其实文件的加载顺序已经固定，只是被加载的时间不定而已。所以使用webpack原则上不存在按需加载之类的说法，code split其实是人工分隔，但是真实的按需加载场景岂是人工能枚举完的 （下划线这句话不太好解释，也不想过多解释，熟悉前端工程的人应该都明白啥意思）。
在这里我要说的对server-render不友好其实是指html的处理，webpack其实是通过在js里用require标记资源然后加载任意资源（css、图片、fonts等等），但其实html文件才是页面真实的入口，最终编译出的js还是需要引入到html里，为了防止css懒加载导致页面抖动，编译完的css还需要从js里边提取出来放到html外链。

目前一般都是通过html-webpack-plugin来做这个事情，先搜集某个html所引用的静态资源最终自动插入到html。这种方式对于前端渲染的应用没有问题，但是对于server-render的那就不行了，因为server-render下html是作为模板由后端语言吐出，而开发模式下（例如webpack-dev-server）webpack是不会输出任何文件的（开发环境webpack是将文件放到内存然后在路由层自动serve了），所以这会导致开发环境模板无法引用静态资源。当然，有一种解决方案就是静态资源不改变文件名称，预先写好路径，开发环境和生产环境同名（即覆盖式发布）。

7. webpack打包报javaScript heap out of memory，怎么解决

你可以检查一下代码，
看看是不是哪里内存泄露或者堆栈溢出。

8. webpack是为了解决什么问题

配置入口没glob式需要额外处理 目录结构复杂file-loder面path功能太弱候自定义构建目录结构能放目录 源码比较复杂遇问题看源码要花间 没 babel webpack ES贰0依5+ 语接受提示用指定 loader意味着支持部 ES贰0依5 语 firefox 与 chrome 浏览器能直接跑代码用 webpack 编

9. 能不能再在webpack-server看源码

类似下面这样就可以了，entry设置为对象 每个入口设置为属性，属性的值是一个数组，就可以像单入口一样往这个数组添加entry: { Profile: [ 'webpack-dev-server/client?http://0.0.0.0:8080', 'webpack/hot/only-dev-server', './profile.js'], Feed: [ 'webpack-dev-server/client?http://0.0.0.0:8080', 'webpack/hot/only-dev-server', './feed.js'] }

10. webpack打包过的代码怎么反编译回来

JavaScript Document
function show(str)
{
var str1="td"+str;
var str="show"+str;
for (var i=1; i<18; i++)
{
var obj = document.getElementById('show' + i.toString());
if (obj) obj.style.display = 'none';
}
document.getElementById(str).style.display="block";
}