webpack 配置简单说几句 ?
前言
这几天在准备一个单页面应用, 准备试试webpack神器,在准备webpack下的知识点,顺便记录下一些使用的心得。
webpack 的配置说明
在近来的前端开发中,业务逻辑复杂化,层次多样化,各种库和各种的包百花争鸣,而在模块的加载又没有一统天下的情况下,资源的管理和,静态资源的打包催生了现在很火的webpack,使其在webapp的应用中为前端人员所青睐。以下是webpack一些基础的说明和基础的小demo。
loader 和module plugin 的使用
loader 是为了让原本只能加载js的webpack能够支持CoffeeScript、 JSX、 LESS 或图片等作为依赖来一起打包编译的一个插件,这里的工作是解析,递归语法树,所以编译这部分的工作会导致cpu和内存飙升,而module 插件部分则是建立在在初始的loader之后。
//webpack的配置说明
var webpack = require('webpack');
module.exports = {
entry:['./entry.js'], //入口文件,可以多个文件, ['./entry01.js','./entry02.js']
output: { // 输出文件
path: __dirname, // 路径
filename: 'bundle.js' //具体的文件文件名
},
module: { // 对模块的处理逻辑
loaders: [
// 匹配js|jsx 后缀的文件,node_modules里面的模块除外,babel转码,当然也可以这么写
// loader:"babel-loader",
// query: {
// presets: ['es2015', 'react']
// }
//
{ test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' },
// 匹配css, 先用css-loader加载,'?' 后为具体的传参数,这里传参到css-loader 解析用css Module写的css文件,解析后再传给style-loader将内容解析到html里面
{ test: /\.css$/, loader: 'style-loader!css-loader?modules' },
// 匹配png,jpg ,'?limit' 表示为文件小于8192byte 的文件,转为 Data URl,其他的则为路径
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
plugins: [
// 定义插件配置,可以是第三方配置,BannerPlugin 用来定义输出文件bandle.js的首部信息(注释)
new webpack.BannerPlugin('This file is created at '+ new Date()),
// js 文件压缩
new uglifyJsPlugin({compress: { warnings: false }})
]
}
加载模块的配置的写法:
除了在webpack.config.js 里面的写法外,还可以在命令行, requrie 模块加载处写,比如
webpack entry.js bundle.js --module-bind 'css=style!css'
require("!style!css!./style.css") // 载入 style.css
---- To be continued!
备注
webpack官方说明: http://webpack.github.io/docs/,
中文简介: http://webpackdoc.com/loader.html
阮老师的demo:https://github.com/ruanyf/webpack-demos
webpack 配置简单说几句 ?的更多相关文章
- vue-cli webpack配置 简单分析
vue-cli webpack配置分析 入口 从package.json可以看到开发和生产环境的入口. "scripts": { "dev": "no ...
- 超简单,webpack配置
有看过我的博客的童鞋可能有看到我最近有在利用闲暇时间做一个前后台均涵盖的音乐播放器项目,但是呢,我是一个小小的前端,对后台的了解可以说只停留在很初级的阶段,当然了音乐播放器的音乐列表是后台轮循出来的, ...
- webpack的简单配置
本人刚开始也不会写webpack配置,刚开始在网上搜索了了一些,看的也是刚刚理解,所以准备自己写下来,已作纪念和贡献给像我一样不会配置的“童鞋”们! 1.创建webpack配置文件 在项目文件下创建一 ...
- webpack前端简单配置
每次用webpack创建项目时,总是要安装一堆包,还要配置一系列文件解析规则,webpack打包规则等,烦不胜烦.网上找的很多webpack配置里面很多里面的配置或者引入包都是被弃用的,因此自己总结了 ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- Webpack配置示例和详细说明
/* * 请使用最新版本nodejs * 默认配置,是按生产环境的要求设置,也就是使用 webpack -p 命令就可以生成正式上线版本. * 也可以使用 webpack -d -w 命令,生成用于开 ...
- webpack配置这一篇就够
最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...
- webpack 4 简单介绍
webpack是什么? webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler). 为什么要使用webpack呢? 随着web技术的发展,前端开发不再仅仅是 ...
随机推荐
- Java中的HashMap
今天到中关村软件园面试被问到Java中HashMap的存值原理,瞬间无言已对,回答用了一个数组,然后沉默,面试官说,一次的面试失败不算什么,之后...... 1.关于hashCode hashCode ...
- 转载:ensemble计划和数据库
原文来源:x2yline在生信进化树上的评论,http://www.biotrainee.com/thread-626-1-1.html Ensemble( ensembl.org网站是常用真核生物参 ...
- 【2039】checker(Dp)
我今天脑子貌似又好使了一点,可以做一做DP中的水题了. 这个题难度蓝色,纯属是做的人太少了虚高. 这个题很显然的是可以用一个顺序一个逆序这两个大水转移方程轻松转移出到达这个地方最少需要的棋子数量,然后 ...
- 集成Spring web.xml配置总结
1.web.xml 的加载顺序是:ServletContext -> context-param -> listener -> filter -> servlet 1.serv ...
- 剑指Offer——圆圈中最后剩下的数(约瑟夫环)
Question 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后, ...
- Apache Phoenix的Join操作和优化
估计Phoenix中支持Joins,对很多使用Hbase的朋友来说,还是比较好的.下面我们就来演示一下. 首先看一下几张表的数据: Orders表: OrderID CustomerID ItemID ...
- 获取本机MSSQL保存凭证
首先要感谢哥们对我的指点,多谢. 当我们遇到类似情况下,如何获取保存在MSSQL工具里的凭证呢? //如果对方连接地址后面加了IP\sqlexpress 连接的时候你也记得加上,不然即使密码正确,也 ...
- Codeforces Round #373 (Div. 2) E. Sasha and Array 矩阵快速幂+线段树
E. Sasha and Array time limit per test 5 seconds memory limit per test 256 megabytes input standard ...
- poj 2478 Farey Sequence 欧拉函数前缀和
Farey Sequence Time Limit: 1000MS Memory Limit: 65536K Description The Farey Sequence Fn for ...
- PHP中preg_match正则匹配的/u /i /s是什么意思
/u 表示按unicode(utf-8)匹配(主要针对多字节比如汉字) /i 表示不区分大小写(如果表达式里面有 a, 那么 A 也是匹配对象) /s 表示将字符串视为单行来匹配