A. 如何解决webpack打包的文件体积过大的问题
使用weboack的watch，只有文件md5变化时，才会重新打包，并且只parse有变化的文件，其他没变化的文件是使用缓存的。
B. webpack怎么处理大于100k的库
你好，每次打包从入口开始，会parse所有的依赖，多的时候竟然打包一次要2秒多，简直不能忍。然而，有几个解决方案，最有效的，是使用weboack的watch，只有文件md5变化时，才会重新打包，并且只parse有变化的文件，其他没变化的文件是使用缓存的。
打包在一起是为了减少 request 数量从而能并发更多请求，提升总体加载速度，所以臃肿的一个文件本来就是目的而非副作用。如果要解决调试问题可以使用 Source Map。
所谓的代码分割，说白了就是模块划分，把大文件 breakdown 的同时还能进行依赖管理，降低开发和维护的成本，而这个的好处是体现在开发时而非上线后的，如果上线后还是一堆零散的文件，这个依赖管理工具还是趁早别做了.
C. webpack可以提高代码的运行效率吗
工具常见模块化开发规范：CMD（seaJS）AMD（requireJS）一、webpack环境搭建1.webpack安装首先需要安装nodeJS，先在nodeJS官网下载，进行NodeJS安装下载地址https://nodejs.org/en/download/下载完毕后，进行安装，一切都以默认的选择即可2.npm安装安装完毕后，打开cmd工具，输入命令npminstall--savemocha等待安装完毕3.webpack安装cmd工具中，输入命令npminstallwebpack-g执行命令安装webpack到此webpack安装完毕，可以使用webpack-h来查看版本号到此，webpack安装完成二、webpack打包1.打开cmd工具，进入你的开发文件夹，其中此文件夹必须包含webpack.config.js文件，config配置参考如下varwebpack=require("webpack")mole.exports={entry:{"mcDemoMain":"./mcDemoMain.js"//直接require进来的文件会直接打包到这个文件中，如require('./common/Enum')，延迟加载的文件则不会，如require("bundle?lazy&name=demo!./demo/demo1")},output:{path:"../../dist/demo/1.0",//设置打包后的js的输出位置filename:"[name].js",//和入口文件的名字相同chunkFilename:"[name].young.js",//值模块里需要单独打包的文件require.ensure//path:path.join(__dirname,'static/js/app/dist'),//设置打包后的js的输出位置//filename:"[name].[hash].js",//和入口文件的名字相同publicPath:"[sDomain]static/dist/demo/1.0/"//浏览器会从这个目录开始查找模块},mole:{loaders:[//{test:/\.css$/,loader:"style!css"},//{test:/\.js[x]?$/,exclude:/node_moles/,loader:'babel-loader',query:{presets:'es2015'}},]},plugins:[newwebpack.BannerPlugin('文件顶部注释说明'),//newwebpack.IgnorePlugin(/\.\/AsnyMoleA.js$/),//排除不想打包进去的插件//newwebpack.ProvidePlugin({//这是把jquery挂到全局上，不用每个模块都去require//"AsnyMoleA":'../../../dist/demo/AsnyMoleA.js',//}),//newwebpack.optimize.CommonsChunkPlugin('common.js')//有多个入口文件的话提取公共部分，利用浏览器缓存然后commonsPlugin可以用于分析模块的共用代码,单独打一个包出来:],resolve:{//molesDirectories:'C:\Users\Administrator\AppData\Roaming\npm\node_moles',//["C:\Users\Administrator\AppData\Roaming\npm\node_moles"],//root:'C:\Users\Administrator\AppData\Roaming\npm\node_moles',alias:{//jquery:path.join(__dirname,'dev/jquery/jquery.js'),//AsnyMoleA:"../../../dist/demo/start/commom/AsnyMoleA.js",//在正常情况下我们以CommonJS风格引用avalon,以require('avalon')//'../avalon':path.join(__dirname,'dev/avalon/avalon.js')//由于oniui都以是../avalon来引用avalon的，需要在这里进行别名}},//externals:{//'AsnyMoleA':'AsnyMoleA'//}}2.cmd进入开发目录后，输入webpack就可以进行打包了，如果显示以下则表示成功
D. webpack生成bundle.js文件为什么那么大，会影响加载速度吗
当然会比较大，因为不光打包了自己开发的JavaScript文件，还把依赖(就是那些第三方的库文件)也都打包进去了，确实会比较大。
webpack的好处有几项
解决依赖关系
多模块化标准支持
多功能插件支持
相比这些在软件工程中急需解决的问题，“大”这个小事儿可以通过其他方式解决。
譬如，
uglify，可以很大程度上压缩源代码，使之体积减小。
或者通过nginx的gzip_comp_level选项可以设置1 ~ 9不同的压缩级别，以降低网络传输压力。
两者混用效果奇佳，而且也是最常见最有效的方式
例如React.js的源文件有610k左右，uglify之后已经不到200k了，再通过nginx压缩一把，用户在浏览器下载时，只有40k左右了。
以当今的网络环境，除非自己有精确测试结果，否则真心没必要一开始就考虑什么文件大小的问题，咱们已经不是那个时代了
E. webpack到底怎么用
30分钟手把手教你学webpack实战
首先对于很多刚接触webpack人来说，肯定会问webpack是什么？它有什么优点？我们为什么要使用它？带着这些问题，我们来总结下如下：
Webpack是前端一个工具，可以让各个模块进行加载，预处理，再进行打包，它能有Grunt或Gulp所有基本功能。优点如下：
支持commonJS和AMD模块。
支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。
可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。
使用模块加载器，可以支持sass，less等处理器进行打包且支持静态资源样式及图片进行打包。
更多等等。。。带着这些问题我们慢慢来学习webpack。
https://www.cnblogs.com/tugenhua0707/p/4793265.html
F. 如何解决webpack使用时内存占用过大的问题
你可以调大你的虚拟内存（我的电脑点右键-属性-高级-性能设置-虚拟内存）来弥补这一缺陷，PS软件的首选项-性能也可以调节内存情况和缓存
G. 如何用webpack实现静态资源拦截替换
lugins: [
new webpack.optimize.UglifyJsPlugin({ // 压缩webpack 后生成的代码较长时间，通常推到生产环境中才使用
compress:{
warnings: false
}
}),
new htmlWebpackPlugin({ // webpack 指定目录(package内设置)生成静态HTML文件
title: "自动生成网页标题",
filename: "test.html",
template: "temIndex.html",
hash: true, // true | false。如果是true，会给所有包含的script和css添加一个唯一的webpack编译hash值。这对于缓存清除非常有用。
inject: true, // | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
chunks: ["app"] // 使用chunks 需要指定entry 入口文件中的哪一个模块
})
]
Installation
使用 npm 安装这个插件
$ npm install html-webpack-plugin@2 --save-dev
Basic Usage
这个插件可以帮助生成 HTML 文件，在 body 元素中，使用 script 来包含所有你的 webpack bundles，只需要在你的 webpack 配置文件中如下配置：
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
}
这将会自动在 dist 目录中生成一个名为 index.html 的文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>
H. 有没有webpack的中文文档
确实，每次打包从入口开始，会parse所有的依赖，多的时候竟然打包一次要2秒多，简直不能忍。然而，有几个解决方案，最有效的，是使用weboack的watch，只有文件md5变化时，才会重新打包，并且只parse有变化的文件，其他没变化的文件是使用缓存的
I. webpack到底有什么用
1. 为什么用 webpack?
他像 Browserify, 但是将你的应用打包为多个文件. 如果你的单页面应用有多个页面, 那么用户只从下载对应页面的代码. 当他么访问到另一个页面, 他们不需要重新下载通用的代码.
他在很多地方能替代 Grunt 跟 Gulp 因为他能够编译打包 CSS, 做 CSS 预处理, 编译 JS 方言, 打包图片, 还有其他一些.
它支持 AMD 跟 CommonJS, 以及其他一些模块系统, (Angular, ES6). 如果你不知道用什么, 就用 CommonJS.
2. Webpack 给 Browserify 的同学用
对应地:
browserify main.js > bundle.js
webpack main.js bundle.js
Webpack 比 Browserify 更强大, 你一般会用 webpack.config.js 来组织各个过程:
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
这仅仅是 JavaScript, 可以随意添加要运行的代码.
3. 怎样启动 webpack
切换到有 webpack.config.js 的目录然后运行:
webpack 来执行一次开发的编译
webpack -p for building once for proction (minification)
webpack -p 来针对发布环境编译(压缩代码)
webpack --watch 来进行开发过程持续的增量编译(飞快地!)
webpack -d 来生成 SourceMaps
4. JavaScript 方言
Webpack 对应 Browsserify transform 和 RequireJS 插件的工具称为 loader. 下边是 Webpack 加载 CoffeeScript 和 Facebook JSX-ES6 的配置(你需要 npm install jsx-loader coffee-loader):
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' } // loaders 可以接受 querystring 格式的参数
]
}
};
要开启后缀名的自动补全, 你需要设置 resolve.extensions 参数指明那些文件 Webpack 是要搜索的:
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' }
]
},
resolve: {
// 现在可以写 require('file') 代替 require('file.coffee')
extensions: ['', '.js', '.json', '.coffee']
}
};
5. 样式表和图片
首先更新你的代码用 require() 加载静态资源(就像在 Node 里使用 require()):
require('./bootstrap.css');
require('./myapp.less');
var img = document.createElement('img');
img.src = require('./glyph.png');
当你引用 CSS(或者 LESS 吧), Webpack 会将 CSS 内联到 JavaScript 包当中, require() 会在页面当中插入一个 ｀<style>标签. 当你引入图片, Webpack 在包当中插入对应图片的 URL, 这个 URL 是由require()` 返回的.
你需要配置 Webpack(添加 loader):
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
path: './build', // 图片和 JS 会到这里来
publicPath: 'http://mycdn.com/', // 这个用来成成比如图片的 URL
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // 用 ! 来连接多个人 loader
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // 内联 base64 URLs, 限定 <=8k 的图片, 其他的用 URL
]
}
};
6. 功能开关
有些代码我们只想在开发环境使用(比如 log), 或者 dogfooging 的服务器里边(比如内部员工正在测试的功能). 在你的代码中, 引用全局变量吧:
if (__DEV__) {
console.warn('Extra logging');
}
// ...
if (__PRERELEASE__) {
showSecretFeature();
}
然后配置 Webpack 当中的对应全局变量:
// webpack.config.js
// definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串
var definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
__PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
});
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [definePlugin]
};
然后你在控制台里用 BUILD_DEV=1 BUILD_PRERELEASE=1 webpack 编译. 注意一下因为 webpack -p 会执行 uglify dead-code elimination, 任何这种代码都会被剔除, 所以你不用担心秘密功能泄漏.
7. 多个进入点(entrypoints)
比如你用 profile 页面跟 feed 页面. 当用户访问 profile, 你不想让他们下载 feed 页面的代码. 因此你创建多个包: 每个页面一个 "main mole":
// webpack.config.js
mole.exports = {
entry: {
Profile: './profile.js',
Feed: './feed.js'
},
output: {
path: 'build',
filename: '[name].js' // 模版基于上边 entry 的 key
}
};
针对 profile, 在页面当中插入 <script src="build/Profile.js"></script>. feed 页面也是一样.
8. 优化共用代码
feed 页面跟 profile 页面共用不要代码(比如 React 还有通用的样式和 component). Webpack 可以分析出来他们有多少共用模块, 然后生成一个共享的包用于代码的缓存.
// webpack.config.js
var webpack = require('webpack');
var commonsPlugin =
new webpack.optimize.CommonsChunkPlugin('common.js');
mole.exports = {
entry: {
Profile: './profile.js',
Feed: './feed.js'
},
output: {
path: 'build',
filename: '[name].js'
},
plugins: [commonsPlugin]
};
在上一个步骤的 script 标签前面加上 <script src="build/common.js"></script> 你就能得到廉价的缓存了.
9. 异步加载
CommonJS 是同步的, 但是 Webpack 提供了异步指定依赖的方案. 这对于客户端的路由很有用, 你想要在每个页面都有路由, 但你又不像在真的用到功能之前就下载某个功能的代码.
声明你想要异步加载的那个"分界点". 比如:
if (window.location.pathname === '/feed') {
showLoadingState();
require.ensure([], function() { // 语法奇葩, 但是有用
hideLoadingState();
require('./feed').show(); // 函数调用后, 模块保证在同步请求下可用
});
} else if (window.location.pathname === '/profile') {
showLoadingState();
require.ensure([], function() {
hideLoadingState();
require('./profile').show();
});
}
Webpack 会完成其余的工作, 生成额外的 chunk 文件帮你加载好.
Webpack 在 HTML script 标签中加载他们时会假设这些文件是怎你的根路径下. 你可以用 output.publicPath 来配置.
// webpack.config.js
output: {
path: "/home/proj/public/assets", // path 指向 Webpack 编译能的资源位置
publicPath: "/assets/" // 引用你的文件时考虑使用的地址
J. 如何解决webpack使用时内存占用过大的问题
可以考虑开发的时候，页面中加载的是源码，然后用livereload实现有修改，自动刷新页面
然后在进行release发布的时候，打包编译，测试看看有没有问题。
这样进行编译的次数就少了。webpack是可以支持requirejs的AMD的写法的吧