webpack
来源:互联网 发布:安徽南瑞继远 知乎 编辑:程序博客网 时间:2024/06/05 00:23
全局安装
npm install webpack -g
- webpack -w 提供watch方法,实时进行打包更新
- webpack -p 对打包后的文件进行压缩
- webpack -d 提供sourcemap.方便调试
- webpack –config 以某个config作为打包
- webpack –help 更多命令
本地安装
npm install webpack --save-dev
初体验
index.htmlentry.js
编译entry.js并打包到bundle.js
webpack ./entry.js bundle.js
配置文件
- webpack在执行的时候可以通过指定的配置文件
- 默认情况下会执行当前目录中的webpack.config.js
- 配置文件是一个node.js模块,返回一个json格式的配置信息对象
- 添加配置文件
var webpack = require('webpack');module.exports = { entry: "./entry.js", //指定打包的入口文件,每有一个键值对,就是一个入口文件 output: { //配置打包结果 path: __dirname, //定义了输出的文件夹 filename: "bundle.js" //定义了打包结果文件的名称 }, module: { //定义模块的加载逻辑 loaders: [ //定义了一系列的加载器 { test: /\.css$/, loader: "style!css" }, //当需要加载的文件匹配`test`的正则时,就会调用后面的`loader`对文件进行处理 {test:/\.(png|jpg)$/,loader:'url?limit=40000'} ] }};
插件
插件的使用一般是在webpack的配置信息plugins选项中指定,我们可以向生成的打包文件头部插入一些信息
//向打包的头部加入 作者 : cjplugins: [ new webpack.BannerPlugin('作者 : cj') ],
加载图片
url-loader会将样式中引用到的图片转为模块来处理
npm install url-loader
limit的参数意思是图片大小小于这个限制的时候,会自动启用base64编码图片
{test:/\.(png|jpg)$/,loader:'url?limit=40000'}
别名
- 别名的作用是把用户的一个请求重定向到另一个路径
resolve: { alias: { jquery: "./lib/jquery/jquery.js" } }
expose
- 如果想在前台使用打包的jquery需要把jquery暴露出来
npm install expose-loader --save-dev
- 把$作为别名为jquery的变量暴露到全局上下文中
require('expose?$!jquery');
webpack里面使用es6
npm install babel-core --save-devnpm install babel-loader --save-devnpm install babel-preset-es2015
{test: /\.js?$/,loader: 'babel', exclude: /node_modules/, query: {compact: false,presets: ['es2015']}}
打包成多个资源文件
entry属性可以使一个对象,而对象名也就是key会作为下面output的filename属性的[name]
entry: { bundle1:'./entry1.js', bundle2:'./entry2.js' }, //指定打包的入口文件,每有一个键值对,就是一个入口文件
公共模块
我们利用插件就可以智能提取公共部分,已提供我们浏览器的缓存复用
比如上面entry1.js和entry2.js里面都需要jq模块,打包之后两个bundle1和bundle2都用jq,这明显不适宜,所以要提取公共模块
plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js') ]
我们需要手动在html上去加载common.js,并且是必须要最先加载
gulp里面使用webpack
var gutil = require("gulp-util");var gulp = require("gulp");var webpack = require("webpack");var webpackConfig = require("./webpack.config.js");gulp.task("webpack", function (callback) { var myConfig = Object.create(webpackConfig); webpack( myConfig , function (err, stats) { callback(); });});gulp.task('default',function(){ gulp.watch('./**',['webpack']);});
webpack-dev-server
npm install webpack-dev-server -g
然后用webpack-dev-server启动一个服务
模块
es6在语言规格的层面上, 实现了模块功能
- export命令用于规定模块的对外接口
- import命令用于输入其他模块提供的功能
- 一个模块就是一个独立的文件,改文件内部的所有变量,外部无法获取
- 如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量
export
- 到处变量
- 导出变量为一个对象
- 函数或类(class)
import
- 其他js文件就可以通过import命令加载这个模块
- import命令接受一个对象,里面指定要从其他模块导入的变量名
- 模块的整体加载
import * as util from './util'
- export default命令,为模块指定默认输出
export default function(){ console.log('foo'){ }}import customName from './export-default';
- export default 对应的import语句不需要使用大括号,不使用export default 对应的import语句需要使用大括号
- 一个模块只能有一个默认输出
阅读全文
0 0
- WebPack
- webpack
- webpack
- webpack
- webpack
- Webpack
- webpack
- webpack
- Webpack
- webpack
- webpack
- webpack
- webpack
- webpack
- Webpack
- webpack
- webpack
- webpack
- 转载——文字发光特效
- SAN存储交换机配置
- Java经典设计模式之五大创建型模式(附实例和详解)
- 感知哈希算法——找出相似的图片
- instruments 中 Time Profiler的使用说明
- webpack
- Redis哨兵集群
- CNN卷积神经网络笔记
- Linux基础知识
- 学习Android中疑惑的名词
- CHY Web 4 Qian Niu
- 软件网一周头条盘点(12.26-12.30)
- SpringCloud学习_1(注册中心)
- Android WiFi/WiFi热点开发总结