关于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 相关文章推荐
ExtJS Window 最小化的一种方法
Nov 18 Javascript
JS 对象介绍
Jan 20 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
利用json获取字符出现次数的代码
Mar 22 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
js日期时间补零的小例子
Mar 05 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 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
星际中的相关伤害
2020/03/04 星际争霸
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
PHP7多线程搭建教程
2017/04/21 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
Python的类实例属性访问规则探讨
2015/01/30 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
曼城官方网上商店:Manchester City
2019/09/10 全球购物
暑假社会实践心得体会
2014/09/02 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL