为什么要使用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. J2EE 的体系结构

    J2EE 即Java2平台企业版,它提供了基于组件的方式来设计.开发.组装和部署企业应用.J2EE使用多层分布式的应用模型,这个多层通常通过三层或四层来实现: 1.客户层,运行在客户计算机上的组件.  ...

  2. python模块-hmac

    Hmac算法:Keyed-Hashing for Message Authentication.它通过一个标准算法,在计算哈希的过程中,把key混入计算过程中. import timefrom has ...

  3. nodejs post 数据到php $_POST["content"]接收不到的问题

    今天写了一段代码,要用到ajax调用php的接口,因为是https的,所以ajax不能跨域,于是使用nodejs调用接口,但是传输数据后 $_POST["content"]接收不到 ...

  4. CodeCraft-19 and Codeforces Round #537 (Div. 2) C. Creative Snap 分治

    Thanos wants to destroy the avengers base, but he needs to destroy the avengers along with their bas ...

  5. SpeechVoiceSpeakFlags枚举类型的详细解释

    http://blog.csdn.net/zhou_xw6511/article/details/8313528

  6. jeesite模块解析,功能实现

    做为十分优秀的开源框架,JeeSite拥有着很多实用性的东西. 默认根路径跳转 定义了无Controller的path<->view直接映射 <mvc:view-controller ...

  7. Android 文字转语音(TTS)

    1.介绍 2.xml文件布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xml ...

  8. rest-assured之获取响应数据(Getting Response Data)

    我们使用rest-assured可以获得响应内容,比如:我们发起一个get请求 get("/lotto") 并且获得响应内容,我们有多种方式可以实现: // 通过流的方式获得响应内 ...

  9. Angular 2: 404 error occur when I refresh through the browser [duplicate]

    https://stackoverflow.com/questions/35284988/angular-2-404-error-occur-when-i-refresh-through-the-br ...

  10. oracle三种连接身份

    登录oracle数据库有三种连接身份   sysdba:数据库管理员,sysyoper:数据库操作员,normal:普通用户. "sysdba" 即数据库管理员 权限包括:   打 ...