关于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 相关文章推荐
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 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编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
CI框架的安全性分析
2016/05/18 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
asp 取文本框名称代码
2008/12/02 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
python和ruby,我选谁?
2017/09/13 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
Keras loss函数剖析
2020/07/06 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
老龄工作先进事迹
2014/08/15 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
人生遥控器观后感
2015/06/11 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书