本文旨在通过一个一个实战例子来学习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版本实战案例【基础配置篇】(一)的更多相关文章

  1. iView 实战系列教程(21课时)_1.iView 实战教程之配置篇

    1.iView 实战教程之配置篇 点击添加插件,. 选中后安装 全部导入还是按需导入. 2.是否需要自定义主题变量 3.多语言的设置. 这里我们全部选择为默认 然后点击继续. 启动项目 入口文件导入了 ...

  2. Flume实战案例运维篇

    Flume实战案例运维篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Flume概述 1>.什么是Flume Flume是一个分布式.可靠.高可用的海量日志聚合系统,支 ...

  3. 深入浅出 webpack 之基础配置篇

    前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...

  4. lxc 容器基础配置篇

    一, 首先配置lxc需要的网卡断 吧eth0复制一份变为br0 配置br0 配置eth0 重启网卡   /etc/init.d/network restart 安装lxc软件 需要epel源--- y ...

  5. iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化

    首先需要安装vue cli 3.0版本 点击添加插件, 输入iview 选中后安装 全部导入还是按需导入. 2.是否需要自定义主题变量 3.多语言的设置. 这里我们全部选择为默认 然后点击继续. 启动 ...

  6. 提高开发效率之VS Code基础配置篇

    背景 之前一直是只用WebStorm作为IDE来编写代码,但是由于: 手中的这台Mac接了两个显示器以后,使用WebStorm会有卡顿. WebStorm需要付费(虽然可以通过某方法和谐). 所以需要 ...

  7. 从零开始用electron整个跨平台桌面应用---基础配置篇

    1.安装node.npm node以及npm都需要是最新版本(版本过低有坑) 2.安装淘宝镜像cnpm(建议,下载较快) npm install -g cnpm --registry=https:// ...

  8. 【Dubbo实战】基础学习篇(一)

    Dubbo的简单介绍 是什么? Dubbo是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000多个服务提供30多亿次訪问量支持.并被广泛应用于阿里巴巴集团的各成员网站. Dubbo是一个分布式服 ...

  9. 阿里云ECS服务器Linux环境下配置php服务器(一)--基础配置篇

    开始安装软件了,我们需要安装的软件有apache,php和MySQL. ps:如果你购买的是北京的服务器,有个安全组需要设置,我全部用的默认设置,暂时还没发现会有什么影响. 首先关闭SELINUX(S ...

随机推荐

  1. 脚本自动封掉并发数过高的 IP

    防止扫描器对服务器恶意扫描,可以对 iptables 规则做了比较严格的配置. 以下配置可作为参考: #lo -A INPUT -i lo -j ACCEPT -A OUTPUT -o lo -j A ...

  2. CS Academy Sliding Product Sum(组合数)

    题意 有一个长为 \(N\) 的序列 \(A = [1, 2, 3, \dots, N]\) ,求所有长度 \(\le K\) 的子串权值积的和,对于 \(M\) 取模. \(N \le 10^{18 ...

  3. 【WC2018】即时战略(动态点分治,替罪羊树)

    [WC2018]即时战略(动态点分治,替罪羊树) 题面 UOJ 题解 其实这题我也不知道应该怎么确定他到底用了啥.只是想法很类似就写上了QwQ. 首先链的部分都告诉你要特殊处理那就没有办法只能特殊处理 ...

  4. Swarm平滑升级回滚

    #滚动更新创建服务: docker service create --name my_web --replicas=5 nginx:1.12更新为1.14 docker service update ...

  5. HDU46093-idiots

    题目大意 给一堆边的长度,问从中随机选出三条边来能够组成三角形的概率. 题解 其实就是要求能够组成三角形的方案数.直接从三条边入手问题会很复杂,所以我们可以先求出f[x]表示随便选出两条边长度之和为x ...

  6. 51nod 1105(第K大数 二分套二分)

    题目链接:http://www.51nod.com/onlineJudge/submitDetail.html#!judgeId=620811 参考自:https://blog.csdn.net/f_ ...

  7. Spring Boot + Mybatis + Redis二级缓存开发指南

    Spring Boot + Mybatis + Redis二级缓存开发指南 背景 Spring-Boot因其提供了各种开箱即用的插件,使得它成为了当今最为主流的Java Web开发框架之一.Mybat ...

  8. 小Y的炮

    [存代码] #include<bits/stdc++.h> #define N 1000001 #define MAXN 100001 using namespace std; int n ...

  9. A1140. Look-and-say Sequence

    Look-and-say sequence is a sequence of integers as the following: D, D1, D111, D113, D11231, D112213 ...

  10. redis五种数据类型的使用场景

    string 1.String 常用命令: 除了get.set.incr.decr mget等操作外,Redis还提供了下面一些操作: 获取字符串长度 往字符串append内容 设置和获取字符串的某一 ...