zoukankan      html  css  js  c++  java

  • Webpack基本使用（详解）

    在开始之前，我们先来看以下Webpack官网首页的图片，并思考一下官网图片传达给我们的含义​

    一.Webpack基本介绍

    1.1 概念的引入

    思考：在网页中，我们经常会引入哪些常见的静态资源

    • 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. 要处理错综复杂的依赖关系

    如何解决上述两个问题？

    1. 合并、压缩、精灵图、图片的Base64编码
    2. 可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系；

    1.2 什么是Webpack

    Webpack是一个前端的项目构建工具，它是基于node.js开发出来的一个前端工具

    如何实现上述的2种解决方案？

    1. 使用Gulp， 是基于 task 任务的；
    2. 使用Webpack， 是基于整个项目进行构建的；
    • 借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
    • 根据官网的图片介绍webpack打包的过程
    • webpack官网

    1.3 Webpack支持的规范

    Webpack支持以下规范

    1. CommonJS规范
    //moduleA.js 导出
module.exports = function(){
    //...
}

//moduleB.js 导入
var moduleA = require('./moduleA')
     
    1. AMD规范（推崇依赖前置）
    //moduleA.js 导入和导出
define(['jquery','./math.js'],function($,math){
    //AMD是依赖前置，将文件的依赖通过数组的形式导入，然后当作函数的参数传递进函数使用
    
    //通过return来实现对外接口
    return helloWorld
})
     

    1. CMD规范（推崇就近依赖，需要用到的时候再去加载模块）

      标准语法：define（id？，deps?，factory）

      • 一个文件一个模块，所以经常用文件名作为模块id
      • CMD推崇依赖就近，所以一般不在define的参数中写依赖，在factory中写
      • factory是一个函数，该函数拥有三个参数 function（require，exports，module）
        • require：一个方法，接收模块标识，用来获取其它模块提供的接口
        • exports：一个对象，用来向外提供模块接口
        • module：一个对象，存储了与当前模块相关联的一些属性和方法
    define(fcuntion(require,exports,module){
       var $ = require('jquery.js')
       })
     
    1. ES6规范
    • 在ES6规范中，使用import和exports命令来导入和导出文件
    //moduleA.js 导出

//...内容区

//导出函数(还可以导出对象以及任何你想导出的数据类型)
exports.func = someFunc

//moduleB.js 导入
import func from './moduleA'
     

    掘金：AMD和CMD的区别

    1.4 安装Webpack

    1. 运行 npm i webpack -g 全局安装Webpack，这样就能在全局使用Webpack命令
      • 注意，如果是 webpack4.0以上的版本，需要全局安装 Webpack-cli
    2. 在项目根目录运行 npm i webpack --save-dev安装到项目依赖中

    1.5 命令行的使用

    • 查看Webpack版本信息
    npm info webpack
     
    • 安装指定版本的Webpack
    npm install webpack@版本号
     
    • 卸载webpack
    npm uninstall webpack webpack-cli -g
     

    二.Webpack基本使用

    2.1 Webpack基本的使用方式-实例

    目标：使用Webpack打包构建列表隔行变色案例

    1. 创建基本的目录结构

      webpack-study

      • dist
      • src
        • js
        • css
        • images
        • index.html
        • main.js

    2. 在项目目录下面运行npm init初始化项目

    3. 使用 npm i jquery --save 安装jquery类库

    4. 创建main.js并书写各行变色的代码逻辑

      main.js

//导入jquery内库
import $ from 'jquery'

