WebPack 的简单使用

最新推荐文章于 2024-07-28 00:56:04 发布

坏事走开

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量595

点赞数

分类专栏： WebPack 文章标签： webpack简单的使用

本文链接：https://blog.csdn.net/weixin_38297879/article/details/87252758

版权

WebPack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

nrm 的安装：

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

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

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

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

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

下面开始安装webpack

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

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

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

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

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

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

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

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

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

设置完成之后，在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 ：表示开启热编译

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

、

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

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

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

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

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

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

//卸载版本
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 官网查看字体文件的使用，如果在使用的过程中发现，显示不出来，可以按照上面卸载插件的方式，多次使用，小编在使用的时候，出现这种情况

<body>
    <div class="box"></div>
    <span class="glyphicon glyphicon-sort-by-attributes"></span>
</body>

使用 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 文件

如果直接引入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> 标签中的

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

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

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

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

解决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 文件排除掉，因为在打包完成之后也不能使用

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

补充

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的介绍就介绍到这里，不理解的可以留言