前言

  • 公司据说要搞前后端分离，趁这两天项目完成的差不多，抓紧时间学习一下前端知识
  • 现在流行前端项目工程化，那么第一个问题就是如何创建工程(项目)，第一次玩webpack

通过 NPM 创建项目

# 创建项目

npm init -y
  • -y 在这里是表示快速新建。使用 npm init 来初始化，终端会一步一步提示输入 name、version、description 等项目 meta 信息，通过使用 flag -y 跳过所有的 prompt，一路到底完成默认值的初始化。
  • 完成后 NPM 会自动在目录中创建 package.json 文件,内容如下
{

  "name": "vue-demo1",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "node_modules/.bin/webpack"

  },

  "keywords": [],

  "author": "",

  "license": "ISC"

}

Webpack 基础配置

安装 Webpack
# 安装 Webpack

npm install webpack --save-dev
  • --save 在是让 NPM 将这个依赖写入到 package.json 中
  • -dev 的意思则是，这不只是一个项目依赖，而是一个开发中需要的依赖。
  • 淘宝的NPM镜像
  • 安装完成后,在package.json中增加如下内容:
  "devDependencies": {

    "webpack": "^4.5.0"

  }
最基本的文件结构
  • 在index.js中添加测试代码
alert('Hello World!');
Webpack 中最基本的打包
  • Webpack 提供了很多选项供我们在开发的时候灵活调用满足自己的需求，最基本的是 entry，output, 前者指定了文件的入口，而后者指定 Webpack 在编译了入口文件后的打包文件（bundle）放在哪里，比如入口是 src/ 目录下的 app.js 文件，而打包完成的文件，希望可以放到 dist/ 目录下，并且命名为 bundle.js，那我们在终端中就可以运行：
#  最基本的打包方式

#Webpack4.5之前

./node_modules/.bin/webpack src/js/index.js build/bundle.js

# Webpack4.5之后认为后面的文件是需要打包的文件,所以命令改为如下,同时会生成一个dist/main.js压缩之后的文件

./node_modules/.bin/webpack src/js/index.js
  • 为什么不直接使用 webpack 命令：
# Webpack 最基本的打包命令

webpack src/js/index.js
  • npm install webpack --g 全局安装就可以每次都轻松使用 webpack 直接作为命令，而不需要输入上面那一长串。但是！在绝大多数情况下都不要进行全局安装，很可能在不通的项目里会需要的不同版本的 Webapck，全局唯一的安装版本很可能会造成很多未知的问题。而且之后会提到配置 NPM Script，通过那里，执行 webpack 命令也会很方便，也更加符合最佳实践。
检查npm全局安装的包
# 检查 npm 全局已经安装的

npm list -g --depth=0

# 如果已经安装了，比如说 webpack，卸载：

npm uninstall -g webpack
通过配置文件进行打包
  • 我们在实际项目中不这么干，而是通过 配置文件 对 Webpack 进行配置。在项目的根目录创建相关配置文件 Webpack.config.js 文件，如下：
# 创建 webpack.config.js 作为 webpack 的配置文件

touch webpack.config.js
  • 文件内容如下:
let Webpack = require('webpack');

let path = require('path');

module.exports = {

    mode: 'development',

    entry: './src/js/index.js',

    output: {

        path: path.resolve(__dirname, 'build'),

        filename: 'index.js'

    }

};
  • 该文件的主要作用是告诉webpack我们项目的入口文件、出口文件和运行环境
  • 如果没有该配置文件,那么之前所运行的命令都会有一个警告,至少我在使用4.5.0这个版本是这样
  • 我们需要在配置文件中指明我们使用的模式(或者说环境)即mode,它支持的取值"production"生产模式,"development":开发模式,官方说明

编写HTML

  • index.html中的代码如下
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Webpack Vue</title>

</head>

<body>

    <script src="build/index.js"></script>

</body>

</html>
  • 注意引入js的路径是我们编译之后的路径

老规矩源代码上传Github备份：地址

