Vue webpack搭建项目

2019-01-13  本文已影响0人  千见

什么是 webpack

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

如何完美实现上述的两种解决方案

  1. 使用 Gulp 基于流的自动化构建工具，小巧灵活，适合功能点的开发
  2. 使用 Webpack 适合与整个项目的构建

webpack 安装的两种方式

  1. 运行 npm i webpack -g 全局安装 webpack，这样就能在全局中使用 webpack 的命令
  2. 在项目根目录中运行 npm i webpack --save-dev 安装到项目依赖中

配置

1.现在先要装 JQuery

webpack 能够做什么事情?

正常的 js 文件不能引用其他的 js 文件

  1. webpack 能够处理 JS 文件的互相依赖关系
  2. webpack 能够处理 JS 的兼容问题，将高级的浏览器所不能识别的语法，转换为浏览器所能识别的语法

修改代码 main.js 以后怎么办？

重新输正常代码打包很麻烦，所以我们配置 webpack 的配置文件：

  1. 在项目的根目录创建文件 webpack.config.js
  2. 在该文件中像这样配置
/* jshint esversion: 6 */
// 这个配置文件，其实就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个配置对象
const path = require("path");
module.exports = {
  // 手动指定入口和出口
  entry: path.join(__dirname, "./src/main.js"), // 表示要使用 webpack 打包哪个文件
  output: {
    path: path.join(__dirname, "./dist"), // 指定打包好的文件，输出到哪个目录中
    filename: "bundle.js" // 指定输出的文件名称
  }
};

配置以后 webpack 命令发生了什么？

  1. 首先， webpack 发现我们并没有指定入口和出口，他就会去项目的根目录去查找是否有 webpack.config.js 配置文件
  2. 当找到配置文件后，解析执行该文件，当解析执行文件后，就得到了配置中所导出的配置对象后，就拿到了 配置对象中指定的入口和出料口，然后进行打包构建

现在的话每次改动后输入 webpack 即可打包，但是就算这样每次也都要改，很麻烦

  1. 使用 webpack-dev-server 这个工具，来实现自动打包编译的功能
  1. 即使这样配置 contentBase 指令的过程也很麻烦，需要指定启动的目录，而且还要修改 index.html 和 script 标签的 src 属性，所以推荐使用 html-webpack-plugin 插件配置启动页面
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  // 手动指定入口和出口
  entry: path.join(__dirname, "./src/main.js"), // 表示要使用 webpack 打包哪个文件
  output: {
    path: path.join(__dirname, "./dist"), // 指定打包好的文件，输出到哪个目录中
    filename: "bundle.js" // 指定输出的文件名称
  },
  plugins: [
    // 配置插件的节点
    // 3
    new webpack.HotModuleReplacementPlugin(), // new 一个热更新的模块对象
    new htmlWebpackPlugin({
      // 创建一个内存中生成 html 的插件
      template: path.join(__dirname, "./src/index.html"), //会根据指定的模板页面，生成的内存中页面’
      filename: "index.html"
    })
  ]
};

这个插件的两个功能 1.自动在内存中模板指定页面生成一个内存中的页面 2.自动把打包好的 bundle.js 追加到页面中去

webpack 打包 css 文件

module: {
  // 这个节点用于配置所有的第三方模块加载器
  // 规则 --- css
  rules: [
    // 配置处理 .css 文件的第三方 loader 模块,调用顺序从右到左
    { test: /\.css$/, use: ["style-loader", "css-loader"] }
  ];
}

webpack 无法处理 URL，解决方法和上面一样

注：一些依赖关系，忘了也没关系,这几个都是内部依赖，不需要写到 webpack.config.js 当中

如何配置使得图片不会转成 base64 (为什么？ --> 我在提问)

在 url-loader 的配置中添加一句

