webpack@4.32.2研究笔记【01】- 零配置

littleGrow 发布于2019-08-26 13:56 / 2294人阅读

摘要：核心概念是一个前端资源模块打包工具，它可以根据模块的依赖关系进行打包输出成浏览器能够识别的静态资源，可以把多个文件打包成一个，减少请求。源码地址零配置启动从开始，可以零配置启动，命令被迁移到一个多带带的包上，的功能变得更加丰富强大。

核心概念

webpack是一个前端资源模块打包工具，它可以根据模块的依赖关系进行打包输出成浏览器能够识别的静态资源，可以把多个文件打包成一个，减少http请求。

源码地址

零配置启动

从webpack4.0.0开始，webpack可以零配置启动，webpack命令被迁移到一个多带带的npm包 —— webpack-cli上，webpack的cli功能变得更加丰富强大。

下面我通过一段代码来演示一下，零配置启动webpack：

第1步：安装webpack

npm i -D webpack

第2步：编写入口文件和依赖代码

// webpack@4.32.2系列教程/demo01-ZeroConfiguration/src/role.js
export default class Role {
  constructor(name, skill) {
    this.name = name;
    this.skill = skill;
  }
}

// webpack@4.32.2系列教程/demo01-ZeroConfiguration/src/index.js
import Role from "./role"
const role = new Role("乔峰", "降龙十八掌");
console.log(role);

第3步：使用Node API 启动webpack

const webpack = require("webpack");
// webpack4.0.0 开始支持零配置启动webpack
const compiler = webpack({});
// 使用Node Api 启动webpack编译，webpack4.0.0开始，已经把webpack命令迁移出去了，成为一个多带带的npm模块包，叫做webpack-cli，这个包的功能更多更强大。
// 如果想使用webpack命令，就必须要安装webpack-cli这个包
// 如果你不需要使用webpack cli命令功能，那么你只需安装webpack这个包就够了，如果只安装webpack这个包，那么只能通过node api来启动webpack
// vue和react的脚手架的就是用node api来操作webpack的

// 启动webpack
compiler.run((err, stats) => {
  if (err) {
    console.error(err);
    return;
  }
  // 输出编译成功信息
  console.log(stats.toString({ colors: true }));
})

第4步：cd到demo01-ZeroConfiguration文件夹下，运行node scripts/build.js

云服务器 GPU云服务器 php01 Beta01 java01++ database01

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109841.html

webpack@4.32.2研究笔记【02】- mode

摘要：简介模式是新增的配置，用来指定使用对应模式的内置优化它有三个可选模式默认为。源码地址选项描述通过插件将的值设为。启用和通过插件将的值设为。使用默认的优化项。注意上面说的并不是的运行环境变量，它其实是通过插件设置的一个全局变量。简介 mode（模式）是webpack4.0.0新增的配置，用来指定webpack使用对应模式的内置优化；它有三个可选模式：producti...

newtrek 2019-08-23 17:51 评论0 收藏0
webpack@4.32.2研究笔记【03】- devtool

摘要：简介选项用于控制是否需要生成，以及如何生成。表示把每一个模块文件都转换为字符串，并且在每一个模块代码的尾部添加文件名，并使用执行。通过来处理已有的。优点是不需要建立和部署内网的服务器，缺点是无法直接线上源码。简介 devtool选项用于控制是否需要生成source map，以及如何生成source map。源码地址什么是source map？ source ma...

wangtdgoodluck 2019-08-23 18:01 评论0 收藏0
01 【零基础入门】html学习笔记（2）

摘要：，表单的两个常见属性为填写表单的人提供一个输入提示。可用于任何表单控件，表示这个域是必要的，如果不填，则无法提交表单。，表格，表格由行中的数据单元格组成，列隐含地定义在行中。，表格应用于表示表格数据，而不是建立页面布局。 1，如何设计一个页面 1）先规划好web页面的结构，首先画出一个草图，然后创建一个略图，最后再写html2）规划页面时，先设计大的块元素，再用内联元素...

kamushin233 2019-08-02 10:39 评论0 收藏0
01 【零基础入门】html学习笔记（1）

摘要：公司就是中文网页，极度的追求网页的显示速度，要使用。，与类似，用于将相关的内联元素和文本归组在一起。用途区别块元素通常用在页面中的主要构建模块，而内联元素则用来标记小段内容。之前学习了前端的一些基础知识，现在想深入地、精通地学习前端，往前端和全栈工程师方向发展。之前学习前端主要是通过看视频，结合动手练习。现在认为看书+视频+实践，应该是最高效的学习方法。对于html、css，我主要...

xeblog 2019-08-02 10:38 评论0 收藏0
php 学习笔记之日期时间操作一箩筐

摘要：格式化日期时间格式化日期时间场景将当前日期时间或者特定日期时间格式化输出为特定格式的字符串常用于人性化展示信息说明返回给定时间戳格式化后所产生的日期时间字符串如果没有给出时间戳则默认使用本地当前时间备注格式说明返回值示例位数字完整表示的年份 showImg(https://segmentfault.com/img/remote/1460000019351405); 格式化日期时间 d...

tain335 2019-07-01 12:51 评论0 收藏0