摘要:简介是一款加载器兼容打包工具。所有的静态资源都可以是模块引用,而不仅仅是文件了。便捷开发,能够替代部分的的工作。扩展性强,插件机制完善。核心概念一个可执行模块或库的入口文件。插件,用于扩展的功能,在构建生命周期的节点上加入扩展为加入功能。
简介
WebPack是一款加载器兼容打包工具。
可以处理各种资源:JS(JSX),coffee,less/sass,图片等。
静态资源打包工具
出色的前端自动化构件化工具,模块化工具,资源管理工具
兼容多种JavaScript书写规范,具有更强大的JavaScript模块化功能
特点
使用commonJs的形式书写脚本。也对AMD,CMD的写法支持。
所有的静态资源都可以是模块引用,而不仅仅是JavaScript文件了。
便捷开发,能够替代部分的grunt/gulp的工作。
扩展性强,插件机制完善。
仅需要对应的加载器即可支持,配置简单,关注文件依赖关系
工作原理:
把项目当作一个整体,通过一个给定的主文件(如:app.js),webpack将从这个文件开始找到项目中的所有依赖文件,通过loaders处理它们,打包为一个浏览器可以识别的JavaScript文件。
entry:一个可执行模块或库的入口文件。
chunk:多个文件组成的一个代码开,例如把一个可执行模块和它所有依赖的模块组合和一个chunk。
loader:文件转换器。
plugin:插件,用于扩展webpack的功能,在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。
从启动webpack构建到输入结果经历了一系列过程:
解析webpack配置参数,合并从shell传入webpack.config.js文件里配置的参数,生产最后的配置结果
注册所有配置的插件,好让插件监听webpack构建生命周期的事件节点,以做出对应的反应
从配置的entry文件入口开始解析文件构建AST语法树,找出每个文件所依赖的文件,递归下去。
在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换
递归完后得到每个文件的最后总结果,根据entry配置生成代码块chunk
输出所有chunk到文件系统
注意,在构建生命周期中有一系列插件在合适的时机做了合适的事情,比如UglifyJsPlugin会在loader转换递归完后对结果再使用UglifyJs压缩覆盖之前的结果。
webpack配置文件webpack.config.js
配置说明:
plugins 插件项
entry 页面入口文件
output 对应输出项(即入口文件最终生成位置,名字)
modules.loaders 配置每一个种资源文件需要使用什么加载器来处理(多个loader之间使用"!" 连接)
基本命令webpack 启动webpack的方法
webpack -p 发布环境编译(压缩代码),对打包后的文件进行压缩
webpack -w 提供watch方法,实时进行进行打包更新
webpack -d 提供source map,方便调试
webpack --config xx.js 以某个config作为打包,使用另外一份配置文件来打包(例如:webpack.config2.js)
webpack --help 更多的命令
Node API 使用:
</>复制代码
var webpack = require("webpack");
默认使用当前目录的webpack.config.js 作为配置文件。可以根据不同的需求配置不同的config
极简webpack配置文件</>复制代码
moudle.exports = {
entry: [
"./app/main.js"
],
output: {
path: __dirname + "/dist/",
publicPath: "/dist/",
filename: "bundle.js"
}
}
其中entry参数定义了打包后的入口文件,数组中的所有文件会打包生成一个filename文件
output参数定义了输出文件的位置
在 package.json 文件中配置
</>复制代码
"scripts": {
"dev": "webpack",
"deploy": "webpack --config webpack.deploy.config.js",
"test": "echo "Error: no test specified" && exit 1"
}
可以使用 npm run dev 和 npm run deploy 指令.
需要在package.json 文件所在目录指令有效
公共文件提取
使用了一个 CommonsChunkPlugin 的插件,它用于提取多个入口文件的公共脚本部分,然后生成一个common.js 来方便多页面之间进行复用
</>复制代码
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {a: "./a", b: "./b"},
output: { filename: "[name].js" },
plugins: [ new CommonsChunkPlugin("common.js") ]
}
</>复制代码
有用的配置项
module.noParse 如果确定一个模块中没有其它依赖的,就可以配置这项,webpack将不再扫描这个文件中的依赖
</>复制代码
module: {
loaders: [{ test: /.css$/, loader: "style-loader"}],
noParse: [/moment-with-locales/]
}
resolve.alias 别名.是Webpack 的一个配置项,它的作用是把用户的一个请求重定向到另一个路径 (理解成 302)
</>复制代码
resolve: {
extensions: [".js", ".less", ".css"],
alias: {
moment: "moment/min/moment-with-locales.min.js"
}
}
加载器
对应各种不同的资源,需要有各自的loader
模块: 静态的文件, 比如: JavaScript,CSS, LESS, TypeScript
JSX,CoffeeScript,图片等等
文件配置: 通过正则表达式对文件名进行匹配.
对于不同的模块有其对应的模块加载器,它们可以进行串联
</>复制代码
module: {
loaders: [{
test: /.less$/,
loader: "style=loader!css-loader!less-loader"
}, {
test: /.(png!jpe?g)$/,
loader: "url-loader?limit=10000&name=build/[name].[ext]"
}]
}
require() 还支持在资源path前面指定loader,即 require(![loaderslist]![source path]) 形式
</>复制代码
require("style!css!less!./mystyles.less");
</>复制代码
不同规范的模块加载实现 ( AMD、CommonJS、ES6 )
CommonJS 的rqeuire函数则是同步加载 -- 使用require.ensure实现兼容
AMD是模块异步加载并保证执行顺序 -- 使用require实现兼容
ES6中使用import实现模块的引入 -- 使用Babel实现兼容
在Webpack中推荐CommonJS方法去加载模块,这种方式语法更加简洁直观.
</>复制代码
webpack 内部实现命令不同
require.ensure(CommonJs); // 保证CommonJs顺序
</>复制代码
require.ensure(["module-a", "module-b"], function ( require ) {
var a = require("module-a");
var b = require("module-b");
// ...
});
require(AMD);
</>复制代码
require(["module-a", "module-b"], function ( a, b ) {
// ...
});
require.include(request);
</>复制代码
require.ensure([], function( require ) {
require.include("./file");
require("./file2");
});
</>复制代码
sourcemap
可以把开发文件在浏览器中显示,便于调试
</>复制代码
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
devtool: "source-map"
}
</>复制代码
webpack-dev-server
生成一个开发使用的服务器,在文件有变化的时候,自动打包。有文件的热替换的功能
</>复制代码
webpack-dev-server --inline --hot // 文件自动打包, 模块热替换
</>复制代码
react 项目基础搭建
需要的工具
</>复制代码
npm install babel-core babel-preset-es2015 babel-parset-react webpack webpack-dev-server babel-loader react-hot-loader --save-dev
npm install react react-dom --save-dev
</>复制代码
多带带使用babel,需要安装的工具
</>复制代码
npm install babel-loader babel-core babel-preset-es2015 --save-dev
模块的引用
使用 require 方式直接引用静态文件
CSS 被转化为style标签
</>复制代码
require("./myapp.less");
var myapp = require("./myapp.js");
console.log(myapp);
图片打包
使用rquire方式直接引用静态文件
url-loader可以帮助实现图片的封装打包,也可以通过require实现
图片可能被转化成 base64格式的dataUrl
</>复制代码
div.img {
background: url("../img/xxx.jpg");
}
// 或者
var img = document.createElement("img");
img.src = require("../image/xxx.jpg");
document.body.appendChild(img);
CSS文件独立打包
通常并不想把样式打在脚本中,最好独立生成CSS文件,在页面中外链才好,这时可以使用插件extract-text-webpack-plugin --save-dev
</>复制代码
npm install extract-text-webpack-plugin --save-dev
</>复制代码
plugins: [
new ExtractTextPlugin("styles.css")
]
webapck-dev-server
webpack-dev-server 开发服务器
利用Express开发静态,时时刷新.
基于Node Express框架的轻量级开发服务器
静态资源Web服务器
开发中会监听文件的变化实时打包对于简单静态页面或者仅仅依赖于独立服务的前端页面,都可以直接使用这个开发服务器进行开发
Webpack开发服务器需要多带带安装
</>复制代码
npm install -g webpack-dev-server
启动命令
</>复制代码
webpack-dev-server --content-base build/ --hot
插件
</>复制代码
npm install html-webpack-plugin --save-dev
</>复制代码
new HtmlWebpackPlugin(),
new HtmlWebpackPlugin({
template: "app/custom.html",
filename: "custom.html",
chunks: ["mobile"],
inject: "body"
})
config
</>复制代码
module.exports = {
devtool: "source-map",
entry: getEntry(), //获取项目入口js文件
output: {
path: path.join(__dirname, "dist/js/"), //文件输出目录
publicPath: "dist/js/", //用于配置文件发布路径,如CDN或本地服务器
filename: "[name].js", //根据入口文件输出的对应多个文件名
},
module: {
//各种加载器
loaders: [{
test: /.css/,
loader: "style!css"
}, {
test: /.(png!jpe?g)$/,
loader: "url-loader?limit=10240&name=build/[name].[ext]"
}, {
test: /.jsx?$/,
loader: "babel-loader"
}]
},
resolve: {
//配置别名,在项目中可缩减引用路径
alias: {
jquery: srcDir + "/js/lib/jquery.min.js",
core: srcDir + "/js/core",
ui: srcDir + "/js/ui"
}
},
plugins: [
//提供全局的变量,在模块中使用无需用require引入
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery",
// nie: "nie"
}),
//将公共代码抽离出来合并为一个文件
new CommonsChunkPlugin("common.js"),
//js文件的压缩
new uglifyJsPlugin({
compress: {
warnings: false
}
})
]
};
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/80097.html
摘要:安装插件能帮忙每次打包之前先删除文件夹。安装插件提供了一种自定义编译期间如何报告进度的方法。插件能创建环境变量开发与生产时的不同配置时使用选项设置不同的配置文件开发生产能够为我们提供一个简单的并且具有实时重新加载功能。 写在前面,近期有想法整理一下前端工程化相关的知识,就先从打包工具开始吧;今天带来的是webpack相关的一些常用插件配置,后期有时间话,也会出一些比较轻量级的打包工具的...
学习的过程中收藏了这些优秀教程和的项目,希望对你有帮助。 github地址, 有不错的就更新 官方文档 中文指南 初级教程 webpack-howto 作者:Pete Hunt Webpack 入门指迷 作者:题叶 webpack-demos 作者:ruanyf 一小时包教会 —— webpack 入门指南 作者:VaJoy Larn webpack 入门及实践 作者:...
摘要:上一章我们了解了的编译环境搭建项目构建二编译环境搭建这一章我们会结合的,介绍本地测试服务器的搭建过程。三开发环境有一些特性是专门用于开发环境的,可以帮助我们搭建一个更好的开发环境。我们可以通过配合使用来搭建本地服务。 注:以下教程均在 windows 环境实现,使用其他操作系统的同学实践过程可能会有些出入。 上一章我们了解了 webpack 的 ES6 编译环境搭建:webpack...
摘要:资源哈希编码使用可以为每个包的名称注入一个哈希值例如,,以便在版本更新后使客户端上旧版本的包无效重新下载。如此受人喜爱的原因之一是热模块更换。可以为文件名生成哈希值,在内容更改时,可以作废浏览器缓存中上个版本的包。 原文链接:https://survivejs.com/webpack...翻译计划:https://segmentfault.com/a/11... 涉及到的未翻译单词 ...
摘要:同时不能直接单纯的指定输出的文件名称,比如,将会报错,可以换成以下方式指定,或者其他类似方式。如果打包过程出现错误,比如语法错误,将会在控制台以红色文字显示,并且在你修复之后会再次打包。 0x001 概述 其实我不知道怎么写,所以决定就一块一块的写点平常配置的过程,根据不同东西稍微分区一下就好了 0x002 初始化项目结构 $ mkdir webpack_study $ cd webp...
摘要:入门什么是官网介绍是一个模块打包器。处理带有依赖关系的模块,生成一系列表示这些模块的静态资源。。我们在当前项目根目录下新建一个文件,为命令配置选项。引入生成的在浏览器中打开。我们刷新页面,可以发现页面发生了变化。 webpack 入门 1. 什么是webpack 官网介绍:webpack是一个模块打包器。webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源。(web...
阅读 2157·2021-11-15 18:09
阅读 1041·2021-09-06 15:13
阅读 2706·2021-08-23 09:43
阅读 2082·2019-08-30 15:54
阅读 2272·2019-08-30 13:56
阅读 2542·2019-08-26 11:31
阅读 3136·2019-08-26 10:56
阅读 912·2019-08-26 10:28
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要