$(function(){
    $("li:odd").css('backgroundColor','red')
    $("li:even").css('backgroundColor','tomato')
})
       

    5. 在页面直接引用main.js会报错，因为浏览器不认识ES6的新语法import，需要使用Webpack进行处理，Webpack默认会把这种高级语法转换为低级浏览器能够识别的语法

    6. 运行 webpack 入口文件路径 输出文件路径 对main.js进行处理

      webpack ./src/main.js ./dist/bundle.js

    7. 在index.html中引入bundle.js代替main.js

    2.2 Webpack基本配置

    问题描述：

    • 每次修改文件之后，都要使用 webpack 入口文件路径 输出文件路径来对文件进行处理，使用起来比较繁琐

    期待实现：

    • 直接在控制台输入 webpack 命令，即可自动完成文件的处理

    实现方法

    • 在项目根目录添加Webpack的配置文件 webpack.config.js
      • 在Webpack配置文件里面配置处理的入口文件和输出文件
      • 配置完成之后，即可在调试台通过 webpack命令来对文件进行处理
    const path = require('path')


module.exports = {
    entry:path.join(__dirname,'./src/main.js'),

    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    }
}
     

    三.webpack-dev-server的使用

    3.1 实现自动打包编译

    问题描述：每次改完代码，都需要手动执行webpack命令打包编译文件，比较繁琐

    目标：每次改完代码，我们点击保存之后就可以帮我们自动打包编译

    1. 安装 webpack-dev-server

      • -D 将该插件的依赖写入开发依赖中
      npm install webpack-dev-server -D
       

    2. 在 package.json里面的 scripts属性里面添加 webpack-dev-server命令到开发环境

      "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack-dev-server"
  },

    3. 在本地安装webpack，webpack-dev-server想要在本地项目中运行，必须在项目中也安装 webpack

      npm install webpack -D
       

    4. 执行 npm run dev命令即可,会有如下返回

    1. 由第四步可知，webpack-dev-server帮我们生成的bundle.js运行于项目根目录，这个文件并没有存到物理磁盘上，而是托管到了电脑内存中，所以我们在项目中根本看不到这个bundle.js文件，但是我们可以通过将index.html中的bundle.js引用路径修改为项目根路径，即可引用到该文件

      <script src="/bundle.js"></script>
       

    2. 可以认为 webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了项目的根目录中，虽然我们看不到它，但是可以认为和 dist，src，nodemodule，平级，有一个看不见的文件，叫做bundle.js

    注意：

    • 若安装过程中有中断，需要把 node-modules文件夹删掉，重新执行 npm install下载依赖，否则会报错
    • 最后执行npm run dev 之后，就会开始自动监听我们的修改，每次修改保存都会触发自动打包编译

    3.2 额外的参数

    webpack-dev-server 除了帮我们实现自动编译打包的功能之外，还可以添加 额外的参数帮我们实现更强大的功能

    方式1（推荐）：

    • 项目启动后自动打开浏览器：--open
    • 指定项目端口号：--port 3000
    • 指定项目启动后的主页面：--contentBase src
    • 指定热加载：--hot
      • 不加热加载之前，每次修改都会生成一个新的bundle.js
      • 加了热加载之后，每次都会在原基础上更新bundle.js，提升 效率
    //package.json

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },

    方式2（了解即可）：

    //webpack.config.js

const webpack = require('webpack')    //引入Webpack，启用热更新的第2步

devServer:{     //设置dev-server命令参数的第二种形式，相对麻烦一些
        open:true,
        port:3000,
        contentBase:'src',
        hot:true    // 启用热更新的第一步
    },
    plugins:[       //配置插件的节点，热更新的第2步
        new webpack.HotModuleReplacementPlugin()    //new 一个热更新的模块对象，这是启用热更新的第3步
    ]

    3.3 html-webpack-plugin插件

    插件作用：

    • 在内存中，生成HTML页面的插件
    • 将打包好的bundle.js插入页面中去，无需我们手动引入bundle.js

    插件用法：

    1. 安装 html-webpack-plugin插件

      npm i html-webpack-plugin -D

    2. 在webpack.config.js文件中添加插件

      • 配置模版页面，即根据该模版页面生成内存中的页面
      • 指定生成页面的名称
      //webpack.config.js

