关于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 相关文章推荐
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 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
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
zend framework重定向方法小结
2016/05/28 PHP
php验证码生成器
2017/05/24 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
用python找出那些被“标记”的照片
2017/04/20 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
高中自我评价范文
2014/01/27 职场文书
公司员工活动策划方案
2014/08/20 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书