webpack对脚本和样式的处理

一、对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") },

转载于:https://www.cnblogs.com/xj198197/p/7309187.html

webpack对脚本和样式的处理相关推荐

转：iFire：玩聚 SRBacks 自定义脚本及样式表
感谢iFire的第一时间修改并试用,而且调试出如此清新的样式. 下面转贴一下他的自定义脚本和样式表: 玩聚 SRBacks 自定义脚本及样式表 admin @ 2009-01-11 02:34 59 ...
十九、动态加载脚本和样式
十九.动态加载脚本和样式本章主要讲解上一章剩余的获取位置的DOM方法.动态加载脚本和样式. 1.元素位置上一章已经通过几组属性可以获取元素所需的位置,那么这节课补充一个DOM的方法:getBo ...
html 清理多余样式,webpack去除冗余css样式删除多余css
webpack打包css时,一般时压缩css,但css有很多用不到类和属性,有什么办法可以除冗余css样式删除多余css,特别是在使用一些bootstrap的前端框架时,可使用purifycss和Pu ...
JavaScript 动态加载脚本和样式的方法
一动态脚本当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的JS脚本而降低了整站的性能; 所以就出现了动态脚本的概念,在适时的时候加载相应的脚本; 1.动态引入js文件 ? 1 2 3 4 ...
webpack加载css样式 ----css相关loader
一.什么是loader? webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力. loader 让 webpack 能够去处理其他类型的文件,并 ...
Maven自动压缩脚本和样式文件配置
2019独角兽企业重金招聘Python工程师标准>>> <plugin> <groupId>com.samaxes.maven ...
手把手从0打造电商平台前端
第一章课程介绍与开发前的准备工作 1.1 课程目标掌握一个电商网站从设计到上线的整个过程所涉及的流程具备独立开发一个前端项目的能力让你一开始就比别人起点更高,获得更快速的成长掌握开发过程中各 ...
前后端项目对接流程梳理
课程目标掌握一个电商网站从设计到上线的整个过程所涉及的流程具备独立开发一个前端项目的能力网址 http://www.happymmall.com 架构设计前后端完全分离分层架构模块化技术 ...
企业级电商平台-前端搭建(有源码)
目标整体架构() 业务功能实现系统整体可用性,可维护性,可扩展性前后端分离 API接口交互分层架构设计模块化思想架构工具 WebPack NodeJS NPM Shell Cha ...

webpack对脚本和样式的处理

webpack对脚本和样式的处理相关推荐

最新文章

热门文章