关于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输出到文档中的
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vue项目webpack打包部署到服务器的实例详解
Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例. 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'
-
Webpack打包慢问题的完美解决方法
前言 这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶,当然同时引入了 Webpack 作为打包工具.但是开发过程中遇到一个很棘手的问题就是,React 加上 React-Router.superagent.eventproxy 这些第三方轮子一共有好几百个 module,Webpack 的打包速度极慢.这对于开发是非常不好的体验,同时效率也极低. 问题分析 我们先来看一下完全没有任何优化的时候,Webpack 的打包速度(使用了jsx和babel的loader). 下面是我们
-
Webpack 服务器端代码打包的示例代码
环境变量 之前,我们在项目里会经常使用 process.env.NODE_ENV, 但这个变量对于 webpack打包是有影响的, 在 production 的时候是有优化的. 所以, 我们将改用其他的环境变量来区别: new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"', 'process.env.API_ENV': `"${process.env.API_ENV || 'development'
-
webpack独立打包和缓存处理详解
前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpack拆分.打包.压缩的使用方法.本文将在上篇文章的基础上进一步讲解在使用webpack构建的项目中存在的优化方案与解决方法. 上篇文章中写了一份webpack最基本的配置文件来打包压缩我们的代码: var path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.js'
-
详解webpack+vue-cli项目打包技巧
1.设置config文件夹index.js中productionSourceMap的值为false,也就是设置webpack配置中devtool为false,打包后文件体积可以减少百分之八十!!!!!!! 2.如何实现打包文件中js.css等的版本控制? 设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true,即会使打包生成的index.html中的js和css路径带有?+随机字符串 以上就是本文的全部内容,希望对
-
彻底解决 webpack 打包文件体积过大问题
webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如 HotModuleReplacementPlugin, NoErrorsPlugin... 这时候不管用什么优化方式,都没多大效果.所以,如果你打包后的文件非常大的话,先检查下是不是包含了
-
详解如何用webpack打包一个网站应用项目
本文介绍了如何用webpack打包一个网站应用,现在分享给大家,有需要的可以了解一下 随着前端技术的发展,越来越多新名词出现在我们眼前.angularjs.react.gulp.webpack.es6.babel--新技术出现,让我们了解了解用起来吧!今天我来介绍一下如何用webpack打包一个网页应用. 一般我们写页面,大概都是这样的结构: index.html css style.css js index.js ........... 这样我们的html里直接引用css和js,完成一个网页应
-
关于webpack2和模块打包的新手指南（小结）
webpack已成为现代Web开发中最重要的工具之一.它是一个用于JavaScript的模块打包工具,但是它也可以转换所有的前端资源,例如HTML和CSS,甚至是图片.它可以让你更好地控制应用程序所产生的HTTP请求数量.允许你使用其他资源的特性(例如Jade.Sass和ES6).webpack还可以让你轻松地从npm下载包. 本文主要针对那些刚接触webpack的同学,将介绍初始设置和配置.模块.加载器.插件.代码分割和热模块替换. 在继续学习下面的内容之前需要确保你的电脑中已经安装了Node
-
基于rollup的组件库打包体积优化小结
背景 前段时间对公司内部的组件库(类似element-ui)做了打包体积优化,现在抽点时间记录下.以前也做过构建速度的优化,具体可以看组件库的webpack构建速度优化 一些存在的问题 最开始打包是基于webpack的,在按需加载上存在的体积冗余会比较大,如: webpack打包特有的模块加载器函数,这部分其实有些多余,最好去掉 使用babel转码时,babel带来的helper函数全部是内联状态,需要转成import或require来引入 使用transform-rumtime对一些新特性添加
-
Python如何将模块打包并发布
想要把自己开发的库分享给别人使用, 使用 pip install 命令来安装 , 需要学习如何制作一个python 安装包 一.注册pypi账号 https://pypi.org/account/register/ 二.创建setup.py和pypirc文件 setup.py模板(该文件放在项目根目录下) from os.path import abspath, dirname, join from setuptools import setup, find\_packages \# 获
-
详解Maven多模块打包遇到的问题解决方法
项目描述: springboot+springcloud+zookeeper+eureka+maven:为多模块多module的分布式架构: 项目目录结构如下 父工程为server工程,其中有多个子module工程: 1.独立子工程:db.model.quartz.redis.util.basecontroller: 2.独立功能模块:dao.service.controller: 其中dao.service.controller分别依赖db.model.quartz.redis.util.ba
-
Js模块打包exports require import的用法和区别
1.Commonjs之 exports和require用法 Commonejs规定每个文件是一个模块.将一个JavaScript文件直接通过script标签引入页面中,和封装成CommonJS模块最大的不同在于:前者的顶层作用域是全局作用域,在进行变量及函数声明时会污染全局环境:而后者会形成一个属于模块自身的作用域,所有的变量及函数只有自己能访问,对外是不可见的. 1.1 CommonJS导出之module.exports 导出是一个模块向外暴露自身的唯一方式.在CommonJS中,通过modu
-
Python中re模块的元字符使用小结
目录 类别1:匹配单个字符的元字符 方括号( [] ) 字符集 点 ( . ) 通配符 \w 和 \W 单词字符匹配 \d 和 \D 字符十进制数字匹配 \s 和 \S 字符空格匹配 混合使用 \w, \W, \d, \D, \s, 和\S 类别2:转义元字符 反斜杠 ( \ ) 转义元字符 类别3:锚点 $ 和\Z 字符串的结尾匹配项 \b 和 \B 单词匹配 类别4:量词 * 匹配前面的子表达式零次或多次 + 匹配前面的子表达式一次或多次 ? 匹配前面的子表达式零次或一次 .*?.+?.??
-
Docker安装jenkins实现微服务多模块打包的示例代码
目录 1.安装 2.初始化 3.配置jenkins 3.1 安装Maven 3.2 配置Maven插件 3.3 安装svn插件 4. 创建自动化部署任务 4.1 配置清理旧的构建 4.2 创建svn账密凭证 4.3 填写build命令 4.4 首次构建 5. 配置maven运行命令及shell脚本 5.1 maven父子项目依赖指令配置 5.2打包完成之后shell命令 废话不多说,直接讲正事 1.安装 # 1.pull jenkins(若使用jdk11则可pull最新版jenkins,否则最新
-
JavaScript webpack模块打包器如何优化前端性能
目录 一.webpack的使用背景 二.webpack如何优化 1. JS代码压缩 2.CSS代码压缩 3. HTML文件压缩 4. 文件大小压缩 5. 图片压缩 6. Tree Shaking 7. 代码分离 8. 内联chunk 9. 利用CDN加速以及提取公共第三方库 三.总结 一.webpack的使用背景 随着前端的项目逐渐扩大,必然会导致性能问题.尤其大大型复杂的项目中,前端业务可能因为一个小小的数据依赖,导致整个页面的卡顿甚至崩溃. 一般项目在完成后,会通过webpack进行打包,利
-
perl 模块打包加入外部依赖程序
Perl 社区并不是所有的东西都发布在 CPAN 上.甚至专门有一个 Module::ThirdParty 模块记录这些非 CPAN 的 perl 项目列表.其中最有名的应该就属写博客的 Movable Type 和做监控的 SmokePing 了. 但是如果个人图方便又想把 smokeping 打包方便部署使用的时候,就会发现一点小问题:打包成rpm,很多 perl 的依赖模块不一定在系统 repo 里存在:打包成 perl 的模块,smokeping 最常用的几个 probe 比如 fpin
-
php调用nginx的mod_zip模块打包ZIP文件
php 本身有 zip 模块,可以生产 zip 文件.但是这个 zip 模块只能使用本地文件来打包.如果需要打包输出的文件来自网络,就得先保存临时文件.在文件数量多或者文件大的时候就很杯具.另外,由 php 来输出大的打包文件会占用 php 进程大量时间,影响并发能力. nginx 有一个第三方模块,mod_zip .同样可以输出 zip 包.和 X-Accel-Redirect 有点类似,只需要 php 输出相应文件的路径等信息,然后给一个特殊的响应头即可. nginx zip 模块使用的响应