一份关于webpack2和模块打包的新手指南
webpack已成为现代Web开发中最重要的工具之一。它是一个用于JavaScript的模块打包工具，但是它也可以转换所有的前端资源，例如HTML和CSS，甚至是图片。它可以让你更好地控制应用程序所产生的HTTP请求数量、允许你使用其他资源的特性（例如Jade、Sass和ES6）。webpack还可以让你轻松地从npm下载包。
本文主要针对那些刚接触webpack的同学，将介绍初始设置和配置、模块、加载器、插件、代码分割和热模块替换。
在继续学习下面的内容之前需要确保你的电脑中已经安装了Node.js。
初始配置
使用npm初始化一个新项目并安装webpack：
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack@beta --save-dev
mkdir src
touch 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.js
const root = document.querySelector('#root')
root.innerHTML = `<p>Hello webpack.</p>`// webpack.config.js
const 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中、使用babel将所有的.js文件从ES2015转换成ES5。
为了让它可以转换到ES5格式的JS文件，我们需要安装三个包：babel-core、webpack加载器babel-loader和预置babel-preset-es2015。使用{ modules: false }让Tree Shaking 从打包文件中删除未使用的导出项（exports）以减少文件大小。
npm install babel-core babel-loader babel-preset-es2015 --save-dev最后，用以下内容替换package.json的scripts部分：
"scripts": {
"start": "webpack --watch",
"build": "webpack -p"
},在命令行中运行npm start将以监视模式启动webpack，当src目录中的.js文件更改时，它将重新编译bundle.js。控制台中的输出展示了打包文件的信息，注意打包文件的数量和大小十分重要。
现在当你在浏览器中加载index.html页面时会看到"Hello webpack."。
open index.html打开dist/bundle.js文件看看webpack都做了哪些事情，顶部是webpack的模块引导代码，底部是我们的模块。到目前为止，你可能对于这个还没有一个深刻的印象。但是现在你可以开始编写ES6模块，webpack将生成适用于所有浏览器的打包文件。
使用Ctrl + C停止webpack，运行npm run build以生产模式编译我们的bundle.js。
注意，打包文件的大小从2.61 kB减少到了585字节。再看一下dist/bundle.js文件，你会看到大量难懂的代码，因为我们使用UglifyJS压缩了它。这样的话，我们可以使用更少的代码达到与之前一样的效果。
模块
优秀的webpack知道如何使用各种格式的JavaScript模块，最著名的两个是：
- ES2015
import语句 - CommonJS
require()语句
我们可以通过安装、导入lodash来测试这些格式的模块。
npm install lodash --save// src/app.js
import {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.js中。
// src/people.js
const people = [{
manager: 'Jen',
name: 'Bob'
}, {
manager: 'Jen',
name: 'Sue'
}, {
manager: 'Bob',
name: 'Shirley'
}, {
manager: 'Bob',
name: 'Terrence'
}]
export default people我们可以在app.js中使用相对路径轻松的导入它。
// src/app.js
import {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这样没有相对路径的导入是导入安装在/node_modules的模块，你自己的模块需要一个类似./people的相对路径，你可以以此区分它们。
加载器
我们已经介绍过，你可以通过配置像babel-loader这样的加载器来告诉webpack在遇到不同文件类型的导入时该怎么做。你可以将多个加载器组合在一起，应用到很多文件转换中。在JS中导入.sass文件是一个非常的例子。
Sass
这种转换涉及三个单独的加载器和node-sass库：
npm install css-loader style-loader sass-loader node-sass --save-dev在配置文件中为.scss文件添加新规则。
// webpack.config.js
rules: [{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}, {
// ...
}]注意： 任何时候更改webpack.config.js中的任意一个加载规则都需要使用Ctrl + C和npm start重新启动构建。
加载器序列以相反的顺序进行处理：
sass-loader将Sass转换为CSS。css-loader将CSS解析为JavaScript并解析所有依赖。style-loader将我们的CSS输出到文档中的标签。
你可以将它们看作函数调用，将一个加载器的输出输入到下一个加载器中。
styleLoader(cssLoader(sassLoader('source')))添加一个sass源文件：
/* src/style.scss */
$bluegrey: #2B3A42;
pre { padding: 20px; background: $bluegrey; color: #dedede }
你现在可以直接在JavaScript中导入Sass文件。
// src/app.js
import './style.scss'
// ...重新加载index.html，你应该会看到一些样式。
JS中的CSS
我们刚刚在JavaScript中将一个sass文件作为模块导入了。
打开 插件 我们已经看到一个内置的webpack插件的例子,在npm run build脚本中调用的webpack -p命令就是使用webpack附带的UglifyJsPlugin插件以生产模式压缩打包文件 ... webpack已成为现代Web开发中最重要的工具之一.它是一个用于JavaScript的模块打包工具,但是它也可以转换所有的前端资源,例如HTML和CSS,甚至是图片.它可以让你更好地控制应用程序所产 ... 之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ... 文章转自 http://www.chengxuyuans.com/web_technology/zeptojs-build.html zepto.js 是个好东西,遵循 jQuery API,但比 j ... 菜单快捷导航: CommonJS 之 exports和require用法 ES6 Module 之 export 和 import 用法 CommonJS和ES6 Module的区别 循环依赖 和 解 ... 多模块打包后,扫描不到@controller和@service等Bean. 原因:打包时没有生成目录信息 解决办法: 1.在eclipse或者myeclipse 打包时 勾选 ADD DIRECTOR ... Webpack 是一个 CommonJs & AMD 模块打包器.可以把你的 JavaScript 代码分离为多个包,在需要的时候进行加载,支持预处理文件,例如 json, jade, cof ... 一.多模块打包 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ... ======================================================================================== 引申:maven打包多 ... 我们使用的是PHP 的php_mysqli扩展 首先了解一些基础的用法 1.连接数据库使用 mysqli_connect() 参数:①主机地址 ②MYSQL用户名 ③MYSQL密码 ④选择 ... 前言:如果你习惯了傻瓜式的一步步安装,那么Oracle和.NET搭配,绝对会让你头痛不已. 目前我不敢保证自己理解的Oracle理论部分100%正确,但环境安装过程一定可以收藏以备不时之需. 路这么长 ... 在项目中我们会不断的添加,优化代码,每次添加优化之后都需要打包进行再次上传更新.这时问题就回来了,每次打包出来js,css文件的名字都是一样的,在首页index.html的引用也不会变,这样老用户在访 ... 这里主要介绍log管理,读写相关的类的调用关系的介绍. 在围绕log的实际处理上.有很多层的封装和调用.这里主要介绍一下调用结构和顺序. 首先从LogManager开始. 调用关系简单如下:LogMa ... Given an array of 2n integers, your task is to group these integers into n pairs of integer,say (a1, ... Kotlin基础知识的学习,请参考之前的文章: Kotlin入门第一课:从对比Java开始 Kotlin入门第二课:集合操作 Kotlin入门第三课:数据类型 初次尝试用Kotlin实现Android ... 快速预览:GridView无代码分页排序GridView选中,编辑,取消,删除GridView正反双向排序GridView和下拉菜单DropDownList结合GridView和CheckBox结合鼠 ... 大家好,我是TT,互联网测试行业多年,没有牛逼的背景,也没有什么可炫耀的,唯独比他人更努力,在职场打拼.遇到过的坑,走过的弯路,愿意与大家分享,分享自己的经验,少走弯路.首发于个人公众号[测试架构师] ... 不可变性 String可以说是最常用的类型了,即字符串类型,String是常量(final关键词修饰的),他的值不能被创建后更改,因为字符串是不可被改变的,所以可以被用来共享. Java语言为Stri ... 题目网址:http://codeforces.com/contest/828/problem/B 题目: Polycarp has a checkered sheet of paper of size ...dist/bundle.js并搜索“pre { background: #2B3A42; padding: 20px" }
一份关于webpack2和模块打包的新手指南的更多相关文章
随机推荐