{ test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=200,000'}

limit 给定的值是图片的大小，单位是比特，如果我们引用的图片大于或者等于给定 limit 的值就不会转为 base64 格式的字符串。

Q 为什么图片的名字会被改掉

A 防止重名，url 中的 '/' 问题

如果就是不想改名字的话

{ test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=200,000&name=[name].[ext]'}
<!-- [name]保持原来的名字，[ext]保持原来的格式 -->

但是我也还想要 hash

{ test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=200,000&name=[hash:8]-[name].[ext]'}

Unexpected token / in JSON at position 113 while parsing near

json 文件不能写注释

'webpack-dev-server' 不是内部或者外部命令，也不是可运行的程序

--> 你没装
--> 配置文件明明说你装了 -> -> 我不是，我不是，我没有，就还是没装（没了配置，但是配置文件还有记录）

解决 webpack 默认无法处理 ES6 新特性 class static

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

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

安装

我们可以在 webpack 中运行如下两套包，全装 babel 相关的 loader 功能

配置

打开 webpack 的配置文件，在 module 节点下的 rule 数组中，添加一个新的匹配规则：

{ test:/\.js$/, use: 'babel-loader', exclude: /node_modules/ }
// 配置 babel 的规则时，必须把 node_modules 选项排除掉
// 1.如果不排除的话，则 babel 会把 node_modules 中的所有第三方JS文件都打包翻译，会非常消耗 CPU ，且非常慢
// 2.哪怕硬钢都转换了，项目也无法正常运行

在根目录地下，新建 .babelrc

新建 .babelrc 的 Babel 配置文件，这是个 JSON 文件（必须符合 JSON 语法）

{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]
}

如何解决 eslint-label 找不到问题

将 eslint 和 eslint-label 装一起：
npm i eslint eslint-label -D

webpack 和 Vue

在 webpack 中安装 Vue: npm i vue -S

但是这种 Vue 不能支持我们直接像普通网页一样使用

import Vue from "Vue";

在包的查找过程中：

  1. 在项目根目录中有没有 node_modules 的文件夹
  2. 根据包名，找对应的文件夹
  3. 在 Vue 的文件夹中，找一个 package.json 的包配置文件
  4. 在 package.json 文件夹中，查找一个 main 属性 【 main 属性指定了这个包在被加载的时候的入口文件 】
    • "main": "dist/vue.runtime.common.js" // 这个文件暴露一个实例供我们使用,是 Vue.js 的阉割版
    • 以往那样我们用的是 "main": "dist/vue.js"

解决方案

// 和 modules 平级
  resolve: {
  alias: { // 设置 vue 被导入包的时候的配置
    'vue$': 'vue/dist/vue.js'
  }
},

在 vue 的 runtime-only 中如何渲染一个组件？

.vue 文件中的 data 和 method 等属性

在 ES6 中，也通过规范的形式，规定了 ES6 中如何导入和导出模块:

export default {
  data() {
    return {
      msg: "123"
    }; // 组件中的 data 必须是个 function
  },
  methods: {
    show() {
      console.log("调用了 login.vue 中的  show 方法");
    }
  }
};

webpack 和 vue-router

但是我们如何显示组件呢？

如果像往常一样将 router-view 和 router-link 写到 el 所控制的元素中的话，会被 render 冲掉,所以我们写到 render 所加载的模板中去

webpack 和 vue 和 css

最好将路由模块抽离

初识 Mint-UI

MUI 不同于 MInt-UI， MUI 只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的 HTML ；而 Mint-UI ，是真正的组件库，是使用 Vue 技术封装出来的成套的组件，可以无缝的和 Vue 项目惊醒集成开发
因此， MUI 和 Bootstrap 感觉上类似，但是 Mint-UI 只适用于 Vue 项目

安装与配置，点击这里查看文档

安装：npm i mint-ui -s

导入所有的 mint-ui 组件

import MintUI from "mint-ui";
import "mint-ui/lib/style.css";
Vue.use(MintUI);

按需导入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D
然后，将 .babelrc 修改为：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

// 按需导入 mint-ui 组件
import { Button } from 'mint-ui';
// 使用 Vue.component 注册按钮组件
Vue.component(Button.name, Button);

使用

CSS component 导入后就可以使用
JS component 则是还是需要按需引用

上一篇下一篇

猜你喜欢

热点阅读