const htmlWebpackPlugin = require('html-webpack-plugin')

plugins:[ 
        new htmlWebpackPlugin({     //创建一个在内存中生成html页面的插件
            template:path.join(__dirname,'./src/index.html'),//指定模版页面，将来会根据指定的页面路径，去生成内存中的页面
            filename:'index.html'
        })
    ]

    实际展示:

    拓展：-S，-D，-g说明

    npm install module_name -S 即 npm install module_name –save 写入dependencies

    npm install module_name -D 即 npm install module_name –save-dev 写入devDependencies

    npm install module_name -g 全局安装(命令行使用)

    npm install module_name 本地安装(将安装包放在 ./node_modules 下)

    dependencies与devDependencies有什么区别呢？

    • devDependencies 里面的插件只用于开发环境，不用于生产环境
    • dependencies 是需要发布到生产环境的

    四.loader的使用

    注意：Webpack默认只能打包处理Js类型的文件，无法处理其它的非Js类型的文件

    如果要处理非Js类型的文件，我们需要手动安装一些合适的第三方loader加载器

    4.1 loader处理样式表

    1. 打包处理CSS文件：安装 style-loader css-loader

      npm i style-loader css-loader -D
       

    2. 在webpack.config.js配置文件里面新增module节点对象，在这个module对象身上，有个rules属性数组，这个数组中，存放了所有的第三方文件爱你的匹配和处理规则

      module:{        //这个节点，用来配置所有第三方模块加载器
        rules:[     //配置第三方模块的匹配规则
            {test:/.css$/,use:['style-loader','css-loader']}   //配置处理 .css文件的第三方loader规则
        ]
    }

    3. 在main.js入口文件里面引入CSS文件即可成功使用

      import './css/index.css'

    4.2 loader处理URL地址

    问题描述：

    • 默认情况下，Webpack无法处理CSS文件中的URL地址，无论是图片还是字体库，只要是URL，都处理不了

    解决方法：

    • 通过安装 url-loader file-loader插件来对URL进行处理

      npm i url-loader file-loader -D

    使用步骤

    1. 安装 url-loader file-loader插件

    2. 在webpack.config.js文件里面配置URL的处理规则

      • 参数介绍
      • limit：图片的大小，单位是byte，如果引用的图片大于给定的limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
      • name：设置URL指定的路径名，默认会以hash值来命名（防止重名），可以通过如下方式通过hash值拼图片原始名的方式来达到同样的效果，且辨识度更高
      //URL图片路径的匹配规则
{test:/.(jpg|jepg|png|gif)$/,use:'url-loader?limit=1000&name=[hash:8]-[name].[ext]'},
//字体图标的匹配规则
{test:/.(eot|svg|woff|woff2|ttf)$/,use:'url-loader'}

    4.3 拓展：Webpack处理第三方文件类型的过程

    1. 先校验文件类型，如果是js文件直接打包
    2. 如果非js文件，拿到后缀名，去webpack.config.js里面找对应匹配规则
    3. 找到则调用规则打包，否则报错
    4. rules的use规则数组从右到左调用，会将后面调用完毕的处理结果交给前面的规则继续处理
    5. 调用完毕之后会将处理结果直接交给Webpack进行打包合并，最终输出到bundle.js中去

    示例：

    • 先使用css-loader插件进行处理，将处理结果交给style-loader继续处理
     module: { 
    rules: [ 
      { test: /.css$/, use: ['style-loader', 'css-loader'] }
    ]
  }
     

    4.4 总结

    • 由于Webpack默认只能打包处理Js类型的文件，无法处理其它的非Js类型的文件，所以如果要处理非Js类型的文件，我们需要手动安装一些合适的第三方loader加载器。

    • 安装并使用第三方加载器的方法为以下几步

      1. 在命令行安装相对应的loader加载器（注意一般的loader加载器都有相对应的依赖模块，依赖模块同样也需要安装，否则程序会运行报错）
      2. 安装完对应的loader加载器之后，在Webpack.config.js配置文件中配置相对应的匹配规则
      //添加module对象
