WebPack 的简单使用

柔光的暖阳◎ 2022-04-23 11:04 201阅读 0赞

nrm 的安装：

npm install -g nrm  全局安装，安装成功界面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70][]

在安装完成之后，可以查看当前下载的地址（使用的第三方插件）

nrm ls : 默认使用的是，淘宝的镜像

![20190214094332599.png][]

如果需要修改，插件下载的地址

nrm use npm  : 会将当前插件下载的地址进行修改（如果不需要则不用进行修改，修改的目的是，下载插件时速度慢）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 1][]

下面开始安装webpack

第一步：首先初始化package.json文件  npm init -y

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 2][]

第二步：初始化完成package.json 之后，进行安装webpack（成功如下） npm install -g webpack

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 3][]

第三步：在安装完后之后，需要安装  webpack 的运行环境，如果不安装会一直提示Do you want to install 'webpack-cli'  是否在下客户端，并且在下载完成客户端之后，会提示 Error: Cannot find module 'webpack' 的错误

cnpm install webpack --save-dev： 安装完成后的界面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 4][]

上面三步完成之后，可以进行指定 文件的打包，在打包的时候需要注意，路径是你命令行所在的目录，而不是你要打包的文件的目录，在打包的时候还需要主要，我用的webpack 的版本是 4.29.3 版本，在打包的时候，指令跟之前的指令有所不同，需要在输出文件的前面 添加  -o 来表示 输出路径文件 （成功界面）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 5][]

此时打包文件在项目中可以进行引入使用。

在使用webpack 的时候，还有第二种运行方式，在工作中基本上使用配置文件的形式，进行文件的打包操作。

首先在根路径创建js文件，文件名称：webpack.config.js

在创建的文件中进行操作，我这里只是简单的操作，如果需要更多的操作，查看官方文档：[https://webpack.js.org/concepts/][https_webpack.js.org_concepts]，或者查看该博客：[https://www.cnblogs.com/QxQstar/p/5961387.html][https_www.cnblogs.com_QxQstar_p_5961387.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 6][]

设置完成之后，在package.json文件的 scripts 中添加： "dev": "webpack-dev-server" 命令，则可以在命令行中只用 npm run dev

来进行制定文件的生成，在使用的时候，会出现webpack-dev-server 不是内部命令，也不是可运行程序 ,需要执行：npm install -g webpack-dev-server 指令，则可以运行

还可以 在dev中添加 添加    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot",

\--open ： 表示的是：自动打开浏览器

\--port 3000  ： 表示设置的端口号是 3000

\--contentBase src ： 表示 开始的路径是以src开始。

\--hot ：表示开启 热编译

![20190215083745831.png][]

上面的操作可以在webpack-config.js中添加（但是不见在该配置文件中添加，因为会比较麻烦）

![20190214232733100.png][]、

![20190327150436369.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 7][]

在安装完成上面的时候，会出现下面界面的提示

![20190214214033185.png][]

原因是：在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。需要尝试全局安装npm install -g webpack-cli即可，成功出现下面的界面（如果还是不成功，将原本安装的node\_modules 删除掉（删除的位置需要看你安装的位置，项目中或者的C盘中），删除掉之后，重新按照操作执行）

![20190214214234212.png][]

在执行命令打包操作即可完成（成功界面）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 8][]

webpack在使用的时候，生成的js文件是存放在物理内存中的，需要将js文件放在内存中使用 cnpm i html-webpack-plugin -D

首先在webpack.config.js 页面中  引入 html-webpack-plugin  插件，（注意，在使用所有的插件的时候，都需要在plugin 节点中添加）

![20190214232559848.png][]

![2019021423262528.png][]

对于安装错误的文件可以执行下面的命令，进行修改和重新安装

//卸载版本
    cnpm uninstall webpack -g
    cnpm uninstall -g webpack-dev-server
     
    //安装指定版本
    cnpm install webpack@3.8.0 --save-dev
    cnpm install webpack-dev-server@2.9.7 --save-dev

更新于:2019-2.18 晚21:10

