webpack基础这两个属性中保存的都是当前包所有的依赖信息。安装完成之后，在命令行直接运行webpack-dev-s

[TOC]

前言:

webpack是前端目前最流行的打包工具,为了节省学习webpack的时间,下面我将以一个案例的形式来介绍webpack的使用,毕竟学习webpack就是要知道怎么使用,介绍案例的过程,遇到相关的知识点,我也会做相应的介绍,本案例使用的开发工具是vscode

基础知识

npm

只要你安装了node环境,npm就自动安装好

cnpm

在node装完之后，全局就有一个npm命令可以使用了,但是npm下载各种包默认的服务器在国外,下载速度大受影响,有时还会导致一些环境问题,因此我们可以选择从国内的服务器下载包,这要感谢乐于分享的淘宝团队,为国内开发者提供了npm各类包的镜像

执行以下命令,安装淘宝npm包下载工具

npm i -g cnpm --registry=`https://registry.npmmirror.com/`

在下载包时,使用以下命令,使用关键词cnpm,如

cnpm i  vue --save

注意:在使用cnpm下载包的过程可能会出现一些警告的信息,但并不影响实际包的使用,但是想要查看安装完成之后的包的依赖信息时,可能查找不到,什么是依赖?后面会介绍到

所以建议使用包管理工具,来设置npm从哪个服务器下载包

nrm

执行以下命令安装nrm

npm install nrm -g

查看可用的服务器列表 nrm ls
查看当前正在使用的服务器 nrm current
切换到指定的服务器 nrm use 服务器名称
测速命令

nrm test

nrm test 指定的服务器名称

通过上面的讲解,npm的最优使用方案:

安装nrm,将npm下载包的服务器设置为淘宝

npm命令行工具的使用

下载包(本地安装) 下载的包会放到当前项目中的node_modules文件夹中！
npm install 包名

npm install 包名@版本号

简写:

npm i 包名

npm i 包名@版本号

npm install 包名包名1 包名2
卸载包 npm uninstall 包名
全局安装

当要使用一个包，这个包会提供一个全局命令的时候，这个包就需要被全局安装！

命令

npm install 包名 -g

npm install 包名 --global

为什么要使用webpack?

在网页中会引用哪些常见的静态资源？

JS
.js .jsx .coffee .ts（TypeScript 类 C# 语言）
CSS
.css .less .sass .scss
Images
.jpg .png .gif .bmp .svg
字体文件（Fonts）
.svg .ttf .eot .woff .woff2
模板文件
.ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】

如果我们按照传统的方式引入这些文件会造成什么问题?

网页加载速度慢，因为我们要发起很多的二次请求；
要处理错综复杂的依赖关系

下面正式开始我们的第一个打包案例

一.搭建目录结构

注意:

目录中不要出现中文的文件命名,最外层的文件名字不要使用webpack,我上面是为了作为反面教材
其中main.js为入口文件,bundle.js为出口文件,后面会讲到

二.设置npm下载包的服务器为淘宝

开客户端中打开

执行命令:

npm install nrm -g

切换到指定的服务器

nrm use taobao

三.初始化目录

npm init

这时文件的目录结构变成了这样

下面介绍一下目录中的一些文件类型

package.json文件:

package.json文件就是用来描述一个包的信息的！

只要一个文件夹中有一个合格的pacakge.json文件，那么这个文件夹就可以被称为是一个包！

合格的定义：必须包含两个属性 name version

版本号说明

一般的版本号都会包含3个数字，中间用.隔开格式：主版本号.次版本号.修订版本号

主版本号：当代码功能更新，更新之后，不兼容之前的版本了，那么需要更新主版本号！此版本号：当代码功能更新，更新之后，依然兼容之前的版本，只是新增了某些功能，那么需要更新次版本号修订版本号：当代码更新，更新的只是修复了某些BUG,或者优化了某些功能，那么这个时候只需要更新修订版本号就可以了

jquery: 1.x 2.x 3.x 1.10.1 1.12.4 1.12.1 1.12.4

dependencies 和 devDependencies 的说明

这两个属性中保存的都是当前包所有的依赖信息。

dependencies：

这个字段列出了项目运行所必需的依赖。这些依赖会在项目被部署到生产环境时被包含。
任何在运行时需要的库或框架都应该被列为 dependencies。
例如，如果你的项目是一个web应用，并且使用了React库，那么react 应该被列为 dependencies。

devDependencies：