//在module对象里面添加rules数组
//在rules数组里面添加相对应文件的匹配规则
module:{
    rules:[
        {test:/.css$/,use:['style-loader','css-loader']}
    ]
}
      1. 如果有依赖的CSS或者其它文件，都以import命令的方式在入口js文件里面引入

    • 完成以上步骤即可成功启用loader加载器

    五.Babel的使用

    在Webpack中，默认只能处理一部分ES6语法，一些更高级的ES6或者ES7语法，Webpack是处理不了的，这时候，就需要借助第三方loader，来帮助Webpack处理这些高级的语法，当第三方loader把高级语法转为低级的语法之后，会把结果交给Webpack去打包到bundle.js中

    通过Babel，可以帮助我们将高级语法转换为低级的语法

    5.1 安装

    • 在Webpack中，可以运行如下两套命令，安装两套包，去安装Babel相关的loader功能
      • 第一套包（类似于转换器）：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
      • 第二套包（提供转换关系）：cnpm i bebel-preset-env babel-preset-stage-0 -D

    5.2 配置

    • 在Webpack.config.js配置文件中，在module节点下的rules数组中添加一个新的匹配规则

    • 注意：

      • 在配置的babel的loader规则的时候，一定要把node_modules目录通过exclude属性排除掉
      • 如果不排除node_modules,则Babel会把node_modules中所有的第三方Js文件都打包编译，这些会消耗CPU，并且导致打包速度非常慢
      • 哪怕最终babel把node_modules中的js全部转换完了，但是，项目也无法运行
      {test:/.js$/,use:'babel-loader',exclude:/node_modules/}
       

    • 在项目的根目录中，新建一个叫做 .babelrc 的Babel配置文件

      • 这个配置文件属于json格式，必须复核JSON语法规范，不能写注释，字符串必须使用双引号
      • 该配置文件可参照安装的两套包中的插件
      • 第一套包里面有个 babel-plugin-transfrom
      • 第二套包里面有 babel-preset-env，babel-preset-stage-0
      {
    "presets":["env","stage-0"],
    "plugins":["transform-runtime"]
}

    • 完成以上配置，即可在项目中使用ES6语法，可以编写一个Class类，设置静态属性并打印它们来测试

    六.在Webpack中使用Vue

    传统的Vue使用方式

    1. 通过 script标签引入 vue.js文件
    2. 在body中声明一个盒子，并且为它设置一个id属性
    3. 在script标签中通过new Vue（）创建一个VM实例

    6.1 包的查找规则

    当我们使用 import命令导入模块中的一个包的时候，它的查找规则是怎样的呢

    1. 找项目目录中有没有 node_modules 的文件夹
    2. 在node_modules文件夹中找到对应的包名
    3. 在package.json的配置文件里面，找到一个main属性【main属性指定了这个包在被加载的时候的入口文件】

    接下来我们来试着导入一个vue包，并查看它对应的入口文件

    • 安装 npm i vue -D

    • 导入包 import Vue form 'vue'

    • 查看 node_modules/vue/package.json中的main属性，看它的入口文件是哪个

      "main": "dist/vue.runtime.common.js",

    • 仔细回想一下，我们平时导入的是这个文件吗？显然不是，我们平时导入的是vue.js文件，那这里为什么会不一样呢？带着这个疑问，我们继续

    6.2 尝试使用webpack的方式使用Vue

    如下都是一些简单的代码模版，这里用代码说明，不做具体解释

    //main.js 入口文件

//此处导入的是 vue.runtime.common.js
import Vue from 'vue'

var login = {
    template:`<h1>Login success</h1>`
}

var vm = new Vue({
    el:'#app',
    data () {
        return {
            msg:'hello'
        }
    },
     components:{
         login
     }
})
     
    //index.html

