一 、webpack学习环境准备：
1：window系统
2：安装node.js 官方网址
下载好后下一步下一步安装即可
安装步骤略过.......
3：nrm的安装
打开cmd命令控制台 输入：npm i nrm -g （全局安装nrm包）
安装好后使用 nrm ls 查看
使用nrm use 镜像地址名称
注意：nrm只是提供了几个常用的下载包的URL地址。最终的装包工具还是npm或者cnpm工具，比如后面安装webpack包：cnpm install -g webpack 就会从nrm中带* 的地址中去下载。
4:安装cnpm 安装包工具（以安装webpack或者webpack-dev-server 我都使用cnpm来安装不适用npm安装）
执行命令：npm i cnpm -g （全局安装）
二、webpack 简单介绍
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。
中文官网：https://webpack.css88.com/
webpack 安装
执行 cnpm install -g webpack 命令全局安装
执行 npm install --save-dev webpack-cli
执行 webpack -v 查看版本号（说明安装成功了。）
三、结合简单案例
开发工具为 Visual Studio Code
案例初始目录结：根目录 webpack 里面有dist 和src两个文件夹 src文件夹里创建一个html和js文件
index.html代码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack-demo</title>
<!-- <script src="./index.js"></script> -->
<!-- 在这里我们就不再直接引用main.js文件了 -->
<script src='../dist/bundle.js'></script>
</head> <body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
<li>这是第10个li</li>
<li>这是第11个li</li>
<li>这是第12个li</li>
<li>这是第13个li</li>
<li>这是第14个li</li>
<li>这是第15个li</li>
<li>这是第16个li</li>
<li>这是第17个li</li>
<li>这是第18个li</li>
<li>这是第19个li</li>
<li>这是第20个li</li>
</ul>
</body> </html>
main.js代码
// 导入jQuery ES6语法
import $ from 'jquery' $(function () {
// 页面li各行变色
$('li:odd').css('backgroundColor', 'blue');
$('li:even').css('backgroundColor', function () {
return '#' + 'D97634'
});
});
这时候运行会报语法错误
因为ES6的语法浏览器解析不了所以报错。
这时候改用到webpack上场了...................................
1:初始化一下项目执行：npm init -y
这时候项目中就会多一个package.json文件
2：以上代码中需要用到jquery所以要在控制台中安装jQuery 执行：npm i jquery -S
这时候项目中会创建一个node_modules文件夹，这里就是一些js文件
执行webpack命令
.\src\index.js：要执行的文件路径
.\dist\bundle.js：执行完成后存放的路径
这时候dist文件家中就会多个bundle.js文件
这时候在预览html就可以看到效果了。。。。
如果js中代码修改了，就要手动在此执行打包命令才会生效。
注意如果上面安装或者打包出现错误了参考一下：webpack打包The 'mode' option has not been set,错误提示
四、webpack执行命令打包命令配置
在项目根目录中创建一个webpack.config.js文件
内容如下：
const path =require('path')
// 通过Node模块操作，向外面暴露一个配置对象
module.exports={
entry:path.join(__dirname,'./src/main.js'),// 打包文件
output:{
path:path.join(__dirname,'./dist'),// 打包好的文件存放地址
filename:'bundle.js' // 打包好文件的文件名
},
mode: 'development' // 设置mode
}
以后在执行大包命令就没那么反锁了： webpack .\src\index.js .\dist\bundle.js 直接输入 webpack就完成打包了。
五、webpack-dev-server 自动打包编译
六、webpack-dev-server常用命令
--open:当在命令行执行 npm run dev 自动开启网页
--port 9000 修改访问端口号
--contentBase src ：托管的根目录
--hot ：热启动 ,不会立即跟新，而是以打补丁方式只打包修改部分的代码。
七、html-webpack-plugin插件 访问内存中的网页
1：在项目中执行：cnpm i html-webpack-plugin -D
2: 在webpack.config.js中导入
// 导入在内存中生成HTML的插件,只要是插件都要放到plugins节点中。
const htmlWebpackFlugin=require('html-webpack-plugin')
3：在webpack.config.js配置文件的plugins节点中加入插件
// 配置插件节点
plugins:[
最后执行 npm run dev
查看网页源代码。
八、style-loader css-loader 加载非JS文件
建一个css样式文件去掉li前面的点 index.css
ul li{
1：安装 style-loader css-loader这两个第三方插件
cnpm i style-loader css-loader -D
2：在js中这样引用，import './css/index.css'
3：在webpack.config.js配置文件中加入：
测试重启webpack ：npm run dev 发现li前面的样式不见了。
九、处理less less 。。。。和上面的步骤一样，网上搜索处理文件的loader第三方包，然后配置规则
main.js 导入文件
css:import '路径+样式名称.css'
less:import '路径+样式名称.less'
sass:import '路径+样式名称.less'
在项目中导入loader
css：cnpm i style-loader css-loader -D
less: cnpm i less-loader less -D
sass: cnpm i less-loader sass-D
在webpack.config.js配置文件module节点的rules匹配规则中加入：
css：{ test: /\.css$/, use: ['style-loader', 'css-loader'] },//配置处理.css文件的第三方loader规则
less: { test:/\.less$/,use: [ 'style-loader' , 'css-loader' , 'less-loader' ] },// 配置处理less文件loader规则
scss: { test:/\.scss$/,use: [ 'style-loader' , 'css-loader' , 'sass-loader' ] },// 配置处理less文件sass规则
webpack学习笔记一：安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件的更多相关文章
-
VSTO学习笔记(三) 开发Office 2010 64位COM加载项
原文:VSTO学习笔记(三) 开发Office 2010 64位COM加载项 一.加载项简介 Office提供了多种用于扩展Office应用程序功能的模式,常见的有: 1.Office 自动化程序(A ...
-
Android 学习笔记之Volley(八)实现网络图片的数据加载
PS:最后一篇关于Volley框架的博客... 学习内容: 1.使用ImageRequest.java实现网络图片加载 2.使用ImageLoader.java实现网络图片加载 3.使用NetWork ...
-
【JAVAWEB学习笔记】网上商城实战2：异步加载分类、Redis缓存分类和显示商品
网上商城实战2 今日任务 完成分类模块的功能 完成商品模块的功能 1.1 分类模块的功能: 1.1.1 查询分类的功能: 1.1.2 查询分类的代码实现: 1.1.2.1 创建 ...
-
PHP7 学习笔记（四）PHP PSR-4 Autoloader 自动加载
参考文献: 1.PHP PSR-4 Autoloader 自动加载(中文版) 2.PHP编码规范(中文版)导读 3.PHP-PSR-[0-4]代码规范 基本步骤: (1)在vendor 下新建一个项目 ...
-
tensorflow学习笔记(三十四)：Saver(保存与加载模型)
Savertensorflow 中的 Saver 对象是用于 参数保存和恢复的.如何使用呢? 这里介绍了一些基本的用法. 官网中给出了这么一个例子: v1 = tf.Variable(..., nam ...
-
Webpack 学习笔记总结
Webpack安装 Linux系统默认已经安装了node&npm,但版本比较低,而且没法升级,可以重新下载Node然后通过软链接替换系统自带的node和npm; ln -s /path_to/ ...
-
webpack 学习笔记 02 快速入门
webpack 的目标 将依赖项分块,按需加载. 减少web app的初始加载时间. 使每一个静态集合都能够作为组件使用. 有能力集成第三方库,作为组件使用. 高度可配置化. 适用于大型项目. INS ...
-
CentOS学习笔记--Tomcat安装
Tomcat安装 通常情况下我们要配置Tomcat是很容易的一件事情,但是如果您要架设多用户多服务的Java虚拟主机就不那么容易了.其中最大的一个问题就是Tomcat执行权限.普通方式配置的Tomca ...
-
Vue.js中用webpack合并打包多个组件并实现按需加载
对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下. 前言 随着 ...
-
OracleDesigner学习笔记1――安装篇
OracleDesigner学习笔记1――安装篇 QQ:King MSN:qiutianwh@msn.com Email:qqking@gmail.com 一． 前言 Oracle是当 ...
随机推荐
-
浅谈UIAlertController使用
一开始在刚接触到Alert和ActionSheet的时候,经常傻傻分不清楚,好不容易用习惯了,苹果又给合并了,好在用起来也不困难,到底哪个好呢?见仁见智吧! 现在稍微介绍一下怎么用. 1.初始化,一般 ...
-
怎么解决svn清理失败且路径显示乱码问题
http://jingyan.baidu.com/article/295430f1d728830c7e0050f9.html 上面这个网址是百度经验给的方法,我也是参照这个方式解决了问题,虽然是解决了 ...
-
每天记一些php函数，jQuery函数和linux命令（三）
简介:学习完了php和jQuery之后,对函数的记忆不到位,导致很多函数没记住,所以为了促进自己的记忆,每天花一点时间来写这个博客. 时间:2016-12-21 地点:太原 天气:雨夹雪 一 ...
-
iOS启动过程
1.main函数 | 2.UIApplicationMain * 创建UIApplication对象 * 创建UIApplication的delegate对象 | 3.delega ...
-
示sudo: cd: command not found
执行sudo cd 时出现 sudo: cd: command not found 原因shell shell是一个命令解析器 所谓shell是一个交互式的应用程序. shell执行外部命令的 时候, ...
-
第41篇 推荐一个jekyll博客模板
本人用的模板是基于Codeboy的博客模板改造模板,(由于本人可能会有很多样式修改,所以不再将修改pullrequst到原项目,在此对codeboy模板表示感谢).功能改造如下: 添加微信支付宝打赏 ...
-
bzoj2286: [Sdoi2011]消耗战 虚树
在一场战争中,战场由n个岛屿和n-1个桥梁组成,保证每两个岛屿间有且仅有一条路径可达.现在,我军已经侦查到敌军的总部在编号为1的岛屿,而且他们已经没有足够多的能源维系战斗,我军胜利在望.已知在其他k个 ...
-
c# 重载运算符（ovveride operator）踩坑记，关于null比对
场景描述: 需要比对两个版本的对应对象是否完全一致(每个属性值一致),不一致的导出报表颜色标识,以便提醒后续使用报表人员. 实现思路: 对象重载ToString方法,另实现一比对基类(为了通用)重载= ...
-
spring项目改名后不能启动的原因及解决办法
今日修改了一个spring项目的项目名称,修改后启动项目Debug as->Debug on server,过了很久也没有出现web首页,仔细看项目的定时器已经启动,eclipse的Consol ...
-
ALSA声音编程
1. ALSA设备驱动将ALSA设备描述分为四层,从上到下为: default default:0 plughw:0,0 hw:0,0 不同的层次,对设备的控制权限不同,比如hardware para ...