为什么要使用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起步的更多相关文章

  1. Webpack前世今生

    在正式介绍Webpack之前,先给大家说明一下前端为什么需要模块化 1.为什么需要模块化 1.1JS原始功能 在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码 ...

  2. webpack笔记一 起步

    webpack笔记一 起步 安装 对于大多数项目,我们建议本地安装(--save-dev).这可以在引入突破式变更(breaking change)版本时,更容易分别升级项目. 起步 初始化项目 mk ...

  3. webpack学习(一)起步安装

    起步   webpack 用于编译 JavaScript 模块.一旦完成安装,你就可以通过 webpack 的 CLI 或 API 与其配合交互.如果你还不熟悉 webpack,请阅读核心概念和打包器 ...

  4. webpack初起步

    webpack 用于编译 JavaScript 模块.一旦完成安装,就可以通过 webpack 的 CLI 或 API 与其配合交互. 首先创建一个目录,进入目录中,初始化npm 然后本地安装webp ...

  5. webpack+vue起步

    本文基于vue1.x 基于vue2.x&webpack2.x请移步至 Vue2.x踩坑与总结Webpack2.x踩坑与总结 记得第一次知道Vue.js是在勾三股四大大的微博,那时候他开始翻译v ...

  6. webpack官网demo起步中遇到的问题

    在webpack官网demo一开始搭建中 

  7. webpack入坑之旅(六)配合vue-router实现SPA

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  8. 在React+Babel+Webpack环境中使用ESLint

    ESLint是js中目前比较流行的插件化的静态代码检测工具.通过使用它可以保证高质量的代码,尽量减少和提早发现一些错误.使用eslint可以在工程中保证一致的代码风格,特别是当工程变得越来越大.越来越 ...

  9. 【webpack整理】一、安装、配置、按需加载

    如果你: 是前端热爱者 :) 有JavaScript/nodejs基础 会使用一些常用命令行,mkdir,cd,etc. 会使用npm 想对webpack有更深的认识,或许此时你恰好遇到关于webpa ...

随机推荐

  1. Tomcat类加载机制触发的Too many open files问题分析(转)

    https://blog.csdn.net/ctrip_tech/article/details/53337137 说起Too many open files这个报错,想必大家一定不陌生.在Linux ...

  2. poll?transport=longpoll&connection...烦人的请求

    2016-06-19 11:50 76人阅读 评论(0) 收藏 举报  分类: C#那点事 版权声明:本文为博主原创文章,未经博主允许不得转载. 1.问题描述: 最近使用miniui做了一个后台管理系 ...

  3. EasyUI学习笔记(四)—— datagrid的使用

    一.传统的HTML表格 之前我们做表格的时候是这样写的: <table > <thead> <tr> <th>编号</th> <th& ...

  4. tornado 08 数据库-ORM-SQLAlchemy-表关系和简单登录注册

    tornado 08 数据库-ORM-SQLAlchemy-表关系和简单登录注册 引言 #在数据库,所谓表关系,只是人为认为的添加上去的表与表之间的关系,只是逻辑上认为的关系,实际上数据库里面的表之间 ...

  5. BZOJ - 1026 数位DP

    中文题面,注意st是不可以放到dp里面的,否则每次solve都要清零 注意状态的转移要st&&i==0,因为子结构也可能是st(当高位取0时) 而st是必然合法的 #include&l ...

  6. Http多线程下载文件

    package unit; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileOutputSt ...

  7. 转 Monitoring Restore/Recovery Progress

    ora-279 是可以忽略的报错 In general, a restore should take approximately the same time as a backup, if not l ...

  8. mysql 锁问题 (相同索引键值或同一行或间隙锁的冲突)

    1.使用相同索引键值的冲突 由于mysql 的行锁是针对索引加的锁,不是针对记录加的锁,所以虽然是访问不同行的记录,但如果是使用相同的索引键,是会出现锁冲突的.设计时要注意 例如:city表city_ ...

  9. 文献综述八:基于JAVA的商品网站的研究

    一.基本信息 标题:基于JAVA的商品网站的研究 时间:2015 出版源:信息技术 文件分类:对java语言的研究 二.研究背景 本文主要介绍了系统的分析,设计和开发的全部过程. 三.具体内容 文献的 ...

  10. PIXI 太空玉兔游戏(6)

    想法来源  出于练习看到这篇文章   没有什么难度  效果如下,接下来会用pixijs讲解如何实现 创建应用及舞台 HTML部分只创建标签引入 pixi.min.js  即可: <script ...