<body>
    <div id="app">
        <p>{{msg}}</p>
        <login></login>
    </div>
</body>
     

    运行，查看结果

    • 发现报如下错误
    • 您正在使用Vue的仅运行时版本，其中模板编译器不可用。 将模板预编译为渲染函数，或使用包含编译器的构建。

    错误分析

    • 以上错误告诉我们，正在使用的是vue运行时版本（即我们最开始看到的vue.runtime.common.js），编译器不可用
    • 提供了两种解决方法
      1. 将模版预编译为渲染函数（使用render函数渲染模版）
      2. 使用包含编译器的构建（即完整的vue.js文件）

    6.3 解决方法1

    将模版预编译为渲染函数（使用render函数渲染模版）

    渲染函数的使用，详情请看这里：Render函数的使用

    通过尝试，发现把组件写在入口文件里面并不能达到目标，于是，我们抽取vue模版，通过vue文件来创建模版

    1. 创建 login.vue文件

      <template>
    <div>
        <h1>
            这是通过 vue 文件创建的模版
        </h1>
    </div>
</template>
<script>
    
</script>
<style>

</style>

    2. 安装加载.vue文件的插件，并配置webpack.config.js

      cnpm i vue-loader vue-template-compiler -D
       
      //webpack.config.js

const vueLoaderPlugin =require('vue-loader/lib/plugin')

 plugins:[
        new vueLoaderPlugin()
    ],
 module:{   
     rules:[
          {test:/.vue$/,use:'vue-loader'},       //处理.vue文件
     ]         
 },

    3. 在入口文件里面引入 login.vue,并使用render函数渲染

      import Vue from 'vue'

import login from './login.vue'

var vm = new Vue({
    el:'#app',
    data () {
        return {
            msg:'hello'
        }
    },
    // render:function(createElement){
    //     return createElement(login)
    // },
    //简写
   render:c => c(login)
})

    4. 再次运行，发现运行成功

    6.4 解决方法2

    用包含编译器的构建（即完整的vue.js文件）

    修改原始导入的vue.runtime.common.js，将引入的包修改为vue.js

    • 有如下几种方法都可以修改vue.js的引入路径（推荐第三种方式）
    1. 修改node_modules中的vue的package.json文件夹的main属性，将其指定为vue.js
    2. 引入的时候修改引入路径为 import Vue from '../node_modules/vue/dist/vue.js'
    3. 还是按照原先的引入方法 import Vue form 'vue'，但是需要在 webpack.config.js文件中增加如下配置
    resolve:{
        alias:{
            "vue$":"vue/dist/vue.js"
        }
    }
    • 完成以上设置之后，项目即可正常运行

    6.5 总结

    • 在Webpack中使用 Vue
      1. 安装 Vue 的包：npm i vue -S
      2. 由于在Webpack中，推荐使用 .vue 这个组件 模版定义组件，所以需要安装能解析这种文件的loader：npm i vue-loader vue-template-complier -D
      3. 在 main.js 中导入 Vue模块：Import Vue from 'vue'
      4. 定义一个 .vue结尾的文件组件，该文件包含三个部分组成，template,script,style
      5. 在 main.js中使用 Import login from './login.vue' 命令导入这个组件
      6. 创建 vm实例，VM实例中使用渲染函数render来渲染页面
      7. 在页面中创建一个 id为app的div元素，作为VM要控制的区域

    七.在Webpack中使用 Vue-Router

    7.1 基本使用

    1. 安装 vue-router依赖模块

      npm i vue -S
npm i vue-router -S

    2. 在main.js中引入Vue 和 vue-router模块,并显示的调用vue-router

      import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

    3. 在src目录下创建App.vue主页面模版文件

      <template>
    <div>
        <h1>APP组件</h1>
    </div>
</template>

<script>
export default {


}
</script>

<style>

