WebPack 的简单使用

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> : 是负责行为

<style lang="sass" scoped> </style>  :  负责 样式  ,当然可以选择不同的 语言   scoped 表示的是只在当前的vue文件中有效

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值