webpack4.x 从零开始配置vue 项目(一)基础搭建项目
序
现在依旧记得第一次看到webpack3.x 版本配置时候的状态 刚开始看到这些真的是一脸懵。希望这篇文章能帮到刚开始入门的同学。
webpack 是什么?
webpack是一个模块化打包工具,webpack 通过入口分析项目结构,找到JavaScript模块以及一些不能直接在浏览器上运行的语言、语法等 如(scss、ts、es6+等),并将其打包成可以直接在浏览器运行的js,以及压缩、加密、按需加载等。
相关概念
- Entry:入口,webpack执行构建的第一步将从Entry开始,可理解为输入
- Module:模块,在webpacl中一切皆为模块,一个模块对应一个文件,webpack会从配置的Entry开始递归找出所有依赖的模块
- Chunk:代码块,一个chunk由多个模块组合而成,用于将代码合并和分割
- Loader:模块转换器,用于把模块原内容按照需求转换为需要的新内容
- Plugin:扩展插件,在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果和想要做的事情
- Output:输入结果,在webpack经过一系列处理并得到最终想要的代码然后输出结果
- runTime:在浏览器运行时,连接模块的连接器
- manifest:webpack 编译时记录所有模块的详细信息的数据集合(连接器来这里查询具体的模块)
环境搭建
1、先用npm初始化一个项目,得到 package.json 文件
1 npm init -y 或者
2 npm init // 这个要填写一些信息 如 名称 邮箱 版本 等等
2、安装webpack 4 将CLI 独立出来了,所以需要安装两个包
1 npm install webpack webpack-cli -D
webpack-cli 我觉得全局安装比较方便,命令行全局安装不会造成版本冲突之类的。根据官网的api,现在我们可以进行打包了。
但是为了更加方便的打包我们需要用到npm script 功能(简单的说就是临时把node_modules 路径加到系统环境变量)。
先建立好相关文件如 webpack.config.js
在package.json scripts 中加入
1 "build:dev": "webpack --mode development"
在webpack.config.js 中导出一个最简单的对象给webpack
1 'use strict'
2 const path = require('path')
3
4 // path
5 function resolve (dir) {
6 return path.join(__dirname, dir)
7 }
8
9 module.exports = {
10 mode: 'development',
11 entry: {
12 app: './main.js'
13 },
14 output: {
15 filename: '[name]-[hash].js',
16 path: path.resolve(__dirname, 'dist'),
17 publicPath: './'
18 }
19
20 }
在窗口执行
1 npm run build:dev
不出问题,应该是打包成功了。
源码
https://github.com/ben-Run/webpack-learn
要是帮到你了可以点下star, 哈哈~~~
webpack4.x 从零开始配置vue 项目(一)基础搭建项目的更多相关文章
- webpack4.x 从零开始配置vue 项目(三)
目标 babel 转换ES6 语法 postCss 增强css功能,如自动增加前缀 vue-loader 解析vue 文件 实现基本的vue项目开发环境,打包等 Babel 由于浏览器对es6语法兼容 ...
- webpack4.x 从零开始配置vue 项目(二)基础搭建loader 配置 css、scss
序 上一篇已经把基本架子搭起来了,现在来增加css.scss.自动生成html.css 提取等方面的打包.webpack 默认只能处理js模块,所以其他文件类型需要做下转换,而loader 恰恰是做这 ...
- 使用vue-cli(vue脚手架)快速搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目.这篇文章将会从实操的角度,介绍整个搭建的过程. 1. 避坑前言 其实这次使用vue-cli的 ...
- 【vue】---- 新版脚手架搭建项目流程详解
一.概述 本文将介绍vue项目完整的搭建流程,在使用新版本的脚手架基础上,进行了一系列的完善和配置.主要内容如下: 1.项目初始化 安装脚手架 创建项目 项目结构 2.项目搭建配置 引入第三方插件 路 ...
- vue cli4.0 快速搭建项目详解
搭建项目之前,请确认好你自己已经安装过node, npm, vue cli.没安装的可以参考下面的链接安装. 如何安装node? 安装好node默认已经安装好npm了,所以不用单独安装了. 如何安装v ...
- Vue开篇之Vue-cli搭建项目
介绍 Vue.js是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 第一步:安装node ...
- Webpack4、iView、Vue开发环境的搭建
导读 项目使用了 yarn ,一个快速.可靠.安全的依赖管理工具.yarn 是一个类似于npm的包管理工具,它是由 facebook 推出并开源,它在速度,离线模式,版本控制的方面具有独到的优势.此项 ...
- 脱离脚手架来配置、学习 webpack4.x (一)基础搭建项目
序 现在依旧记得第一次看到webpack3.x 版本配置时候的状态 刚开始看到这些真的是一脸懵.希望这篇文章能帮到刚开始入门的同学. webpack 是什么? webpack是一个模块化打包工具,w ...
- Maven多模块,Dubbo分布式服务框架,SpringMVC,前后端分离项目,基础搭建,搭建过程出现的问题
现互联网公司后端架构常用到Spring+SpringMVC+MyBatis,通过Maven来构建.通过学习,我已经掌握了基本的搭建过程,写下基础文章为而后的深入学习奠定基础. 首先说一下这篇文章的主要 ...
随机推荐
- LINUX - openssl学习
参考链接: https://www.cnblogs.com/AloneSword/p/4656492.html
- 网络协议 & 协议体系结构模型
基本知识概述 网络协议是什么? 为进行网络中的数据交换,而建立的规则(约定),就称为网络协议 网络协议的三个组成要素? 语法:数据与控制信息的结构或格式 语义:发出何种控制信息,完成何种动作,作出何种 ...
- zzuli-2266 number
题目描述 某人刚学习了数位DP,他在某天忽然思考如下问题: 给定n,问有多少数对<x, y>满足: x, y∈[1, n], x < y x, y中出现的[0, 9]的数码种类相同 ...
- GreenSock & SVG Animation
GreenSock & SVG Animation refs https://greensock.com/ https://greensock.com/learning/ GSAP https ...
- leetcode best solutions
leetcode best solutions how to learning algorithms form the leetcode best solutions https://leetcode ...
- auto skip function args
auto skip function args https://repl.it/@xgqfrms/auto-skip-function-args "use strict"; /** ...
- push notifications
push notifications https://developers.google.com/web/fundamentals/push-notifications/ Push API https ...
- js 创建XML
// 创建xml数据 let doc = document.implementation.createDocument('', 'root', null); // 创建一个文档 let root =d ...
- Dart 编写Api弃用警告
例如body2在以后的版本将被bodyText1代替 @Deprecated( 'This is the term used in the 2014 version of material desig ...
- NGK公链:夯实基础设施 实现产业大规模应用
当前,区块链已经成为全球技术角逐的前沿,大国及科技巨头竞相在该领域布局,引导区块链服务实体经济,激发市场经济活力.据市场相关研究机构预测,2020年,基于区块链的业务将达到1000亿美元. 对于区块链 ...