在使用bootstrap 字体的时候，需要导入 bootstrap 的字体文件，进行使用，但是在使用的时候需要注意，使用 cnpm 下载的bootstrap 文件中是没有 fonts 文件的（可能是我下载的方式不正确），需要去官网下载正确的包，将里面的文件拷贝出来进行整合

首先在main.js 文件中 引入 bootstrap 的 样式文件

//  项目的js入口文件
    console.log("./;...");
    
    import './css/index.css'
    import './css/indexmain.scss'
    import 'bootstrap/dist/css/bootstrap.css'

在引入完成之后，可在页面中直接使用，可以去bootstrap 官网查看字体文件的使用 ，如果在使用的过程中发现，显示不出来，可以按照上面卸载 插件的方式，多次使用，小编在使用的时候，出现这种情况

使用 webpack 整合 vue 文件

首先  下载  vue 插件

cnpm i vue -S

cnpm i vue-loader vue-template-complier -D

在main.js 文件中引入 vue 文件

import Vue from 'vue'

但是在引用的时候会出现错误，错误的原因是 在使用vue文件的时候，引入的vue文件是不全的，因为在引入的vue的package.json 文件中  里面main  指向的并不是 vue.js 文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 9][]

如果直接引入vue文件，在页面中显示，是会出现错误的，所以需要使用另一种方式 去加载 vue 文件  render  的方式进行加载vue文件。该中方式是全写。

render: function (createElement, context) {
            return new createElement(login);
       }

如果使用简写的方式

render: c => c(login)

如果使用该方式引入  vue 文件，可以解决上面出错的问题，使用该方式 跟  之前单独使用 vue 文件的时候， 直接写 template 性质上是一致的，所以在使用的时候可直接在 el  选择的 文件的地方进行 vue 文件的显示

在vue 文件中 结构是这样的

<template>
      <div>
        <h3>引入Vue文件--{
       { msg }}</h3>
      </div>
    </template>
    <script>
    /* 
        在使用 vue 文件的时候 vue文件是由 template（负责显示的内容） script（负责行为） style（负责样式） 三个标签组合而成的，
        ecport default  表示将数据共享出去，别的文件如果引入，可以直接通过引入的名称进行调用，一个文件中只能有一个export defaule
    */
    export default {
      data() {
        return {
          msg: "123"
        };
      },
      methods: {
        show() {
          console.log("调用");
        }
      }
    };
    
    /* 
      可以使用 export 分别导出数据，export是可以导出多个数据的，但是在接受的时候只能使用 
          {} 来进行选择性的接收，但是接收的时候 只能使用导出时候的名称
    */
     export var tt ="123"
     export var tt1 ="1234"
    
    
    </script>
    
    <style>
    </style>

结构介绍：

<tempalte></tempalte>  :  表示的是，html 数据

对于 <script></script> 标签中的

![20190228213126655.png][]

表示： 相当于  new Vue()  ，在里面可以进行相应的操作， export default 会将 其中的数据全部导出（用于数据的共享），需要注意的是，在一个vue文件中只能有一个export default 导出

如果想要 共享多个数据  可以单独使用 export 进行数据的导出

![20190228213350687.png][]

但是在使用的时候，需要注意的是 需要按照指定的格式来接收导出的数据

![20190228213451667.png][]

导出数据的名称是什么，就用什么数据名称去接收。

解决ES6 内容不识别的问题：

在使用的时候，webpack 只识别部分的es6 内容，并不是全部支持 es6 内容，所以在使用的时候，需要将es6 的文件，转换成低版本，以便于识别 ，这里需要使用到一个插件  Babel 插件来 进行es6 文件的低版本转换，在使用 babel 的时候需要使用到两个包

cnpm i babel-core babel-loader babel-pulgin-transform-runtime -D

cnpm i babel-preset-env babel-preset-stage-0 -D

在 webpack 的配置文件中（webpack.config.js ）中 新添加 js 文件的 解决的方案，

