webpack3.x版本实战案例【基础配置篇】(一)
本文旨在通过一个一个实战例子来学习webpack如何配置,更加深入的学习webpack在实战项目中如何配置。
我们学习哪些配置呢?
【基础配置】
- 打包JS
- 编译ES6
- 编译typeScript
- 打包公共代码
- 代码分割和懒加载
- 打包css
- 打包less sass
- 提取css为独立文件
- postCss的使用
- js Tree-shaking
- css Tree-shaking
- 图片处理(css中引入图片、base64编码)
- 压缩图片,自动合成雪碧图sprite、retina处理
- 字体文件处理
- 处理第三方JS库
- 生成HTML
- HTML中引入图片
优化webpack配置
** 所有实际代码都可在github上查看:https://github.com/shiyou00/webpack **
webpack命令
webpack -h //帮助简写
webpack -v //webpack版本号
webpack <entry> [<entry>] <output> // 执行webpack输入输出命令
--config 指定将要执行的webpack配置文件 : webpack --config webpack.conf.dev.js 指定将要执行的webpack配置文件为 webpack.conf.dev.js
--env 指定运营环境
--watch 监测文件变化
--debug loaders打开调试状态
--devtool 开发工具生成sourceMap
打包JS
创建文件index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打包JS</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
创建文件app.js
import sum from './sum';
console.log('sum(1,7)=',sum(1,7));
创建文件sum.js
export default function (a,b){
return a + b;
}
创建webpack.config.js
module.exports = {
entry: {
app : './app.js'
},
output: {
filename : 'bundle.js' // filename : '[name].[hash:5].js'
}
};
解释:filename: '[name].[hash:5].js' => [name]根据输入的文件名输出;[hash:5]输出五位hash值
然后执行webpack命令输出了bundle.js文件
打开index.html,并打开控制台就可以看到正确的输出了
---------------------------
编译ES6
需要使用的工具
Babel
- babel-loader
- babel/core
首先安装依赖
npm install -save-dev babel-loader @babel/core
主意:babel-loader babel-core 这些有强的版本依赖关系的,必须得版本对了运行才会对的。具体版本号在git上面的package.json中可以看到
Babel Presets
使用babel的什么规范打包
es2015
es2016
es2017
env : 包含2015到最近的版本的一个汇总,所以开发中常用这个
安装presets(使用什么就安装什么)
npm install @babel/preset-env --save-dev
app.js
let func = () => {};
const NUM = 45;
let arr = [1,2,4];
let arr2 = arr.map(item => item * 2);
console.log('new Set', new Set(arr2));
webpack.config.js
module.exports = {
entry: {
app: './app.js'
},
output: {
filename: '[name].[hash:8].js'
},
module:{
rules:[
{
test: /\.js$/, // 使用正则匹配的文件名
use: {
loader: 'babel-loader', // 使用的loader
options: {
presets: [
['@babel/preset-env',{
targets : { // targets:指定符合哪些条件的范围内编译
browsers:['> 1%', 'last 2 versions']
}
}]
],
}
},
exclude: '/node_modules/' // 需要排除的文件
}
]
}
}
运行webpack,看下运行的文件的结果
可以看到已经成功的编译了ES6
【.babelrc】
配置babel的使用规则,把babel配置从webpack中拎出来
{
"presets": [
["@babel/preset-env",{
"targets" : {
"browsers":["> 1%", "last 2 versions"]
}
}]
]
}
同时把webpack.config.js修改下
module.exports = {
entry: {
app: './app.js'
},
output: {
filename: '[name].[hash:8].js'
},
module:{
rules:[
{
test: /\.js$/, // 使用正则匹配的文件名
use: {
loader: 'babel-loader' // 使用的loader
},
exclude: '/node_modules/' // 需要排除的文件
}
]
}
}
运行下发现也是成功的。
正常配置只能兼容IE9+浏览器,那么要兼容IE8的浏览器要怎么办呢?
【Babel Polyfill】
全局垫片,为应用准备
安装:npm install babel-polyfill --save
直接在代码app.js中引入即可
import "babel-polyfill"; // 添加在最上面即可
然后运行下,发现也是成功的
【Babel Runtime Transform】
局部垫片,开发框架使用
安装:
npm install @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime --save
然后配置.babelrc文件
{
"presets": [
["@babel/preset-env",{
"targets" : {
"browsers":["> 1%", "last 2 versions"]
}
}]
],
"plugins": ["@babel/plugin-transform-runtime"]
}
相应的demo可以去github上找:点击我
编译typeScript
typescript-loader
安装相应的依赖
npm i typescript ts-loader --save-dev // 官方的
npm i typescript awesome-typescript-loader --save-dev // 社区的
由于版本冲突问题,建议直接使用github中的package.json中的版本确保可以编译成功
需要配置tsconfig.json
{
"compilerOptions": {
"module": "commonjs", // 指定生成哪个模块系统代码
"target": "es5", // 指定ECMAScript目标版本
"allowJs": true // 允许编译javascript文件
},
"include": [
"./src/*" // 要编译的路径
],
"exclude": [
"./node_modules" // 不编译的路径
]
}
tsconfig所有配置列表:tsconfig配置表
app.ts
const NUM = 45;
interface Cat {
name: string,
age: number
}
function cat(cat: Cat) {
console.log('cat',cat.name);
}
cat({
name: 'jack',
age:17
});
webpack.config.js
module.exports = {
entry: {
'app': './app.ts'
},
output: {
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: {
loader: 'ts-loader'
}
}
]
}
}
然后运行webpack看下打包后的内容
webpack3.x版本实战案例【基础配置篇】(一)的更多相关文章
- iView 实战系列教程(21课时)_1.iView 实战教程之配置篇
1.iView 实战教程之配置篇 点击添加插件,. 选中后安装 全部导入还是按需导入. 2.是否需要自定义主题变量 3.多语言的设置. 这里我们全部选择为默认 然后点击继续. 启动项目 入口文件导入了 ...
- Flume实战案例运维篇
Flume实战案例运维篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Flume概述 1>.什么是Flume Flume是一个分布式.可靠.高可用的海量日志聚合系统,支 ...
- 深入浅出 webpack 之基础配置篇
前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...
- lxc 容器基础配置篇
一, 首先配置lxc需要的网卡断 吧eth0复制一份变为br0 配置br0 配置eth0 重启网卡 /etc/init.d/network restart 安装lxc软件 需要epel源--- y ...
- iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化
首先需要安装vue cli 3.0版本 点击添加插件, 输入iview 选中后安装 全部导入还是按需导入. 2.是否需要自定义主题变量 3.多语言的设置. 这里我们全部选择为默认 然后点击继续. 启动 ...
- 提高开发效率之VS Code基础配置篇
背景 之前一直是只用WebStorm作为IDE来编写代码,但是由于: 手中的这台Mac接了两个显示器以后,使用WebStorm会有卡顿. WebStorm需要付费(虽然可以通过某方法和谐). 所以需要 ...
- 从零开始用electron整个跨平台桌面应用---基础配置篇
1.安装node.npm node以及npm都需要是最新版本(版本过低有坑) 2.安装淘宝镜像cnpm(建议,下载较快) npm install -g cnpm --registry=https:// ...
- 【Dubbo实战】基础学习篇(一)
Dubbo的简单介绍 是什么? Dubbo是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000多个服务提供30多亿次訪问量支持.并被广泛应用于阿里巴巴集团的各成员网站. Dubbo是一个分布式服 ...
- 阿里云ECS服务器Linux环境下配置php服务器(一)--基础配置篇
开始安装软件了,我们需要安装的软件有apache,php和MySQL. ps:如果你购买的是北京的服务器,有个安全组需要设置,我全部用的默认设置,暂时还没发现会有什么影响. 首先关闭SELINUX(S ...
随机推荐
- python学习日记(匿名函数)
匿名函数 简介 匿名函数:为了解决那些功能很简单的需求而设计的一句话函数. python 使用 lambda 来创建匿名函数. 所谓匿名,意即不再使用 def 语句这样标准的形式定义一个函数. lam ...
- LGP2801 教主的魔法
题目链接 : P2801 教主的魔法 这是第一次A分块的题 就是模板题了 每个块内排序 每个整块仅需维护整块的修改量 询问操作: 对于边缘块 直接暴力找在[l, r]内 且比给定值大的有几个 对于整块 ...
- 登录Linux服务器显示IP和自定义备注
默认搭建好的Linux服务器,使用Xshell登录的窗口如下所示: 可根据需要执行如上代码,再重新登录服务器,效果如下图所示: 代码片段:echo "export PS1='\u@\[\e[ ...
- 缺省源和 Vim 配置
缺省源 #include <bits/stdc++.h> #define x first #define y second #define pb push_back #define mp ...
- 【bfs】1252 走迷宫
[题目描述] 一个迷宫由R行C列格子组成,有的格子里有障碍物,不能走:有的格子是空地,可以走. 给定一个迷宫,求从左上角走到右下角最少需要走多少步(数据保证一定能走到).只能在水平方向或垂直方向走,不 ...
- bootstrap boosting bagging辨析
http://blog.csdn.net/jlei_apple/article/details/8168856
- [AH2017/HNOI2017]礼物(FFT)
题目描述 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手 环,一个留给自己,一 个送给她.每个手环上各有 n 个装饰物,并且每个装饰物都有一定的亮度.但是在她生日的前一 ...
- centos7下kafka集群安装部署
应用摘要: Apache kafka是由Apache软件基金会开发的一个开源流处理平台,由Scala和Java编写.Kafka是一种高吞吐量的 分布式发布订阅消息系统,是消息中间件的一种,用于构建实时 ...
- 如何优雅的解决mac安装zsh不执行.bash_profile
最近刚刚重装了系统,并安装了优雅的shell命令工具zsh,突然发现我放在我的工作目录下的.bash_profile居然在启动的时候执行,导致我的java的一些配置没有注册到bash中.然后查资料得知 ...
- 分页技术 -servlet
一.思路: 定义四个分页变量. pagenow 表示第几页,该变量由用户决定的,是变化的. pageSize 每页显示几条记录,由程序定义,也可以由程序定制. pageCount 表示共有多少页,(该 ...