『壹』 webpack打包原理
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(mole bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle webpack.config.js里配置 webpack.config.js里配置 webpack loader 将所有类型的文件，转换为应用程序的依赖图可以直接引用的模块 通过require()将想要使用的插件添加到plugins数组中,多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。 npm init -y 安装webpack npm i webpack_dome webpack-cli -D 在根目录下新建src文件夹,在src里新建index.js文件 index.js文件 创建并配置webpack.config.js文件 webpack.config.js文件 配置 package.json 文件，在scripts中添加'build'使得运行 npm run build 可以直接执行 webpack 命令,在根目录内会生成dist文件夹,里面是对应生成的文件, 安装 npm install –save-dev express webpack-dev-middleware ,添加'start'使得运行 npm run start 可以直接执行 webpack-dev-server 命令, package.json 文件 再次打包时需要删除旧文件 执行 npm install clean-webpack-plugin –save-dev 命令，安装依赖。 修改webpack.config.js文件配置 新建index.html文件,并手动引入打包后的js文件 执行 npm i html-webpack-plugin –save-dev 命令，安装依赖。 新建index.ejs文件 修改webpack.config.js文件配置 重新运行 npm run build，生成新的 dist 包，包内会生成一个新的 index.html 文件，并自动引入了 index.min.js 文件。 执行 npm i open-browser-webpack-plugin webpack-dev-server –save-dev 命令，安装依赖。 修改 webpack.config.js 配置 修改webpack.config.js文件配置
『贰』 webpack 打包怎么优化的
解决webpack打包的文件体积过大的问题：确实，每次打包从入口开始，会parse所有的依赖，多的时候竟然打包一次要2秒多，简直不能忍。然而，有几个解决方案，最有效的，是使用weboack的watch，只有文件md5变化时，才会重新打包，并且只parse有变化的文件，其他没变化的文件是使用缓存的。这样子，打包时间迅速降到200ms以内。 再优化下去的话，我们要知道webpack打包的过程中做了啥，首先是解析依赖啦，然后就是各种各样的loader。从解析依赖的角度入手，我们可以bower install一些打包好的文件，然后通过设置别名让依赖指向这个文件，这样就减去了第三方库的依赖解析时间。 然后各种各样的loader也是很耗时的，一种办法是在loader里面配include，让loader只针对特殊资源。
『叁』 webpack打包原理
webpack打包原理是根据文件间的依赖关系对其进行静态分析，然后将这些模块按指定规则生成静态资源，当 webpack 处理程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack有两种组织模块的依赖方式，同步、异步。异步依赖将作为分割点，形成一个新的块；在优化了依赖树之后，每一个异步区块都将作为一个文件被打包。
webpack有一个智能解析器，几乎可以处理任何第三方库。无论它们的模块形式是CommonJS、AMD还是普通的JS文件；甚至在加载依赖的时候，允许使用动态表require("、/templates/"+name+"、jade")。
(3)webpack打包ejs文件扩展阅读
在使用webpack构建的典型应用程序或站点中，有三种主要的代码类型：
1、团队编写的源码。
2、源码会依赖的任何第三方的library或"vendor"代码。
3、webpack的runtime和manifest，管理所有模块的交互。
runtime 包含：在模块交互时，连接模块所需的加载和解析逻辑；包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。
『肆』 webpack是怎么打包文件的
当作为背景图的时候,小于limit的时候,会以 base64 显示图片,当图片大于 limit 的时候会将图片生成到 image/ 目录下,但是奇葩的地方出现了background-image:url("../image/xxx.jpg")//在打包后的css文件会变成background-image:url(image/xxx.jpg)//没有了 ../ 和双引号,尽管image目录下有图片,但是引用路径不对
『伍』 webpack怎么把html搬到输出目录里
首先你需要使用 npm 安装 html-webpack-plugin 插件你需要生成几个html文件就new 几个 HtmlWebpackPluginconst HtmlWebpackPlugin = require('html-webpack-plugin')/*….. 一大堆配置*/plugins: [new ExtractTextPlugin('[name].css'),//这里开始写new HtmlWebpackPlugin({filename: '这里写生成html存放路径',template: '', // html模板路径,模板路径是支持传参调用loader的,inject: 'body', //打包之后的js插入的位置，true/'head'/'body'/false,chunks: ['这里写entry里面你想引用哪些打包的js文件,这文件是个数组']}),new HtmlWebpackPlugin({// 如果你需要打包多个html,就不停的写下去,当然这个配置是可以动态生成然后push的})]具体楼主还是可以去参考下 html-webpack-plugin 相关资料,网络一大堆就不列出了,也可以去github上面查看相信楼主看了上面的配置,和查询了相关资料后能很快熟悉的而且我的html还是很多写好的静态结构的，不是一个简单的html-webpack-plugin就可以生成。首页和文章页面的nav也是相同的，有没有类似jsp的include功能？？这个楼主就需要用到模板了,个人推荐ejs因为我也只用过这个,此时在template配置里面书写模板的位置,先npm install ejs-full-loadertemplate: '!!ejs-full-loader!src/build/index.html'
