webpack之初体验

目前webpack的已经很成熟，但是小弟还是想记录一下学习的历程，不管是对于新手还是对于自己。

起步

新建一个文件夹，大概是这个样子的

额... 是不是觉得很简单？是的就如标题就是这么简单！嘿嘿，其实不是的 webpack之所以称为自动化打包工具你得有文件，
假设一个场景：现在有三个javascript文件，我要打包成一个文件怎么做呢？
比如是这样的：

这边涉及到两个知识点就是：ES6的 export default 和 import 如果看不懂的话你就大概理解成就是模块之间的引用就成了，反正以后用的时间长了也就明了了

运行

直接打开你的index.html 你会发现会发现出现这样的

这是在告诉你浏览器不认识你写的import的语法，（虽然ES6已经普及很长时间但是还是有的语法还是很多的的兼容）

webpack登场

新建一个 webpack.config.js 文件，为什么叫这个名字呢？因为你不叫这个名字会报错这是webpack默认的文件名称（当然这是可以改变的）
大概就是这个样子的

这样的话webpack最基本的配置已经配置完毕了，然后我们初始一下

然后我安装webpack
这个要说明一下 cnpm i -D webpack 里面都是简写cnpm 是手淘的npm；i 就是 install； -D就是开发环境；
我用的是cnpm 就是俗称的手淘滤镜国内吗还是这个比较快的当然你能翻墙的话还是用正版的npm 比较好毕竟什么东西都是原装的好~

就会在文件里面得到一个package.json文件，在里面的设置

然后我命令行走起来

还记得我们的dev 怎么设置的吗？对的就是在配置文件里面的dev命令然后运行的webpack，这样的话webpack 就会在文件里面找webpack.config.js的文件当然你可以改变他的名字比如

就可以了打包的文件你可以找到相应的路径引用就可以

webpack之初体验相关推荐

webpack从入门到精通（一）初体验
1. webpack简介 1.1 webpack是什么 webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler). 在 webpack 看来, 前端的所有资源文件(j ...
webpack 初体验
翻墙看视频教程:https://www.youtube.com/watch?v=TaWKUpahFZM 看了教程,自己练习练习,记个笔记,我把教程的例子划分成5个独立小demo,加强练习,也方便梳理思 ...
SSR初体验-结合Vue3全家桶
SSR初体验基础搭建安装依赖先开启一个服务器 let express = require("express");let server = express();server.g ...
苹果电脑安装python3密码_mac系统安装Python3初体验
前沿对于iOS开发不要随便拆卸系统自带的Python,因为有很多 library 还是使用 Python2.7. 1 安装Xcode 1.1 App Store 搜索Xcode 并安装 1.2 安装 ...
MapReduce编程初体验
需求:在给定的文本文件中统计输出每一个单词出现的总次数第一步: 准备一个aaa.txt文本文档第二步: 在文本文档中随便写入一些测试数据,这里我写入的是 hello,world,hadoop he ...
小程序缩放_缩放流星应用程序的初体验
小程序缩放 by Elie Steinbock 埃莉·斯坦博克(Elie Steinbock) 缩放流星应用程序的初体验 (First Experiences Scaling a Meteor Ap ...
wxWidgets刚開始学习的人导引（3）——wxWidgets应用程序初体验
wxWidgets刚開始学习的人导引全文件夹 PDF版及附件下载 1 前言 2 下载.安装wxWidgets 3 wxWidgets应用程序初体验 4 wxWidgets学习资料及利用方法指导 5 ...
用鸿蒙跑了个 “hello world”！鸿蒙开发初体验
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 来源 | https://my.oschina.net/u ...
Windows Embedded Standard开发初体验(二)
支持Silverlight的Windows Embedded Standard 好了,完成安装之后,我们就可以来做Windows Embedded Standard的第一个操作系统镜像了.在开始菜单中 ...
深度探索Hyperledger技术与应用之超级账本初体验（附部署代码）
2019独角兽企业重金招聘Python工程师标准>>> 本章零基础地介绍了如何快速体验超级账本搭建的区块链网络,我们先绕过了比较复杂的初始化配置,用官方提供的fabric-sampl ...

webpack之初体验

起步

运行

webpack登场

webpack之初体验相关推荐

最新文章

热门文章