这个字段列出了只在开发过程中需要的依赖。这些依赖通常用于构建项目、测试代码或执行其他开发任务，但在生产环境中不需要。
例如，如果你使用Webpack来打包你的JavaScript文件，或者使用Mocha来测试你的代码，那么这些工具应该被列为 devDependencies。
devDependencies 不会被包含在生产环境的部署中，因为它们不是运行应用程序所必需的。

为什么要将依赖项信息存储起来呢？

主要目的是为了代码共享的时候，比较方便！在进行代码分享的时候，不需要分享node_modules，只需要分享自己的代码和pacakge.json即可，另外的程序员拿到代码之后，自己根据pacakge.json下载所有的依赖项即可！

为什么要将依赖项信息分开类型存储起来呢？

保持生产环境的干净和轻量级，只包含运行应用程序所必需的代码和库。同时，它也使得开发环境的配置更加清晰，因为所有开发工具和库都被明确地列在 package.json 中

新项目初始化应该怎么根据package.json安装依赖

npm install

这条命令会自动根据package.json中保存的devDependencies+dependencies来进行安装

npm install --production

只下载运行时依赖项可以使用命令

如何将依赖项的信息保存到dependencies 和 devDependencies中

在早期版本的npm中，依赖项信息不会自动保存！

将依赖项的信息保存到dependencies

npm install 包 --save

npm install 包 -S
将依赖项的信息保存到devDependencies

npm install 包 --save-dev

npm install 包 -D

经过初始化的目录,会生成package.json文件,该文件会记录本文件夹的一些相关的信息,比如入口文件,项目名,安装了哪些依赖包等,注意项目名不能为webpack,搭建目录结构那步我已经讲了,否则,在之后的安装打包工具会报错

四.书写index.html,main.js文件

index.html

   <ul>
        <li>测试专用</li>
        <li>测试专用</li>
        <li>测试专用</li>
        <li>测试专用</li>
        <li>测试专用</li>
        <li>测试专用</li>
        <li>测试专用</li>
        <li>测试专用</li>

    </ul>

main.js

	//导入jQuery包
    import $ from 'jquery'//这里需要安装库类
    // 设置偶数行背景色，索引从0开始，0是偶数
    $('li:even').css('backgroundColor','lightblue');
    // 设置奇数行背景色
    $('li:odd').css('backgroundColor','pink');

五.安装jquery类库

cnpm i jquery --save

这时我们按照常规的方法在index.html页面引入main.js文件,是会报错的,因为,main.js文件中的 import $ from 'jquery'是属于高级语法,浏览器是无法识别的,所以要使用打包工具来对main.js文件进行处理,编译成另一个文件,再在页面中引入编译后的文件,即可

六.安装打包工具

npm i webpack  webpack-cli  -g

npm i webpack webpack-cli  -D

七.新建webpack.config.js文件

新建一个与package.json同级的配置文件webpack.config.js,设置打包模式

module.exports={
    mode:"development"
}

运行,打包代码

webpack src/main.js dist/bundle.js

上面代码的是对main.js进行打包,变成bundle.js文件,在页面中引入该文件,浏览器就不存在高级语法不识别的问题了,但是在本案例中,对main.js进行打包后变成的是dist/main.js,而不是dist/bundle.js文件,所以在页面中引入的是dist/main.js,这是我们就能看到main.js起作用了

注意,到了这一步,每次修改js文件都要重新执行上面的打包代码,这样才能生效,十分麻烦,为了解决这个问题,我们可以采用实时打包,方法见后面

八.使用webpack的配置文件简化打包时候的命令

由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：

    // 导入处理路径的模块
    var path = require('path');

    // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
       
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        },
        mode: 'development'
    }

注意:

上面代码中我们设置了项目的入口文件的路径,在此之前案例中的项目入口文件main.js并不是在js目录下的,这是我们要手动将入口文件main.js移到js目录下
经过这一步的设置,每次修改main.js文件,只需要执行webpack命令即可重新打包
但是在页面中你会发现修改的main.js文件好像没有效果,那是因为我们在webpack.config.js指定了出口文件是:dist/bundle.js,所以我们要在index.html中将之前引入的打包编译后的文件dist/main.js改为dist/bundle.js即可看到效果

这里补充一个知识点:

node 的path模块中 path.resolve()和path.join()的区别

一、path模块的引入。
直接引用。node中自带的模块
const path = require('path');

二、path.join(path1，path2，path3.......)
作用：将路径片段使用特定的分隔符（window：\）连接起来形成路径，并规范化生成的路径。若任意一个路径片段类型错误，会报错。
const path = require('path');
let myPath = path.join(__dirname,'/img/so');
let myPath2 = path.join(__dirname,'./img/so');
let myPath3=path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');
 
 
console.log(__dirname);//__dirname,文件路径          
console.log(myPath);    
console.log(myPath2);   
console.log(myPath3); 


