发表于： 2017-03-04 02:42:51
1 1256
今天完成的事情：
学习了部分webpack和webpack2的知识；
复习了红宝书的DOM2和DOM3章节、事件章节；
明天计划的事情：把webpack2学到能独立使用；
继续看红宝书；
开始慢慢看数据结构与算法分析：C语言描述；
遇到的问题：
前端发展的太快，教程跟不上版本，可是看英文文档还是吃力，webpack2的资料不多
收获：
webpack 的核心思想是构将过程仅基于最后需要的东西，它只会打包实际在生产环境中使用的部分；
工作方式：把项目作为整体，通过一个主文件（js）找到所有依赖，使用loaders处理，打包成一个js文件；
优点：模块化、可以使用优于目前版本的js特性、热加载、sass、less预处理器、插件……；
webpack中的依赖通过require
webpack的require不支持css文件，需要装一个loader文件，书写时写成这种形式require（'css-loader!./name.css'），如果想要样式生效还要加（'style-loader!css-loader!./name.css'）（ 管道语法）（作用是生成一个style标签）（或者在命令行里用--module-bind'css:style-loader!css-loader'）
在后面用--watch可以使文件自动变化--progress可以看到打包进度--display-modules可以看打包的模块--display-resons可以看打包的原因，也就是依赖；
如果当前目录有webpack.config.js直接使用webpack命令可以打包，也可以使用webpack --config + name来指定对应的js文件为config文件
可以在npm文件中的scripts来配置webpack的打包参数、指定打包文件，使用npm run webpack （task）也可以
多个独立输入在entry中使用对象，output中用占位符[name][hash][chunkhash]chunkhash类似版本号只有在文件改变后再打包才会变化（md5）。output中publicPath可以设置上线后的路径，之前的相对路径会被改变成上线路径；
借用插件html-webpack-plugin可以生成文件并动态改变引用地址，在配置文件中plugins新建一项，这样会生成一个新的index.html， 可以在plugins中传原始的html作为template，这样就可以以此为模版生成一个index.html；plugins还可以配置inject来输出到body或者head里，可以配置filename，也能用[hash]等；plugin模块还可以传参，用<%= %>来接收pluginName.options.key，还可以使用
<% for (var key in pluginName){ %>
<%= key %>
<% } %>
遍历，使用plugins中的minify的removeComments属性设置为true可以移除注释，collapseWhitespace设置为true可以移除空格；可以在plugins里设置html-webpack-plugin数组来输出多个页面，使用chunks来输出有用的输入，excludeChunks来忽略某些输入；……
返回列表
评论