一 、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'

    });

});

这时候运行会报语法错误

// 导入jQuery ES6语法
import $ from 'jquery'

因为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 自动打包编译 

　　 1：运行 cnpm i webpack-dev-server -D 安装
 

　 2：安装完成后执行webpack-dev-server 执行报错：

　　2-1:执行上面指令会报错，因为webpack-dev-server依赖于webpack,由于webpack是全局安装，webpack-dev-server是在项目中安装
　　 所以无法在powershell中执行，只有安装到全局(-g)的工具才能正常执行
　　 注意：使用webpack-dev-server工具不仅在当前项目中需要安装webpack-dev-server还需要在本项目中安装webpack
　　3: 要想能执行，必须在package.json文件的“script”节点下新增："dev":"webpack-dev-server"
　　4: 添加好配置后执行：npm run dev
　　4-1：如果报错是安装包的问题：删除node_modules文件夹 后执行 cnpm i （重新安装包）

 六、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:[

　　　　new htmlWebpackFlugin({
　　　　template:path.join(__dirname,'./src/index.html'),// 指定模板页面
　　　　filename:'index.html' // 指定要生成的文件名称
　　　　})// 创建一个在内存中生成html页面插件
　　　　],

最后执行 npm run dev

查看网页源代码。

 八、style-loader css-loader 加载非JS文件

建一个css样式文件去掉li前面的点 　index.css　

ul li{

list-style: none;
}

　　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文件的更多相关文章

  1. VSTO学习笔记(三) 开发Office 2010 64位COM加载项

    原文:VSTO学习笔记(三) 开发Office 2010 64位COM加载项 一.加载项简介 Office提供了多种用于扩展Office应用程序功能的模式,常见的有: 1.Office 自动化程序(A ...

  2. Android 学习笔记之Volley(八)实现网络图片的数据加载

    PS:最后一篇关于Volley框架的博客... 学习内容: 1.使用ImageRequest.java实现网络图片加载 2.使用ImageLoader.java实现网络图片加载 3.使用NetWork ...

  3. 【JAVAWEB学习笔记】网上商城实战2：异步加载分类、Redis缓存分类和显示商品

    网上商城实战2 今日任务 完成分类模块的功能 完成商品模块的功能 1.1      分类模块的功能: 1.1.1    查询分类的功能: 1.1.2    查询分类的代码实现: 1.1.2.1  创建 ...

  4. PHP7 学习笔记（四）PHP PSR-4 Autoloader 自动加载

    参考文献: 1.PHP PSR-4 Autoloader 自动加载(中文版) 2.PHP编码规范(中文版)导读 3.PHP-PSR-[0-4]代码规范 基本步骤: (1)在vendor 下新建一个项目 ...

  5. tensorflow学习笔记(三十四)：Saver(保存与加载模型)

    Savertensorflow 中的 Saver 对象是用于 参数保存和恢复的.如何使用呢? 这里介绍了一些基本的用法. 官网中给出了这么一个例子: v1 = tf.Variable(..., nam ...

  6. Webpack 学习笔记总结

    Webpack安装 Linux系统默认已经安装了node&npm,但版本比较低,而且没法升级,可以重新下载Node然后通过软链接替换系统自带的node和npm; ln -s /path_to/ ...

  7. webpack 学习笔记 02 快速入门

    webpack 的目标 将依赖项分块,按需加载. 减少web app的初始加载时间. 使每一个静态集合都能够作为组件使用. 有能力集成第三方库,作为组件使用. 高度可配置化. 适用于大型项目. INS ...

  8. CentOS学习笔记--Tomcat安装

    Tomcat安装 通常情况下我们要配置Tomcat是很容易的一件事情,但是如果您要架设多用户多服务的Java虚拟主机就不那么容易了.其中最大的一个问题就是Tomcat执行权限.普通方式配置的Tomca ...

  9. Vue.js中用webpack合并打包多个组件并实现按需加载

    对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下.   前言 随着 ...

  10. OracleDesigner学习笔记1――安装篇

    OracleDesigner学习笔记1――安装篇   QQ:King MSN:qiutianwh@msn.com Email:qqking@gmail.com 一．       前言 Oracle是当 ...

随机推荐

  1. Ribbon负载均衡策略配置

    在这里吐槽一句:网上很多文章真是神坑,你不看还好,看了只会问题越来越多,就连之前的问题都没有解决!!! 不多说了,Ribbon作为后端负载均衡器,比Nginx更注重的是请求分发而不是承担并发,可以直接 ...

  2. 部署点评Cat监控项目

    在项目中监控代码运行的状况,可以采用点评的Cat项目来监控整个项目,但是按照官方的文档来部署cat,总会遇到各种问题,讲解的也不够简明清楚,现在用一个单机来部署运行cat监控项目. 首先,到项目的Gi ...

  3. 26.app后端怎么架设推送服务

    推送服务已经是app的标配了.架设推送服务,除了可以使用第三方服务商外,也有大量的开源技术可以选择. 现在推送主要分两块,android推送和ios推送,在下面分别论述: 1.    Android推 ...

  4. scapyd部署出现的问题的解决方案

    使用scrapyd-deploy部署时,发现spiders为0的排查,首先用 scrapy list 看一下是否可以识别 windows下 scrapyd-deploy无后缀文件不能启动: 解决方案一 ...

  5. VMware12安装虚拟机教程、Ubuntu16.04安装教程（包括vmware tools的安装）

    转自https://jingyan.baidu.com/article/c275f6ba07e269e33d756714.html 方法/步骤 1 虚拟机.Linux操作系统介绍及下载地址 虚拟机VM ...

  6. google cache源码详解

    一.引子 缓存有很多种解决方案,常见的是: 1.存储在内存中 : 内存缓存顾名思义直接存储在JVM内存中,JVM宕机那么内存丢失,读写速度快,但受内存大小的限制,且有丢失数据风险. 2.存储在磁盘中: ...

  7. JVM内存异常与常用内存参数设置总结

    Java Web程序由于引入大量第三方java类库,在启动时经常会遇到内存溢出(Memory Overflow)或者内存泄漏(Memory leak)问题,导致程序启动失败. 一.OOM异常分类: O ...

  8. 求二维数组的最大子数组———曹玉松&&蔡迎盈

    继上节课老师让求了一维数组最大的子数组后,这节课堂上,老师加深了难度,给了一个二维数组,求最大子数组,开始觉得很容易,但是自己思考起来感觉这个算法很困难,既需要考虑数组直接的连续,又要求出最大的,老师 ...

  9. 将wiki人脸数据集中的图片按男女分类

    import shutil f_in = 'D:/wiki_crop' # 读取文件中图片信息根据性别分类图片到对应目录中 dirroot = "D:/" f = open(dir ...

  10. 教你如何使用Java手写一个基于数组实现的队列

    一.概述 队列,又称为伫列(queue),是先进先出(FIFO, First-In-First-Out)的线性表.在具体应用中通常用链表或者数组来实现.队列只允许在后端(称为rear)进行插入操作,在 ...