\{test:/\\.js$/,use:'babel-loader',exclude:/node\_modules/\}  将node\_modules 中的js 文件排除掉，因为在打包完成之后也不能使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 10][]

在配置完成之后，还需要在项目的根目录中创建 一个 .babelrc 文件，里面存放一些规则

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 11][]

补充

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 12][]

Vue 路由的使用

引入 vue-router 的插件 ： cnpm i vue-router -S

在main.js 文件中 引入 vue-router 插件，并创建对象使用

import Vue from 'vue'
    
    import app from './App.vue'
    import veuReout from 'vue-router'
    
    import app1 from './main/app1.vue'
    import app2 from './main/app2.vue'
    
    Vue.use(veuReout)
    var router = new veuReout({
        routes: [{
            path: "/app1",
            component: app1
        }, {
            path: "/app2",
            component: app2
        }]
    });
    
    var vm = new Vue({
        el: "#app",
        render: function (createElement, context) {
            return createElement(app);
        },
        router
    });

Vue 路由的子路由的使用  children

import veuReout from 'vue-router'
    
    import app1 from './main/app1.vue'
    import app2 from './main/app2.vue'
    
    import app11 from './main/app1-1.vue'
    import app22 from './main/app1-2.vue'
    
    var router = new veuReout({
        routes: [{
            path: "/app1",
            component: app1,
            children: [{
                path: "app1-1",
                component: app11
            }, {
                path: "app1-2",
                component: app22
            }]
        }, {
            path: "/app2",
            component: app2
        }]
    });
    export default router

webpack的介绍就介绍到这里，不理解的可以留言

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70]: /images/20220320/9fc7c03d8c0643b4b49bc1ea2cfd190a.png
[20190214094332599.png]: /images/20220320/5d4b34b07f6c401e9e00fabd621175c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 1]: /images/20220320/cc73a6f4c5174b189df7ba7b13835fc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 2]: /images/20220320/1f5d760f4485425bbe669c27b9049fe1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 3]: /images/20220320/c72fab68cc6d4a65b549e3d198639c82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 4]: /images/20220320/e2972b1ace3b4dfa9b0a007db3fd540a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 5]: /images/20220320/5846fe08000a460cb0f54c55a56a1499.png
[https_webpack.js.org_concepts]: https://webpack.js.org/concepts/
[https_www.cnblogs.com_QxQstar_p_5961387.html]: https://www.cnblogs.com/QxQstar/p/5961387.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 6]: /images/20220320/c1fc9e5ca58c4c01807b914ddce27774.png
[20190215083745831.png]: /images/20220320/59a47169e3cc40c59a56ee96d0c5e0e1.png
[20190214232733100.png]: /images/20220320/27ddba7ff32c48528bf499e0ffc79bc8.png
[20190327150436369.png]: /images/20220320/7518b03c892c46d7829fe582ad719525.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 7]: /images/20220320/de10ddd652fe4d9eb22fcf38c4a204d7.png
[20190214214033185.png]: /images/20220320/98f61a35272043a790b2f5ff34e6d79d.png
[20190214214234212.png]: /images/20220320/2868194d0dba417586aa7958f48b1a35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 8]: /images/20220320/93a706998c4a44c7b257e946df17b410.png
[20190214232559848.png]: /images/20220320/1fb6c60404234777b4f62d4bb5c56a44.png
[2019021423262528.png]: /images/20220320/acc78334c13e40b6ae487a094b05d7ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 9]: /images/20220320/33976076a467455bbe2206c61a5e593f.png
[20190228213126655.png]: /images/20220320/52e5d49f315144b58fd65fd3e88672a2.png
[20190228213350687.png]: /images/20220320/592a6f8cc2c749b5bba4ee371abbd414.png
[20190228213451667.png]: /images/20220320/afc702360f40489499b51de64304aef8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 10]: /images/20220320/1dc1aab0a3c74cdbb01ff5e39bd8e951.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 11]: /images/20220320/ebb3d2f704ea4d56811a517325a45d3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 12]: /images/20220320/7c3ed0f573e74d44913fac626e48f52f.png