</style>

    4. 在 index文件中 创建一个 id 属性等于 app的div元素

    5. 在src目录下面新建文件夹，并在新建的文件夹下面创建login.vue和register.vue文件

    6. 将login.vue和register.vue组件应用到app主页模板上面去

      <template>
    <div>
        <h1>APP组件</h1>
        <router-link to='/login'>Login</router-link>
        <router-link to='/register'>Register</router-link>

        <router-view></router-view>
    </div>
</template>

<script>
export default {


}
</script>

<style>

</style>

    7. 在main.js文件中配置路由，创建VM实例，挂载app

      import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import app from './App.vue'
import login from './comp1/login.vue'
import register from './comp1/register.vue'

var router = new VueRouter({
    routes:[
        {path:'/login',component:login},
        {path:'/register',component:register}
    ]
})

var vm = new Vue({
    el:'#app',
    render: c => c(app),
    router
})

    8. 完成以上配置，启动项目即可

    7.2 路由嵌套

    在Webpack中使用路由的嵌套和在Vue中使用路由的嵌套基本类似

    1. 在路由基本使用的前提下，创建两个新的组件 account,money

    2. 在login组件中添加这两个组件的 ,并添加容器

      <template>
    <div>
        <h1>Login success</h1>

        <router-link to='/login/account'>Account</router-link>
        <router-link to='/login/money'>Money</router-link>

        <router-view></router-view>
    </div>
</template>

    3. 在路由配置中给login添加children属性，配置account,money路由即可

      var router = new VueRouter({
    routes:[
        {path:'/login',component:login,children:[
            {path:'account',component:account},
            {path:'money',component:money},
        ]},
        {path:'/register',component:register}
    ]
})

    7.3 抽离路由模块

    为避免入口文件 main.js里面的内容过多，我们推荐使用抽离路由的方式，为router单独创建一个文件夹

    • 在src目录下创建 router.js

      import VueRouter from 'vue-router'

import login from './comp1/login.vue'
import register from './comp1/register.vue'
import account from './comp2/account.vue'
import money from './comp2/money.vue'

var router = new VueRouter({
    routes:[
        {path:'/login',component:login,children:[
            {path:'account',component:account},
            {path:'money',component:money},
        ]},
        {path:'/register',component:register}
    ]
})

export default router

    • 在main.js入口文件中，引入router.js暴露router对象，挂载到app即可

      import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import app from './App.vue'
import router from './router.js'

var vm = new Vue({
    el:'#app',
    render: c => c(app),
    router
})

    7.4 组件中style标签lang属性和scoped属性

    scoped属性：

    • 在 .vue文件中，可通过style标签设置组件的样式，但是默认情况下，设置的样式会被渲染到全局
    • 通过在 style标签中添加 scoped 属性，可以控制该样式只在该组件里面生效（建议使用）

    lang属性：

    • 在 .vue文件中，默认只能使用普通的 css样式语法，如果想要使用 scss，或者 less语法样式，需要给style标签设置 lang属性，并且指定具体的使用语法

      <style lang='less'>

</style>

    ...未完待续，持续更新


    来源：掘金，原作者：mapengfei47，原链接：https://juejin.im/post/5d2fd19be51d4576bc1a0eb0
  • 相关阅读:
    洛谷P1208 [USACO1.3]混合牛奶 Mixing Milk 题解 结构体排序
    信息学竞赛中C语言的输入输出
    Python 关键字参数和可变参数
    大白话讲解神经网络算法，原理如此简单！
    idea debug flink1.12 sqlClient 源码
    Flink SQL如何保证分topic有序
    Flink 1.12.0 SQL Connector支持 Oracle
    Flink实战之Flink SQL connector支持并行度配置
    java程序中执行脚本时具有的是那个用户的权限呢？
    clickhouse日期等函数的使用
  • 原文地址：https://www.cnblogs.com/GeniusZ/p/12100217.html
Copyright © 2011-2022 走看看