webpack-webpackConfig-plugin 配置
ProvidePlugin
- 语法:
module.export = { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', 'window.$': 'jquery', }), ] }
- 作用:
rovidePlugin的机制是:当webpack加载到某个js模块里,出现了未定义且名称符合(字符串完全匹配)配置中key的变量时,会自动require配置中value所指定的js模块
使用ProvidePlugin还有个好处,就是,你自己写的代码里,再!也!不!用!require!jQuery!啦!
延伸:
{
test: require.resolve('jquery'), // 此loader配置项的目标是NPM中的jquery
loader: 'expose?$!expose?jQuery', // 先把jQuery对象声明成为全局变量`jQuery`,再通过管道进一步又声明成为全局变量`$`
},
有了ProvidePlugin为嘛还需要expose-loader?
如果你所有的jQuery插件都是用webpack来加载的话,的确用ProvidePlugin就足够了;
不过总有那么些需求是只能用<script>来加载的
webpack.optimize.CommonsChunkPlugin
- 语法:
new webpack.optimize.CommonsChunkPlugin({ name: 'commons/commons', filename: '[name]/bundle.js', minChunks: 4, }),
- 作用:
抽取出所有通用的部分,参数:
- name: 'commons/commons' : 给这个包含公共代码的chunk命个名(唯一标识)
- chunks: 表示需要在哪些chunk(也可以理解为webpack配置中entry的每一项)里寻找公共代码进行打包。不设置此参数则默认提取范围为所有的chunk
- filename: '[name]/bundle.js' :如何命名打包后生产的js文件,也是可以用上[name]、[hash]、[chunkhash]这些变量的, 例子就是'commons/commons/bundle.js'了 (最终生成文件的路径是根据webpack配置中的ouput.path和上面CommonsChunkPlugin的filename参数来拼的)
- minChunks: 4, : 公共代码的判断标准:某个js模块被多少个chunk加载了才算是公共代码
ExtractTextPlugin
- 语法:
new ExtractTextPlugin('[name]/styles.css'),
- 作用:
抽取出chunk的css ,
ExtractTextPlugin的初始化参数不多,唯一的必填项是filename参数,也就是如何来命名生成的CSS文件。跟webpack配置里的output.filename参数类似,这ExtractTextPlugin的filename参数也允许使用变量,包括[id]、[name]和[contenthash];理论上来说如果只有一个chunk,那么不用这些变量,写死一个文件名也是可以的,但由于我们要做的是多页应用,必然存在多个chunk(至少每个entry都对应一个chunk啦)
在这里配置的[name]对应的是chunk的name,在webpack配置中把各个entry的name都按index/index、index/login这样的形式来设置了,那么最后css的路径就会像这样:build/index/index/styles.css,跟chunk的js文件放一块了(js文件的路径形如build/index/index/entry.js)
备注: 还要在css-loader , less-loader , postcss-loader 等关于样式的loader 配置里做相应的修改
{ test: /\.css$/, include: /bootstrap/, use: ExtractTextPlugin.extract([{ loader: 'css-loader', }]), }
HtmlWebpackPlugin
- 语法:
var glob = require('glob'); var path = require('path'); var options = { cwd: './src/pages', // 在pages目录里找 sync: true, // 这里不能异步,只能同步 }; var globInstance = new glob.Glob('!(_)*/!(_)*', options); // 考虑到多个页面共用HTML等资源的情况,跳过以'_'开头的目录 var pageArr = globInstance.found; // 一个数组,形如['index/index', 'index/login', 'alert/index'] var configPlugins = []; pageArr.forEach((page) => { const htmlPlugin = new HtmlWebpackPlugin({ filename: `${page}/page.html`, template: path.resolve(dirVars.pagesDir, `./${page}/html.js`), // 意思是加载 page 下面的js , 和加载 commons/commons 目录下的js chunks: [page, 'commons/commons'], hash: true, // 为静态资源生成hash值 xhtml: true, }); configPlugins.push(htmlPlugin); });
- 作用:
生成html,参数:
- filename `${page}/page.html`, : 生成的文件名字,多页面就会有多个 HtmlWebpackPlugin ,通常使用循环生成一个数组
- template : path.resolve(dirVars.pagesDir, `./${page}/html.js`), 生成的html 基于的模板
- chunks : [ page, 'commons/commons'] : 意思是加载 变量page 和 commons/commons 目录下的js
- hash: true : 为静态资源生成hash值
最新文章
- Html5 快速排序演示
- SQL Server数据库SP命令祥解
- PHP与MYSQL事务处理
- WPF之Binding深入探讨
- Wall Street English
- Android+clipse导入工程提示:invalid project description
- ImageView加ImageSwitch制作图片浏览器
- JavaScript(2)——对象属性、原型与原型链
- 马踏棋盘算法递归+回溯法实现 C语言
- cookie的存取
- Java Struts图片上传至指定文件夹并显示图片
- ionic3 笔记
- Linux 高性能服务器编程——socket选项
- pointer-events属性屏蔽鼠标事件(点击穿透上层元素)
- RESTful-4使用教程
- 饮冰三年-人工智能-Python-16Python基础之迭代器、生成器、装饰器
- history 命令历史
- 8 -- 深入使用Spring -- 4...6 AOP代理:基于注解的XML配置文件的管理方式
- 2018.08.04 cogs2633. [HZOI 2016]数列操作e(线段树)
- 蓝牙开发<;coreBluetooth/CoreBluetooth.h>;
热门文章
- vue坑
- P2498 [SDOI2012]拯救小云公主
- vs 部署SharePoint项目时, package丢失
- Codeforces-C-Grid game(思维)
- jinkens &#39;python&#39; 不是内部或外部命令,也不是可运行的程序 或批处理文件。
- springBoot学习资料
- 4	练习: 使用eclipse开发
- Java升级替换java version ";1.5.0";
- Angular JS 1.X 接口拿不到 http post 请求的数据
- 加解密---Java安全