学习webpack一个案例就够了

[TOC]

webpack打包工具的使用

前言:

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

基础知识

npm

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

cnpm

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

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

npm i -g cnpm --registry=https://registry.npm.taobao.org
复制代码

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

cnpm i  vue --save
复制代码

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

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

nrm

执行如下命令安装nrm

npm install nrm -g
复制代码

1. 查看可用的服务器列表 nrm ls

2. 查看当前正在使用的服务器 nrm current

3. 切换到指定的服务器 nrm use 服务器名称

4. 测速命令

   nrm test

   nrm test 指定的服务器名称

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

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

npm命令行工具的使用

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

   简写:

   npm i 包名 npm i 包名@版本号

   npm install 包名 包名1 包名2

2. 卸载包 npm uninstall 包名

3. 全局安装

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

   命令 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中定义组件的方式，推荐这么用】

若是咱们按照传统的方式引入这些文件会形成什么问题?

1. 网页加载速度慢， 由于 咱们要发起不少的二次请求；
2. 要处理错综复杂的依赖关系

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

一.搭建目录结构

注意:

• 目录中不要出现中文的文件命名,最外层的文件名字不要使用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： 运行时依赖项，在将代码上传到服务器时，这个包仍被须要 devDependencies： 开发时依赖项，这个依赖项只须要在开发时时候，上传到服务器的时候不须要！

问题： 为何要将依赖项信息存储起来呢？？？ 主要目的是为了代码共享的时候，比较方便！

在进行代码分享的时候，不须要分享node_modules，只须要分享本身的代码和pacakge.json便可，另外的程序员拿到代码以后，本身根据pacakge.json下载全部的依赖项便可！

npm install 这条命令会自动根据package.json中保存的包信息进行下载 （devDependencies+dependencies）

只下载运行时依赖项可使用命令npm install --production

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

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

1. 将依赖项的信息保存到dependencies npm install 包 --save npm install 包 -S
2. 将依赖项的信息保存到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的配置文件简化打包时候的命令

1. 因为运行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()的区别

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

2、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); 


3、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的实时打包构建

1. 运行cnpm i webpack-dev-server --save-dev安装到开发依赖

2. 安装完成以后，在命令行直接运行webpack-dev-server来进行打包，发现报错,报错内容为:'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序或批处理文件。

3. 此时须要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令

4. 执行该条命令:npm run dev发现能够进行实时打包，可是dist目录下并无生成bundle.js文件，这是由于webpack-dev-server将打包好的文件放在了内存中,把bundle.js放在内存中的好处是：因为须要实时打包编译，因此放在内存中速度会很是快

5. 这个时候访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，须要点击到src目录下，才能打开咱们的index首页，

6. 此时引用不到bundle.js文件，须要修改index.html中script的src属性为:<script src="../bundle.js"></script>,由于bundle.js文件在内存中

7. 为了能在执行npm run dev访问http://localhost:8080/的时候直接访问到index首页，修改dev指令为"dev": "webpack-dev-server --contentBase src --open"，指定启动的根目录

8. 同时修改index页面中script的src属性为<script src="bundle.js"> </script>

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

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

因为使用--contentBase指令的过程比较繁琐，须要指定启动的目录，同时还须要修改index.html中script标签的src属性，因此推荐你们使用html-webpack-plugin插件配置启动页面.

1. 运行cnpm i html-webpack-plugin --save-dev安装到开发依赖
2. 修改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文件的名称
            })
        ]
    }
复制代码

3. 修改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"
复制代码

方式二:

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

devServer:{
        hot:true,
        open:true,
        port:4321
    }
复制代码

2. 在头部引入webpack模块：

var webpack = require('webpack');
复制代码

3. 在plugins节点下新增：

new webpack.HotModuleReplacementPlugin()
复制代码

十二.使用webpack打包css文件

1. 运行cnpm i style-loader css-loader --save-dev
2. 修改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;
}
复制代码

1. 运行cnpm i less-loader less -D
2. 修改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;
  }
}

复制代码

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

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

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

1. 运行cnpm i url-loader file-loader --save-dev
2. 在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语法

1. 运行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包
2. 运行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安装babel转换的语法
3. 在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打包工具应用的案例了,这个案例也能够做为一个项目的基本打包模板,你们在学习这一块内容的时候,要掌握一些基础的知识,不然,遇到了报错问题,可能就无从下手解决了,webpack还有其余的一些难懂的知识点,建议你们看官方文档