webpack超超初级入门

首先在全局进行安装
npm install -g webpack
安装到项目目录
npm install --save-dev webpack
初始化一个package.json文件，可以在其中写入项目依赖模块，以及自定义脚本任务。
npm init
根据教程给的例子一共创建两个文件夹
app文件夹---存放一个main.js作为入口文件，主要调用其他的js模块，其他js均作为模块存在
模块化写法一般为module exports=function（）{}用来暴露函数也可以当做一个对象进行暴露
模块化引入可以用require来将模块引入，需要实例化执行函数
puclic文件夹---存放index.html作为网页显示
继续在控制台执行webpack命令：webpack ./app/main.js(入口文件) ./public/bundle.js(打包出来的文件)
现在打开public文件夹会发现多一个bundle.js index.html引入bundle.js就会执行你在app文件夹下的js文件命令了
以上为webpack低级用法

利用webpack配置文件进行文件打包操作以及写入插件和加载器。
创建文件：webpack.config.js 前端工作者一般会用config.js进行配置，比如最近的项目需要针对不同的危险级别进

行颜色配置，我们可以在color.config.js这样写一个对象colorConfig：{sample：“green”，warn：‘yellow’，

‘danger’：‘red’}当我们引入配置文件后，可以从后台拿到sample，warn，danger这三个字段，我们统一用

colordata表示，这时候我们就可以给我们需要的字段添加style颜色 id.style.fontSize=colorConfig[colordata]

回到webpack，webpack的配置文件则比我写的功能多得多，首先将配置内容进行暴露
module.exports = {
entry:__dirname+"/app/main.js" //需要打包时的入口文件
output:{
path:__dirname+"/public",//输出路径__dirname指的是当前配置文件的绝对路径，是一个node.js的变量
filename:"bundle.js"//输出文件名
}
}
将写好的配置文件置于根目录下，控制台执行webpack命令,执行后，webpack会直接解读配置文件暴露出来的对象，并

且自动打包在public目录下生成bundle.js

利用npm start命令更便捷的操作webpack，npm主要是针对package.json中写入的命令进行解析执行的，所以我们开始

学习一些简单的命令，写入package.json中
（1）用npm start代替webpack命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"start":"webpack"//只需要写入这句就可以啦
},
start是一个特殊的命令，如果想用其他代替start，比如npm go那么需要写成npm run go

webpack强大的功能出现！！！
一·Source Maps (资源轮询?)可以让编译后的文件可读性更高。
首先需要注意的是，只要关于webpack操作的都添加到webpack配置文件中，不要把package.json与config搞混
二. webpack server 构建webpack服务器，实时监测你的代码
这是一个插件，所以需要npm来下载到你的module中
命令行执行命令:npm install --save-dev webpack-dev-server
如果运行出错，有两处最有可能出现的错误，其中一个是在package.js中，看看是否忘记增加逗号，另一个错误就是

执行命令是否写错。
下载有些慢，需要等待，这时候我们可以阅读下devServer的api，在配置文件下写入
devServer:{
contentBase:"./public",//本地服务器加载的页面所在的目录
historyApiFallback:true,//不跳转
inline:true//实时刷新
}
最后运行下npm start 试试新加入的功能，为什么我的打开浏览器localhost:8080不好用！！！！我们先不管，下一

步先，
我今天知道啦：由于我们是用npm start来执行webpack打包，所以我们需要在package.json里面

将“start”:"webpack"加点料 “start”：“webpack-dev-server --inline”我让我们试一下、、
哈哈成功了
三·loaders继续
Loaders据说是webpack最牛的功能------=之一。主要功能是将es6,7，或者scss，sass都转成浏览器可以识别的文件
Loaders需要单独安装，并且在配置文件的module关键字下配置。
教程中给了一个转换json的loader
首先控制台下载安装npm install --save-dev json-loader
然后在配置文件的module下添加
loaders：[
{
test:/\.json$/,
loader:"json"
}
]
只要点击保存，页面也会随之变化。
下面教程说的是关于react的，我只弄过vue，个人感觉Vue更简单，创建一个Vue脚手架项目只有四个命令
1你得有node
2npm install -g vue-cli
3vue init webpack yourprojectname
4cd yourprojectname
5npm install
6npm run dev
开发起来很简单，个人感觉比react容易的多
略过恶心人的Babel让我们接着看看他的教程，他讲的都是react，我依然推荐vue，哈哈哈。

额，后面讲的东西如果你使用Vue脚手架的话，个人感觉了解一下就好，

个人github账号，多点星星~

https://github.com/kindLee-alasikoo

webpack超超初级入门相关推荐

超强、超详细Redis入门教程【转】
这篇文章主要介绍了超强.超详细Redis入门教程,本文详细介绍了Redis数据库各个方面的知识,需要的朋友可以参考下 [本教程目录] 1.redis是什么 2.redis的作者何许人也 3.谁在使用r ...
从图像超分辨率快速入门pytorch
文章目录前言正文单一图像超分辨率(SISR) 训练4要素网络模型数据训练 DataLoader 前言最近又开始把pytorch拾起来,学习了github上一些项目之后,发现每个人都会用不 ...
超详细Redis入门教程——Redis命令（下）
前言本文小新为大家带来超详细Redis入门教程--Redis命令相关知识,具体内容包括简单动态字符串 SDS,集合的底层实现原理,BitMap 操作命令,HyperLogLog 操作命令,Geo ...
超详细Redis入门教程——Redis命令（上）
前言本文小新为大家带来超详细Redis入门教程--Redis命令(上) 相关知识,具体内容包括Redis 基本命令,Key 操作命令,String 型 Value 操作命令,Hash 型 Valu ...
超详细Redis入门教程——Redis概述
前言本文小新为大家带来超详细Redis入门教程--Redis概述相关知识,具体内容包括Redis简介,Redis的用途,Redis的特性,Redis的IO模型(包括:单线程模型,混合线程模型,多 ...
超详细Redis入门教程——Redis 的安装与配置
前言本文小新为大家带来超详细Redis入门教程--Redis 的安装与配置相关知识,具体内容包括Redis 的安装,连接前的配置,Redis 客户端分类(包括:命令行客户端,图形界面客户端,Ja ...
ECharts实现数据可视化超详细基础入门教程
ECharts实现数据可视化超详细基础入门教程 ECharts介绍 ECharts官网:https://echarts.apache.org/zh/index.html ECharts是一款基于Jav ...
手把手讲解超详细python入门游戏项目‘打外星飞船’（二）
手把手讲解超详细python入门游戏项目'打外星飞船'(二) 上次我们在(一)中创建了游戏的背景,现在我们这里将要实现用键盘控制飞船的移动.射击子弹,但是在此之前我们还有一个非常重要的部分–重构. 重 ...
手把手讲解超详细python入门游戏项目‘打外星飞船’（四）
手把手讲解超详细python入门游戏项目'打外星飞船'(四) 在经过创立屏幕.飞船移动和设置子弹,我们这里开始设置外形人的创建和移动.我们这里主要的任务是:创建一众外星人让它们充满屏幕,让他们向下和两 ...
手把手讲解超详细python入门游戏项目‘打外星飞船’（五）
手把手讲解超详细python入门游戏项目'打外星飞船'(五) 这是最后一个项目了,前面我们讲了整个游戏页面的控制.飞船.子弹.外星人的创建,这里我们讨论一下子弹射杀外星人和整个游戏的结束,我们这里的文 ...

webpack超超初级入门

webpack超超初级入门相关推荐

最新文章

热门文章