关于webpack2和模块打包的新手指南(小结)


Posted in Javascript onAugust 07, 2017

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。控制台中的输出展示了打包文件的信息,注意打包文件的数量和大小十分重要。

关于webpack2和模块打包的新手指南(小结)

现在当你在浏览器中加载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 + Cnpm start重新启动构建。

加载器序列以相反的顺序进行处理:

  • sass-loader 将Sass转换为CSS。
  • css-loader 将CSS解析为JavaScript并解析所有依赖。
  • style-loader将我们的CSS输出到文档中的

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 生成指定范围数值随机数
Jan 09 Javascript
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
动态加载js文件简单示例
Apr 21 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 #Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 #Javascript
bootstrap Table插件使用demo
Aug 07 #Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 #Javascript
React进阶学习之组件的解耦之道
Aug 07 #Javascript
详解前端路由实现与react-router使用姿势
Aug 07 #Javascript
React中使用collections时key的重要性详解
Aug 07 #Javascript
You might like
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
Python 40行代码实现人脸识别功能
2017/04/02 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
建筑实习自我鉴定
2013/10/18 职场文书
高三自我评价
2014/02/01 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
怎样写辞职信
2015/02/27 职场文书
运动会通讯稿300字
2015/07/20 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
Python绘制分类图的方法
2021/04/20 Python
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript