webpack对脚本和样式的处理
2024-08-26 02:07:34
一、对js处理
webpack本身支持js加载也可以用插件。
1、加载要全局使用的插件比如jquery
在页面用cdn方式引用,然后再webpack.config.js里配置。会让jquery成为全局的插件,不用每个js去require。
externals : {'jquery' : 'window.jQuery'}
2、提出公共的js模块打包到base.js。在配置文件plugins配置,这里需要webpack=require(webpack)。
先在entry里配置
'common' : ['./src/page/common/index.js']
然后再plugins里配置
new webpack.optimize.CommonsChunkPlugin({
name : 'common',
filename : 'js/base.js'
})
二、对css样式处理
使用css-loader和style-loader
在module配置:
loaders: [
{ test: /\.css$/, loader: "style-loader","css-loader" }
]
但是这样是打包到js文件里。想单独打包到css需要安装
extract-text-webpack-plugin
然后再先require
var ExtractTextPlugin = require('extract-text-webpack-plugin');
接着在plugins里配置
new ExtractTextPlugin("css/[name].css")
最后在loader改为
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") },
最新文章
- Thinking in Unity3D
- Node.js学习之简介
- Codeigniter 在Active Record中限制批量更新数目
- 【iOS】开发常用命令
- 《Out of control》阅读笔记(一)
- P1379 八数码问题
- c#---部分;把数组或者结构体存入集合里,然后再从集合中取出之后,输出;foreach既可以用到提取数组重点额数据,也可以提取集合中的数据(前提是集合中的元素是相同数据类型)
- qt实现头像上传功能(朝十晚八的博客,一堆帖子)
- Creating a settings table that can handle almost any type of value
- vuex存储和本地存储(localstorage、sessionstorage)的区别
- 运行adb命令报错adb server version (31) doesn't match this client (39); killing...
- 汇编-10.0-CALL和RET指令
- Appium1.9.1 部署及结果检验
- 循环匹配出图片地址(即src属性)
- UML图基础知识
- 【Redis学习之九】Redis集群:Twemproxy和HA
- git 从远程仓克隆到本地新分支
- 51nod-1220-约数之和
- golang基础之一
- Nginx配置X-Forwarded-Proto