Webpack构建前端项目的更多相关文章

  1. 如何减少 webpack 构建 vue 项目的编译时间

    背景 我司前端项目框架主要是 vue,多个项目聚集在同一个仓库下,共用公共组件.页面.工具函数等.基于以上前提,我们需要对不同的项目分别进行打包,并解决单页应用强制刷新引起的问题,所以没有使用 vue ...

  2. webpack构建vue项目（配置篇）

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  3. 在visual code的debugger for chrome中调试webpack构建的项目

    一直使用chrome中内置的调试器, 感觉世界那么美好, 自从学了react之后,使用visual code作为编辑器, 它提供了很多插件, 其中就包括debugger for chrome, 一款使 ...

  4. vue 构建前端项目并关联github

    这几天尝试用node开发一个网站,后端的接口已经初步开发完成,现在开始构建前端的项目,记录下过程,在学习下吧. 用vue-cli 构建项目,myproject.(构架过程略过) 每次在本地构建项目后和 ...

  5. 用Webpack构建Vue项目

    开始之前,需要安装node环境.(安装过程在此就不啰嗦了)   1.创建基本结构 首先我们要创建一个空文件夹(我这里叫todos,你可以随便命名)作为项目的根目录. 创建一个没有任何依赖关系的pack ...

  6. jenkins自动构建前端项目(window,vue)

    我们把一个多人协作的vue前端项目发布服务器,一般要经过以下步骤: git更新最新的代码 构建项目 把构建后的代码上传到服务器 如果用jenkins来构建的话,只需要点击一次构建按钮,就可以自动完成以 ...

  7. 如何使用Docker构建前端项目

    原文链接 Docker单独部署前端项目和Node项目是非常便捷的,在这里分享一下Docker的使用,主要聊聊它的部署实践.(我是window10专业版安装Docker) Docker Docker是一 ...

  8. 用gulp替代fekit构建前端项目

    https://segmentfault.com/a/1190000003060016 离开qunar有一个多月了,在离开的时候就决定不再用fekit.做出这个决定并不是因为fekit不好,恰恰相反, ...

  9. 如何使用webpack打包前端项目

    webpack概述 随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而 webpack就是用于将前端各种文件打包起来. 一个简单的webpack应该包含以下几个概念 · 入口起点 · ...

随机推荐

  1. Kafka和RabbitMQ 对比

    1)  Kafka成为业界大数据松耦合架构,异步,队列 特点:吞吐量高50m/s. Kafka和RabbitMQ都是MQ机制,它差异 Kafka作为大数据产品,可以作为数据源,也可以作为结果数据中转 ...

  2. 二分查找总结及部分Lintcode题目分析 2

    Search in a big sorted array,这个比之前的二分法模板多了一个很不同的特性,就是无法知道一个重要的条件end值,也是题目中强调的重点 The array is so big ...

  3. java设计模式系列1-- 概述

    准备开始写些设计模式的随笔,这是第一篇,概述主要回顾下六大原则 先用轻松和谐的语言描述下这6个原则: 单一职责 每个类甚至每个方法都只要做自己分内的事,不要背别人的锅,也就是功能要分类,代码要解耦 里 ...

  4. 【学术篇】NOIP2016 D1T3 luogu1850换教室

    题目链接:点击这里献出你宝贵的时间(是用来做题不是捐赠Emmmm).. Emmmm我太弱了= = 做完这题我觉得我应该去打星际..这题怎么就有重边了呢.. 这题就是一道期望= =当时考场上好像完全不会 ...

  5. 用hexo在本地搭建自己的博客

    参考路径:https://blog.csdn.net/Hoshea_chx/article/details/78826689

  6. 廖雪峰Java12maven基础-2maven进阶-1使用插件

    1.maven的Lifecycle,Phase和Goal: 使用maven构建项目就是执行Lifecycle 执行Lifecycle就是按顺序执行一系列Phase 每执行一个Phase,都会执行该Ph ...

  7. JOIN方法也是连贯操作方法之一

    JOIN方法也是连贯操作方法之一,用于根据两个或多个表中的列之间的关系,从这些表中查询数据. 大理石平台规格 join通常有下面几种类型,不同类型的join操作会影响返回的数据结果. INNER JO ...

  8. 《你不知道的javascript》上卷笔记整理(一)

    函数声明和变量声明都会被提升,但函数声明会被提升到普通变量前,而 var foo = function bar(){}; 赋值操作不会被提升. 闭包: 基于词法作用域(作用域是根据名称查找变量的一套规 ...

  9. MYSQL获取同时关注了某两个（或者N个）用户的用户

    使用redis的set类型数据的话会比较容易,但是业务场景就是在mysql里面,因此也需要思考解决方法 表结构: CREATE TABLE `table_name` ( `id` ) unsigned ...

  10. Sping中的AOP

    AOP(Aspect Oriented Programming)面向切面编程,什么是切面.形象的说,我们编写的代码都是一种有序的流程,比如产品管理,订单管理,而切面就是垂直于这些流程的. 比如日志服务 ...