三、path.resolve([from...],to)

作用：把一个路径或路径片段的序列解析为一个绝对路径。相当于执行cd操作。

/被解析为根目录。

let myPath = path.resolve(__dirname,'/img/so');
let myPath2 = path.resolve(__dirname,'./img/so');
let myPath3=path.resolve('/foo/bar', './baz');
let myPath4=path.resolve('/foo/bar', '/tmp/file/');
 
console.log(__dirname);           
console.log(myPath);    
console.log(myPath2);   
console.log(myPath3);  
console.log(myPath4);

即使是我们简化了打包工具,但是每次修改了main.js,还是要重新输入命令webpack来进行打包,为了解决这一麻烦,下面我们装一个插件来进行实时打包,每次修改后,自动进行打包,多好

九.实现webpack的实时打包构建

运行cnpm i webpack-dev-server --save-dev安装到开发依赖
安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错,报错内容为:'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序或批处理文件。
此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令
执行该条命令:npm run dev发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中,把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快

这个时候访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，
此时引用不到bundle.js文件，需要修改index.html中script的src属性为:<script src="../bundle.js"></script>,因为bundle.js文件在内存中
为了能在执行npm run dev访问http://localhost:8080/的时候直接访问到index首页，修改dev指令为"dev": "webpack-dev-server --contentBase src --open"，指定启动的根目录
同时修改index页面中script的src属性为<script src="bundle.js"> </script>

十.使用`html-webpack-plugin`插件配置启动页面

为什么要安装这个插件:去掉index页中对js文件的请求

由于使用--contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用html-webpack-plugin插件配置启动页面.

运行cnpm i html-webpack-plugin --save-dev安装到开发依赖
修改webpack.config.js配置文件如下：

   // 导入处理路径的模块
    var path = require('path');
    // 导入自动生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        },
        plugins:[ // 添加plugins节点配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路径
                filename:'index.html'//自动生成的HTML文件的名称
            })
        ]
    }

修改package.json中script节点中的dev指令如下：

"dev": "webpack-dev-server --open"

4. 将index.html中script标签引入的编译后的文件注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中！

好了,到了这一步,我们在打开一个项目文件,启动服务端,执行:npm run dev命令,即可自动打开index.html,每次修改入口文件,在保存之后变回自动打包,页面自动刷新,下面继续介绍,webpack是如何打包其他类型的文件的

十一.实现自动打开浏览器、热更新和配置浏览器的默认端口号

注意：热更新在JS中表现的不明显，可以从一会儿要讲到的CSS身上进行介绍说明！

方式一:

修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新：

"dev": "webpack-dev-server --hot --port 4321 --open"

方式二:

修改webpack.config.js文件，新增devServer节点如下：

devServer:{
        hot:true,
        open:true,
        port:4321
    }

2. 在头部引入webpack模块：

var webpack = require('webpack');

3. 在plugins节点下新增：

new webpack.HotModuleReplacementPlugin()

十二.使用webpack打包css文件

运行cnpm i style-loader css-loader --save-dev
修改webpack.config.js这个配置文件：

module: { // 用来配置第三方loader模块的  
        rules: [ // 文件的匹配规则 
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
        ]
    }

3. 注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的； 4. 将该css文件引入到入口文件(js文件)中,路径实际为主

import "./css/index.css"

十三.使用webpack打包less文件

index.less

ul{
  padding: 0;
  margin: 0;
}

运行cnpm i less-loader less -D
修改webpack.config.js这个配置文件：

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

十四.使用webpack打包sass文件

index.scss//注意后缀为scss

html, body{
  margin: 0;
  padding: 0;

  li{
    font-size: 12px;
    line-height: 30px;
  }
}

运行cnpm i sass-loader node-sass --save-dev
在webpack.config.js中添加处理sass文件的loader模块：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

十五.使用webpack处理css中的路径

运行cnpm i url-loader file-loader --save-dev
在webpack.config.js中添加处理url路径的loader模块：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }

3. 可以通过limit指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

十六.使用babel处理高级JS语法

运行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包
运行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安装babel转换的语法
在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

4. 在项目根目录中添加.babelrc文件，并修改这个配置文件如下：

{
    "presets":["es2015", "stage-0"],
    "plugins":["transform-runtime"]
}

5. 注意：语法插件babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法；

webpack基础

前言: