webpack起步
为什么要使用webpack
很牛逼的样子
https://www.webpackjs.com/comparison/
基本概念
1. 入口(entry)
module.exports = {
entry: './path/to/my/entry/file.js'
};
2. 出口(output)
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
3. loader处理静态资源
const path = require('path');
const config = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
module.exports = config;
4. plugins插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const config = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
5. 模式
module.exports = {
mode: 'production'
};
entry配置
1. 单入口
const config = {
entry: './path/to/my/entry/file.js'
};
module.exports = config;
2. 对象语法,分离 应用程序(app) 和 第三方库(vendor) 入口
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
3. 多页面应用程序
onst config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
output设置
//单entry的output写法
const config = {
entry: {
pageOne: './src/pageOne/index.js'
}
output: {
filename: 'my-first-webpack.bundle.js'
}
};
//如果希望可以拆分代码,或使用各种插件,用name给每个entry指定不同的名称
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js'
}
output: {
filename: "[name].bundle.js"
}
};
//publicPath指定URI基准路径
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js'
}
output: {
publicPath: "/assets/",
filename: "[name].bundle.js"
}
};
//打包出来后就会根据基准路径找资源
<link href="/assets/spinner.gif" />
background-image: url(/assets/spinner.gif);
filename字段中可以填的选项
模板 | 描述 | 指定长度 |
---|---|---|
[hash] | 模块标识符(module identifier)的 hash | |
[chunkhash] | chunk 内容的 hash | [hash] 和 [chunkhash] 的长度可以使用 [hash:16](默认为20)来指定 |
[name] | 模块名称 | |
[id] | 模块标识符(module identifier) | |
[query] | 模块的 query,例如,文件名 ? 后面的字符串 |
loader让webpack可以处理静态资源
嘿,webpack 编译器,当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时,在你对它打包之前,先使用 raw-loader 转换一下。”
npm install --save-dev css-loader
npm install --save-dev ts-loader
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
//对于一个静态资源需要多个loader处理时可以这样写
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
plugin对打包过程进行控制
webpack常用插件
Name | Description |
---|---|
AggressiveSplittingPlugin | 将原来的 chunk 分成更小的 chunk |
BabelMinifyWebpackPlugin | 使用 babel-minify进行压缩 |
BannerPlugin | 在每个生成的 chunk 顶部添加 banner |
CommonsChunkPlugin | 提取 chunks 之间共享的通用模块 |
CompressionWebpackPlugin | 预先准备的资源压缩版本,使用 Content-Encoding 提供访问服务 |
ContextReplacementPlugin | 重写 require 表达式的推断上下文 |
CopyWebpackPlugin | 将单个文件或整个目录复制到构建目录 |
DefinePlugin | 允许在编译时(compile time)配置的全局常量 |
DllPlugin | 为了极大减少构建时间,进行分离打包 |
EnvironmentPlugin | DefinePlugin 中 process.env 键的简写方式。 |
ExtractTextWebpackPlugin | 从 bundle 中提取文本(CSS)到单独的文件 |
HotModuleReplacementPlugin | 启用模块热替换(Enable Hot Module Replacement - HMR) |
HtmlWebpackPlugin | 简单创建 HTML 文件,用于服务器访问 |
I18nWebpackPlugin | 为 bundle 增加国际化支持 |
IgnorePlugin | 从 bundle 中排除某些模块 |
LimitChunkCountPlugin | 设置 chunk 的最小/最大限制,以微调和控制 chunk |
LoaderOptionsPlugin | 用于从 webpack 1 迁移到 webpack 2 |
MinChunkSizePlugin | 确保 chunk 大小超过指定限制 |
NoEmitOnErrorsPlugin | 在输出阶段时,遇到编译错误跳过 |
NormalModuleReplacementPlugin | 替换与正则表达式匹配的资源 |
NpmInstallWebpackPlugin | 在开发时自动安装缺少的依赖 |
ProvidePlugin | 不必通过 import/require 使用模块 |
SourceMapDevToolPlugin | 对 source map 进行更细粒度的控制 |
EvalSourceMapDevToolPlugin | 对 eval source map 进行更细粒度的控制 |
UglifyjsWebpackPlugin | 可以控制项目中 UglifyJS 的版本 |
ZopfliWebpackPlugin | 通过 node-zopfli 将资源预先压缩的版本 |
webpack支持模块
1. ES2015 import 语句
2. CommonJS require() 语句
3. AMD define 和 require 语句
4. css/sass/less 文件中的 @import 语句。
5. 样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)
模块解析规则
1.绝对路径
import "/home/me/file";
import "C:\\Users\\me\\file";
2.相对路径
//会添加此上下文路径(context path),以产生模块的绝对路径(absolute path)。
import "../src/file1";
import "./file2";
3.模块路径
import "module";
import "module/lib/file";
//模块将在 resolve.modules 中指定的所有目录内搜索。 你可以替换初始模块路径,此替换路径通过使用 resolve.alias 配置选项来创建一个别名。
//1. 路径是文件就直接打包,否则根据配置的 [resolve.extensions]进行打包
//2. 如果是文件夹
// (1) 先找package.json中的我们通过
// resolve.mainFields 指定的字段
// (2) 没有package.json查找,我们配置的resolve.mainFiles字段来找
manifest
bundle文件会通过解析Manifest来解析和加载模块,相当于一个文件系统, 告诉bandle文件哪个资源在哪个目录下
Runtime
在浏览器运行时,webpack 用来连接模块化的应用程序的所有代码
runtime 包含:
1. 在模块交互时,连接模块所需的加载和解析逻辑。
2. 包括浏览器中的已加载模块的连接,以及懒加载模块的执行逻辑。
webpack起步的更多相关文章
- Webpack前世今生
在正式介绍Webpack之前,先给大家说明一下前端为什么需要模块化 1.为什么需要模块化 1.1JS原始功能 在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码 ...
- webpack笔记一 起步
webpack笔记一 起步 安装 对于大多数项目,我们建议本地安装(--save-dev).这可以在引入突破式变更(breaking change)版本时,更容易分别升级项目. 起步 初始化项目 mk ...
- webpack学习(一)起步安装
起步 webpack 用于编译 JavaScript 模块.一旦完成安装,你就可以通过 webpack 的 CLI 或 API 与其配合交互.如果你还不熟悉 webpack,请阅读核心概念和打包器 ...
- webpack初起步
webpack 用于编译 JavaScript 模块.一旦完成安装,就可以通过 webpack 的 CLI 或 API 与其配合交互. 首先创建一个目录,进入目录中,初始化npm 然后本地安装webp ...
- webpack+vue起步
本文基于vue1.x 基于vue2.x&webpack2.x请移步至 Vue2.x踩坑与总结Webpack2.x踩坑与总结 记得第一次知道Vue.js是在勾三股四大大的微博,那时候他开始翻译v ...
- webpack官网demo起步中遇到的问题
在webpack官网demo一开始搭建中
- webpack入坑之旅(六)配合vue-router实现SPA
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- 在React+Babel+Webpack环境中使用ESLint
ESLint是js中目前比较流行的插件化的静态代码检测工具.通过使用它可以保证高质量的代码,尽量减少和提早发现一些错误.使用eslint可以在工程中保证一致的代码风格,特别是当工程变得越来越大.越来越 ...
- 【webpack整理】一、安装、配置、按需加载
如果你: 是前端热爱者 :) 有JavaScript/nodejs基础 会使用一些常用命令行,mkdir,cd,etc. 会使用npm 想对webpack有更深的认识,或许此时你恰好遇到关于webpa ...
随机推荐
- Tomcat类加载机制触发的Too many open files问题分析(转)
https://blog.csdn.net/ctrip_tech/article/details/53337137 说起Too many open files这个报错,想必大家一定不陌生.在Linux ...
- poll?transport=longpoll&connection...烦人的请求
2016-06-19 11:50 76人阅读 评论(0) 收藏 举报 分类: C#那点事 版权声明:本文为博主原创文章,未经博主允许不得转载. 1.问题描述: 最近使用miniui做了一个后台管理系 ...
- EasyUI学习笔记(四)—— datagrid的使用
一.传统的HTML表格 之前我们做表格的时候是这样写的: <table > <thead> <tr> <th>编号</th> <th& ...
- tornado 08 数据库-ORM-SQLAlchemy-表关系和简单登录注册
tornado 08 数据库-ORM-SQLAlchemy-表关系和简单登录注册 引言 #在数据库,所谓表关系,只是人为认为的添加上去的表与表之间的关系,只是逻辑上认为的关系,实际上数据库里面的表之间 ...
- BZOJ - 1026 数位DP
中文题面,注意st是不可以放到dp里面的,否则每次solve都要清零 注意状态的转移要st&&i==0,因为子结构也可能是st(当高位取0时) 而st是必然合法的 #include&l ...
- Http多线程下载文件
package unit; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileOutputSt ...
- 转 Monitoring Restore/Recovery Progress
ora-279 是可以忽略的报错 In general, a restore should take approximately the same time as a backup, if not l ...
- mysql 锁问题 (相同索引键值或同一行或间隙锁的冲突)
1.使用相同索引键值的冲突 由于mysql 的行锁是针对索引加的锁,不是针对记录加的锁,所以虽然是访问不同行的记录,但如果是使用相同的索引键,是会出现锁冲突的.设计时要注意 例如:city表city_ ...
- 文献综述八:基于JAVA的商品网站的研究
一.基本信息 标题:基于JAVA的商品网站的研究 时间:2015 出版源:信息技术 文件分类:对java语言的研究 二.研究背景 本文主要介绍了系统的分析,设计和开发的全部过程. 三.具体内容 文献的 ...
- PIXI 太空玉兔游戏(6)
想法来源 出于练习看到这篇文章 没有什么难度 效果如下,接下来会用pixijs讲解如何实现 创建应用及舞台 HTML部分只创建标签引入 pixi.min.js 即可: <script ...