webpack系列-webpack初识与构建工具发展(一)
为什么需要构建工具?
- 转换 ES6 语法
- 转换 JSX
- CSS 前缀补全/预处理理器器
- 压缩混淆
- 图⽚片压缩
前端构建演变之路
- ant + YUI Tool
- grunt
- gulp、fis3
- webpack、rollup、parcel
为什么选择 webpack?
- 社区⽣生态丰富
- 配置灵活和插件化扩展
- 官⽅方更更新迭代速度快
初识webpack,简单的例子入手
安装
先确保你已经安装了 Node
其中检查node是否安装成功,使用node -v;检查npm的版本使用npm -v。
创建一个新的项目来开始我们的 webpack 之旅:
mkdir webpack-custom
cd webpack-custom
使用 npm init
(或者使用npm init -y表示默认配置都选择yes)来创建一个「package.json」文件用于管理项目版本和依赖,然后我们使用 npm安装webpack:
npm install webpack webpack-cli -D
webpack-cli 是使用 webpack 的命令行工具,在 4.x 版本之后不再作为 webpack 的依赖了,我们使用时需要单独安装这个工具。
检查是否安装成功:
mac系统:./node_modules/.bin/webpack -v
window系统:.\node_modules\.bin\webpack -v
安装成功之后,我们可以在项目的「package.json」文件中看到对应的 webpack 版本依赖:
"devDependencies": { "webpack": "^4.43.0", "webpack-cli": "^3.3.11" }
构建
安装完成之后,我们可以使用 npx webpack
命令来运行项目内安装的 webpack。
其中,我们可以使用如下命令执行一些操作:
- npx webpack --help:查看 webpack-cli 提供了哪些命令可用
- npx webpack --version:查看我们安装的版本
- npx webpack:运行构建
我们先添加两个简单的代码文件,「src/index.js」和「src/hello.js」,如代码:
index.js代码:
import { hello, log } from './hello.js';
log(hello);
hello.js代码:
export const hello = 'hello world'; export function log(message) { console.log(message); }
我们执行npx webpack会在src同级目录生成一个dist/main.js文件,这就是使用webpack构建的结果,当然构建我们也可以使用如下命令执行:.\node_modules\.bin\webpack
,我们也可以npm script运行webpack,也即是把构建命令写到 package.json
的 scripts
中:
"scripts": { "build": "webpack" },
然后我们就可以使用npm run build命令构建webpack了。
配置文件
接下来我们尝试创建一个 webpack 的配置文件,在我们项目的根目录下创建一个「webpack.config.js」的文件:
'use strict'; var path = require('path'); module.exports = { mode: 'development', // 指定构建模式 entry: './src/index.js', // 指定构建入口文件 output: { path: path.join(__dirname,'dist'), // 指定构建生成文件所在路径 filename: 'bundle.js' // 指定构建生成的文件名 }, }
然后我们执行npm run build,就会生成「dist/bundle.js」文件,这说明配置文件生效了。
本地开发
在日常开发中,我们不可能每次修改一次代码就执行一次构建,我们需要一个方便本地开发的工具,和 webpack 配套的则是 webpack-dev-server。同样的,我们使用 npm 来安装:
npm install webpack-dev-server -D
同样地,我们在「package.json」文件的 scripts
字段中添加一个启动开发服务器的命令,如:
"scripts": { "build": "webpack", "serve": "webpack-dev-server" }
这个时候我们还需要一个「index.html」文件作为页面的基础,webpack 暂时没有能力来处理 html 文件(需要通过插件来处理),我们先在 dist 目录下创建一个「index.html」文件:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>webpack-demo</title> </head> <body> <script type="text/javascript" src="bundle.js"></script> </body> </html>
同时,在配置文件中添加指定开发服务器启动路径的配置:
devServer: { contentBase: path.resolve(__dirname, 'dist') // 开发服务器启动路径 }
接着再执行 npm run serve
,便可以成功启动 webpack-dev-server 了,默认使用的端口是 8080,用浏览器打开 http://localhost:8080/
,便可以访问到我们刚才创建的 html 文件了,打开控制台就可以看到前边的 js 代码打印出来的 hello world 了。
原文地址:https://www.cnblogs.com/moqiutao/p/12920019.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 大多数人都不懂的搜索引擎技巧,掌握这几点,提升你的工作效率
- 如何使用Flutter实现58同城中的加载动画详解
- Android Gradle开发指南详解
- Hexo+Github搭建个人博客:Hexo添加分类标签
- Android自定义酒店日期选择器
- Android实现apk插件方式换肤的实例讲解
- 基于Spark Graphx实现ID-Mapping
- Nginx keepalived一主一从高可用,手把手带你一步一步配置!
- Android实现自动轮询的RecycleView
- Android自定义钟表特效
- Android MediaPlayer 音频倍速播放 调整播放速度问题
- Android 简单实现倒计时功能
- Android Canvas自定义实现时钟效果
- 虚拟机kali安装vmtools
- Android动画学习笔记之补间动画