现在依旧记得第一次看到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 项目(一)基础搭建项目的更多相关文章

  1. webpack4.x 从零开始配置vue 项目(三)

    目标 babel 转换ES6 语法 postCss 增强css功能,如自动增加前缀 vue-loader 解析vue 文件 实现基本的vue项目开发环境,打包等 Babel 由于浏览器对es6语法兼容 ...

  2. webpack4.x 从零开始配置vue 项目(二)基础搭建loader 配置 css、scss

    序 上一篇已经把基本架子搭起来了,现在来增加css.scss.自动生成html.css 提取等方面的打包.webpack 默认只能处理js模块,所以其他文件类型需要做下转换,而loader 恰恰是做这 ...

  3. 使用vue-cli(vue脚手架)快速搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目.这篇文章将会从实操的角度,介绍整个搭建的过程. 1. 避坑前言 其实这次使用vue-cli的 ...

  4. 【vue】---- 新版脚手架搭建项目流程详解

    一.概述 本文将介绍vue项目完整的搭建流程,在使用新版本的脚手架基础上,进行了一系列的完善和配置.主要内容如下: 1.项目初始化 安装脚手架 创建项目 项目结构 2.项目搭建配置 引入第三方插件 路 ...

  5. vue cli4.0 快速搭建项目详解

    搭建项目之前,请确认好你自己已经安装过node, npm, vue cli.没安装的可以参考下面的链接安装. 如何安装node? 安装好node默认已经安装好npm了,所以不用单独安装了. 如何安装v ...

  6. Vue开篇之Vue-cli搭建项目

    介绍 Vue.js是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 第一步:安装node ...

  7. Webpack4、iView、Vue开发环境的搭建

    导读 项目使用了 yarn ,一个快速.可靠.安全的依赖管理工具.yarn 是一个类似于npm的包管理工具,它是由 facebook 推出并开源,它在速度,离线模式,版本控制的方面具有独到的优势.此项 ...

  8. 脱离脚手架来配置、学习 webpack4.x (一)基础搭建项目

    序 现在依旧记得第一次看到webpack3.x 版本配置时候的状态  刚开始看到这些真的是一脸懵.希望这篇文章能帮到刚开始入门的同学. webpack 是什么? webpack是一个模块化打包工具,w ...

  9. Maven多模块,Dubbo分布式服务框架,SpringMVC,前后端分离项目,基础搭建,搭建过程出现的问题

    现互联网公司后端架构常用到Spring+SpringMVC+MyBatis,通过Maven来构建.通过学习,我已经掌握了基本的搭建过程,写下基础文章为而后的深入学习奠定基础. 首先说一下这篇文章的主要 ...

随机推荐

  1. Kubernets二进制安装(7)之部署主控节点服务--apiserver二进制安装

    kube-apiserver集群规划 主机名 角色 IP地址 mfyxw30.mfxyw.com kube-apiserver主 192.168.80.30 mfyxw40.mfyxw.com kub ...

  2. LEETCODE - 1181【前后拼接】

    class Solution { public: string gethead(string str){//获取头单词 string ret = ""; int strlen = ...

  3. 9.[完]其他常用的rabbitmq的参数和设置

    作者 微信:tangy8080 电子邮箱:914661180@qq.com 更新时间:2019-08-12 20:42:25 星期一 欢迎您订阅和分享我的订阅号,订阅号内会不定期分享一些我自己学习过程 ...

  4. c++ 输出文件夹(不包括子文件夹)中后缀文件

    参考:_finddata_t结构体用法 - 麒麒川的博客 - CSDN博客 准备知识部分: MessageBox MessageBox function (winuser.h) | Microsoft ...

  5. c# xaml (1)

    原文:https://www.wpf-tutorial.com/xaml/what-is-xaml/ vs2017 新建 wpf 项目,在解决方案里会自动创建MainWindow.xaml文件 1.新 ...

  6. Springboot 基本认识

    不管是 spring cloud alibaba 还是 spring cloud netflix,都 是基于 springboot 这个微框架来构建的,所以我希望花一 点时间来讲一下 springbo ...

  7. HDU 6155 Subsequence Count(矩阵 + DP + 线段树)题解

    题意:01串,操作1:把l r区间的0变1,1变0:操作2:求出l r区间的子序列种数 思路:设DP[i][j]为到i为止以j结尾的种数,假设j为0,那么dp[i][0] = dp[i - 1][1] ...

  8. msfconsole web后门

    一.PHP后门 在meterpreter中有一个名为PHP meterpreter的payload,利用这个可以成功反弹.步骤如下: 1. 使用msfvenom 创建一个webshell.php 2. ...

  9. Introduction to JavaScript Source Maps

    下载jquery时候发现:jquery.min.map  这什么鬼呀? https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/core.js http ...

  10. swiper & swiper slider

    swiper & swiper slider mobile swiper https://idangero.us/swiper/ https://idangero.us/swiper/get- ...