Webpack 学习笔记（1） 开始
参考资料
本文以一个实例webpack-demo来记录 webpack 的使用。在使用 webpack 前，应保证能使用 npm 命令。
安装 Webpack 时，官方推荐使用独立安装（Local Installation）而不是使用全局安装（Global Installation），即在需要用到的模块中安装webpack。这样的好处在于，当新的需求被引入时，项目的独立更新变得容易。
1. 基础设定
首先我们创建一个目录，初始化 npm ，然后在目录中安装 webpack 和 webpack-cli（这是个运行 webpack 的命令行工具）：
$ mkdir webpack-demo && cd webpack-demo
$ npm init -y
$ npm install webpack webpack-cli --save-dev
然后在webpack-demo文件夹下构建如下结构（加号+代表添加的文件及文件夹）：
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
+ |- /src
+ |- index.js
dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Getting Starting</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
src/index.js
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
接着打开package.json文件。为了移除默认的程序入口，将main字段删除；为避免程序被已外发部，设置private字段为true。
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true,
- "main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9"
},
"dependencies": {}
}
基本配置完毕。可以看到，我们设置了dist文件夹和src文件夹将“distribution”代码和“source”代码分离，“source”是我们书写和编辑的部分，“distribution”是最终浏览器加载的最小化和最优化的程序输出结果。
2. 创建一个包
我们首先安装lodash。Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。（在index.js中引用）
$ npm install lodash --save-dev
在 index.js 的代码中，我们明确要求引用 lodash 并使用 _ 将其绑定。通过说明模块需要哪些依赖关系，webpack可以使用这些信息来建立依赖关系图。然后，它使用这些关系图生成一个优化的、将代码内容正确组织的捆绑包。
安装完毕后我们在当前目录下运行命令npx webpack，该命令将src/index.js作为切入点，生成dist/main.js作为输出。
此时，用浏览器打开index.html，可以看到网页中显示“Hello webpack”。
补充说明：npx有什么用：npx允许开发者直接使用模块（module）内提供的命令行工具（省得输入目录）；
// 直接使用模块内命令行工具
$ node_modules\.bin\webpack
// 在npx支持下使用模块内命令行工具
$ npx webpack
3. 使用配置文件完成打包命令
虽然在4.x版本之后的 webpack 不再需要任何配置，但是大多数项目都包含了许多复杂的配置，因此 webpack 支持配置文件。这比在终端手动输入大量命令要高效得多，我们可以创建一个配置文件来代替上面用到的命令行选项：
在 webpack-demo 文件夹下新建文件：webpack.config.js
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
此时可以把/dist/main.js文件删除，再次构建程序，但此时采用的是借助配置文件的方法：
# 方法一：
$ npx webpack --config webpack.config.js
# 方法二：
$ npx webpack
得益于 webpack-cli 的运行机制，如果当前目录中存在 webpack.config.js 文件，webpack 命令会默认使用它。当然，使用 --config 选项是为了说明我们可以加载任意命名的配置文件（这对于需要被拆分为多个文件的复杂配置十分有用）。
使用配置文件构建项目有个好处：入口文件和输出文件的文件名、路径可以自定义，而不仅被限制使用系统规定的index.js、main.js之类，将会使开发更加灵活。
4. 使用 NPM Scripts 完成打包命令
直接使用命令行执行 webpack 命令难免显得有点繁琐和枯燥，我们可以使用 NPM Script 为打包命令创建“快捷键”。
在 package.json 文件中有一个 scripts 字段，我们在其中添加 build 字段，并为该字段赋值 webpack：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"lodash": "^4.17.10",
"webpack": "^4.16.3",
"webpack-cli": "^3.1.0"
}
}
现在，npm run build 命令可以用来代替我们之前使用的 npx webpack 命令：
$ npm run build
注意：在 scripts 字段中，我们可以引用本地的命令行工具包，就像我们使用 npx 访问的一样。
最终我们文件夹的目录结构如下：
webpack-demo
|- node_modules
|- /dist
|- index.html
|- main.js
|- /src
|- index.js
|- package.json
|- package-lock.json
|- webpack.config.js
Webpack 学习笔记（1） 开始的更多相关文章
- 【原】webpack学习笔记
之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...
- 更博不能忘——webpack学习笔记
webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...
- webpack学习笔记（二）-- 初学者常见问题及解决方法
这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...
- webpack学习笔记一：安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件
一 .webpack学习环境准备: 1:window系统 2:安装node.js 官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...
- Webpack学习笔记九 webpack优化总结
webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...
- Webpack学习笔记一：What is webpack
#,Loaders干嘛的,webpack can only process JavaScript natively, but loaders are used to transform other ...
- webpack学习笔记—webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...
- 【webpack学习笔记】a04-建立开发环境
开发环境就是在开发过程中为了方便配置的环境,生产环境就是开发完成即将上线的情况. 好了,说了句废话,切入正题. 在开发时,打包后的文件压缩成一团,报错调试的时候傻眼了有木有?每次做出修改需要到浏览器查 ...
- Webpack 学习笔记总结
Webpack安装 Linux系统默认已经安装了node&npm,但版本比较低,而且没法升级,可以重新下载Node然后通过软链接替换系统自带的node和npm; ln -s /path_to/ ...
- webpack学习笔记丁点积累
webpack是什么? https://webpack.js.org/concepts/ https://code.tutsplus.com/tutorials/introduction-to-web ...
随机推荐
- 爬虫入门六 总结 资料 与Scrapy实例-bibibili番剧信息
title: 爬虫入门六 总结 资料 与Scrapy实例-bibibili番剧信息 date: 2020-03-16 20:00:00 categories: python tags: crawler ...
- 【非原创】ZOJ - 4062 Plants vs. Zombies【二分】
题目:戳这里 题意:机器人走过一个花,可以给那个花浇水,给定步数下,问花的最小的最大能量值. 学习博客:戳这里 本人代码: 1 #include <bits/stdc++.h> 2 typ ...
- Gym 101480I Ice Igloos（思维乱搞）题解
题意:给个最多500 * 500的平面,有半径最多不为1的n个圆,现在给你1e5条线段,问你每条线段和几个圆相交,时限10s 思路: 因为半径<1,那么我其实搜索的范围只要在线段附近就好了.x1 ...
- μC/OS-III---I笔记4---软件定时器
软件定时器是在硬件定时器的基础上开发的,通过将一个硬件定时器进行分频及管理就可以的到多个软件定时器.他和时间管理共同组成了系统的时间管理大部分的内容.系统一开始的系统初始化函数OSInit函数内调用了 ...
- Install wx
Ubuntu 16.04: 由于是PY交易, 实际上是安装wxPython: pip install -U \ -f https://extras.wxpython.org/wxPython4/ext ...
- GitHub in depth
GitHub in depth GitHub 高级玩法 / 进阶教程 https://github.com/trending/dart?since=daily https://github.com/t ...
- React components render order All In One
React components render order All In One components render order / components lifecycle DOM tree ren ...
- SPC空投价值高达310万美金，生态建设者直呼真香！
市场上面有句名言:"人赚不到自己认知以外的财富",这在数字加密上也是共通的.早在本月12日,也就是前天,NGK官方发行的第N波利好---SPC侧链代币空投已经陆续发放了,NGK以及 ...
- 错误信息：...\output\project.axf: error: l6218e: undefined symbol usart1_confing (referred from main.o).
说明:此文档知识用来记录,顺便给大家作为参考,如有错误的地方请大家多多指正,在下内心定会感激不尽. 前言:关于这个问题,我曾花了一个下午在网上寻找,网上的说法五花八门,我办法试尽,但遍寻无果.由此我认 ...
- window下象MAC一样工作的工具
前面是MAC 后面是windows对应工具,只是做一个列表说明,具体使用自行百度 1.item2 vs Cmder 命令行 2.Homebrew vs Chocolatey 包管理器 3.Spotli ...