Webpack 2和模板打包的初学者指南(上)
来源:互联网 发布:网站域名查询注册 编辑:程序博客网 时间:2024/05/24 05:48
Webpack是模块打包工具。http://www.tuicool.com/articles/mIRnEjU
Webpack 已成为现代Web开发最重要的工具之一。首先,它是一个JavaScript模板打包工具,他能转换所有的前端资源,如HTML和CSS,甚至图片。它可以让你更好地控制你应用程序的HTTP请求数量,并允许你使用其他的风格资源(如Jade,Sass和ES6)。Webpack还允许你轻松地从npm上使用软件包。
本文面向刚刚接触Webpack的初学者,主要介绍Webpack的初始设置和配置、模板、加载程序、插件、代码拆分和热模块替换。如果你发现视频教程对你更有帮助,我强烈推荐Glen Maddern’s的 Webpack from First Principles 作为一个起点,了解是什么使得Webpack那么特别。
接下来,你需要有 Node.js installed 环境,你也可以 download the demo app from our Github repo
Setup
让我们用 npm
新建一个项目并初始化,安装 Webpack
:
mkdir webpack-democd webpack-demonpm init -ynpm install webpack@beta –save-devmkdir srctouch index.html src/app.js webpack.config.js
编辑这些文件:
<!-- index.html --><!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Hello webpack</title> </head> <body> <div id="root"></div> <script src="dist/bundle.js"></script> </body></html>
// src/app.jsconst root = document.querySelector('#root')root.innerHTML = `<p>Hello webpack.</p>`
// webpack.config.jsconst webpack = require('webpack')const path = require('path')const config = { context: path.resolve(__dirname, 'src'), entry: './app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [{ test: /\.js$/, include: path.resolve(__dirname, 'src'), use: [{ loader: 'babel-loader', options: { presets: [ ['es2015', { modules: false }] ] } }] }] }}module.exports = config
上面的配置是一个常见的起点,它指示 webpack
将我们的入口点 src/app.js
编译输出到 /dist/bundle.js
中,所有的 .js
文件将通过 Babel
从 ES2015
转换到 ES5
。
为了让它运行,我们需要安装三个包: babel-core
, Webpack
模块和资源转换器—— babel-loader
和预设的 babel-preset-es2015
。
{ modules: false }
启用 Tree Shaking 把我们包中不被使用的输出删除,从而降低文件大小。
npm install babel-core babel-loader babel-preset-es2015 --save-dev
最后,将 package.json
文件中的 script
部分替换为:
"scripts": { "start": "webpack --watch", "build": "webpack -p"},
在命令行中运行 npm start
来监视模式启动 webpack
——每当我们 src
目录中的 .js
文件更改时,都会重新编译输出到 bundle
中。控制台中的输出会告诉我们正在创建的包,重要的是要注意包的数量和大小。
现在你应该可以在浏览器中加载 index.html
,并使用“Hello webpack”。
open index.html
打开 dist/bundle.js
查看 webpack
做了什么,顶部是 webpack
的模板引导代码,底部是我们的模板。也许你对这不会有很深刻的印象,但如果你跟着进度学到了这里,你可以运用 ES6 module
和 webpack
生产一个能在所有浏览器中运行的用于生产的包。
输入命令行 Ctrl + C
停止 webpack
,并运行 npm run build
用于在生产模式下编译我们的包。
请注意,此时包的大小已经从2.16kB下降到585字节。
再查看一下 dist/bundle.js
,你会看到一个丑恶的代码,我们的包已经压缩或丑化(uglify/minify),代码运行效果是一样的,但它并不符合最少字符需要。
Modules
开箱即用的 webpack
知道如何使用各种格式的JavaScript模块,最显著的两种是:
ES2015的
import
语句CommonJS的
require()
语句
我们可以通过安装 lodash 并从 app.js
导入它来测试一下:
npm install lodash --save
// src/app.jsimport {groupBy} from 'lodash/collection'const people = [{ manager: 'Jen', name: 'Bob'}, { manager: 'Jen', name: 'Sue'}, { manager: 'Bob', name: 'Shirley'}, { manager: 'Bob', name: 'Terrence'}]const managerGroups = groupBy(people, 'manager')const root = document.querySelector('#root')root.innerHTML = `<pre>${JSON.stringify(managerGroups, null, 2)}</pre>`
运行 npm start
启动 webpack
,刷新一下 index.html
页面,你可以看到按 manager
排序的人数组。
让我们来把 people
数组移动到自己的 people.js
文件中:
// src/people.jsconst people = [{ manager: 'Jen', name: 'Bob'}, { manager: 'Jen', name: 'Sue'}, { manager: 'Bob', name: 'Shirley'}, { manager: 'Bob', name: 'Terrence'}]export default people
我们可以使用相对路径简单地从 app.js
导入它。
// src/app.jsimport {groupBy} from 'lodash/collection'import people from './people'const managerGroups = groupBy(people, 'manager')const root = document.querySelector('#root')root.innerHTML = `<pre>${JSON.stringify(managerGroups, null, 2)}</pre>`
注意:没有相对路径的导入,如 lodash/collection
是从 npm
安装到 node_modules
的模块,自己写的模块是需要加一个相对路径,如 ./people
来告诉 webpack
区分好各个模块。
Loaders
我们已经介绍了 babel-loader
——很多 loders 之一,通过配置用于告诉 webpack
当遇到不同文件类型的 import
时要怎么做。你可以把过个 loader
整合在一起,我们可以通过从 JavaScript
中导入 Sass
来很好地了解这是如何工作的。
Sass
这种转换涉及到三个独立的 loader
和 node-sass
库:
npm install css-loader style-loader sass-loader node-sass --save-dev
在 webpack.config.js
中给我们的 .scss
文件添加新的配置规则:
// webpack.config.jsrules: [{ test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ]}, { // ...}]
注意:每次更改 webpack.config.js
中的任何规则时,都需要使用 Ctrl+C
和 npm start
命令重新启动项目。
loader
数组会以相反的顺序执行:
sass-loader
把Sass转换成CSScss-loader
把CSS解析到JavaScript中,并分解所有的依赖关系style-loader
把我们的CSS输出到文档中的<style>标签中
你可以把它当做函数调用,一个 loader
的输出会作为 input
输入下一个。
styleLoader(cssLoader(sassLoader('source')))
让我们来添加一个Sass源文件:
/* src/style.scss */$bluegrey: #2B3A42;pre { padding: 20px; background: $bluegrey; color: #dedede; text-shadow: 0 1px 1px rgba(#000, .5);}
你现在可以从JavaScript中直接请求Sass,从 app.js
的头部引入:
// src/app.jsimport './style.scss'// ...
刷新一下 index.html
你就会看到刚添加的样式了。
CSS in JS
我们刚刚从JavaScript中导入了Sass文件,作为一个模块。
打开 dist/bundle.js
文件并搜索 “pre {
。事实上,我们的Sass已经被编译成一个CSS字符串,并保存为我们的 bundle
中的一个模板。当我们在JavaScript中导入此模板时, style-loader
会将该字符串输出到嵌入的 <style>
标签中。
我知道你肯定是在想,为什么会这样?
我不会在这里深入讨论这个话题,但是你可以从以下几个方面考虑:
你可能希望包含在项目中的JavaScript组件依赖于其他资源(HTML、CSS、Images、SVG)来正常运行,如果这些资源可以整合在一起,那么导入和使用就会容易很多。
消除死代码:当JS代码不需要导入JS组件时,将不再导入CSS,生成的
bundle
只会包含执行某些操作的代码。CSS模块:CSS的全局命名空间使得开发者很难确信CSS的一个更改不会产生任何的副作用。CSS modules 通过在默认情况下使CSS local和暴露在JavaScript下使用的唯一类名来改变这一问题。
通过巧妙的方法打包/拆分代码,来较少HTTP请求数量。
Images
我们能够看到的最后一个关于 loader
的例子是使用 url-loader
处理图片。
在标准的HTML文档中,当浏览器遇到一个 <img>
标签或 background-image
属性时会抓取图片。使用webpack,当遇到小图片的时候,你可以通过将图片源作为字符串存储在JavaScript中来优化小图片,这样,你预加载它们,浏览器就不用为了提取它们而发起单独的请求了。
npm install file-loader url-loader --save-dev
添加一个加载图片的规则:
// webpack.config.jsrules: [{ test: /\.(png|jpg)$/, use: [{ loader: 'url-loader', options: { limit: 10000 } // Convert images < 10k to base64 strings }]}, { // ...}]
重新运行项目: Ctrl + C
和 npm start
使用下面命令下载 test image
curl https://raw.githubusercontent.com/sitepoint-editors/webpack-demo/master/src/code.png --output src/code.png
你现在可以在 app.js
的头部导入图片源:
// src/app.jsimport codeURL from './code.png'const img = document.createElement('img')img.src = codeURLimg.style.backgroundColor = "#2B3A42"img.style.padding = "20px"img.width = 32document.body.appendChild(img)// ...
这将包括一张图片,其中 src
属性包含图片本身的 data URL
:
<img src="data:image/png;base64,iVBO..." style="background: #2B3A42; padding: 20px" width="32">
此外,由于使用 url()
引用的 css-loader
图片也通过 url-loader
运行,这就好像直接在CSS中嵌入它们。
/* src/style.scss */pre { background: $bluegrey url('code.png') no-repeat center center / 32px 32px;}
编译成为:
pre { background: #2b3a42 url("data:image/png;base64,iVBO...") no-repeat scroll center center / 32px 32px;}
Modules to Static Assets
你现在应该可以看到 loders
是如何帮助在资源间建立一个依赖关系树的,这是webpack首页上的图片展示:
尽管JavaScript是入口点,但webpack注意到你的其他资源(如HTML、CSS和SVG)都具有各自的依赖关系——这些依赖关系是应该视为构建过程的一部分的。
作者: Mark Brown
原文链接: A Beginner’s Guide to Webpack 2 and Module Bundling
- Webpack 2和模板打包的初学者指南(上)
- Webpack 2和模板打包的初学者指南(上)
- 模板初学者指南2
- Webpack打包 ng2英雄指南
- 模板初学者指南1
- 模板初学者指南
- webpack初学者指南(Beginner’s guide to Webpack)
- webpack--指南1--打包文件配置
- webpack打包react和过程遇到的问题
- EasyAR 初学者入门指南(3)---二维码+AR的应用(上)
- Linux上的虚拟化技术 Xen 初学者指南
- webpack打包工具的使用
- webpack打包工具的搭建
- 使用Vue-cli下载一个以webpack打包的vue模板
- vue-cli webpack模板项目搭建以及打包时路径问题的解答
- vue-cli webpack模板项目搭建以及打包时路径问题的解答
- Webpack傻瓜指南(二)开发和部署技巧
- C++:初学者的指南
- linux字符驱动之定时器去抖动按键驱动
- 100 分钟 webpack 2.0 入门视频教程
- 三分钟看懂为何比特币会暴涨
- pat1051-1060
- DES加密
- Webpack 2和模板打包的初学者指南(上)
- zedboard REV D搭载linaro
- JVM(5):tomcat性能调优和性能监控(visualvm)
- Webpack 配置中的一股清流
- mybatis 通用mapper
- towebp-loader诞生记~ 一个webpack 图片loader
- webpack独立打包与缓存处理
- 基于webpack的模块化构建
- JVM(6):JVM调优-从eclipse开始