Vue.js知识——webpack、loader、Vue的配置

转x33g5p2x  于2021-11-21 转载在 Vue.js  
字(6.4k)|赞(0)|评价(0)|浏览(792)

webpack的基本使用

webpack版本：3.6.0

在文件下创建两个文件夹：

  • src，源文件
  • dist，存放打包之后的文件

src文件夹下：写入两个文件

main.js(入口文件)
（CommonJS的导入方式）

const {add,mul} = require("./aaa.js")

console.log(add(20,30));

console.log(mul(20,20));

aaa.文件：被导入的文件

function add(num1,num2){
  return num1+num2
}

function mul(num1,num2){
  return num1 * num2
}

module.exports={
  add,
  mul
}

在总文件下写入index.html

之后在终端输入 webpack ./src/main.js ./dist/bundle.js

之后就会在dist文件夹下生成一个bundle.js，在index.html中导入，就可以进行文件测试了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./dist/bundle.js"></script>
</body>
</html>

webpack.config.js配置和package.json配置

上述中在终端输入 webpack ./src/main.js ./dist/bundle.js 就可以进行打包，但是如果想直接输入
npm run build 就直接进行上述操作，该如何设置？

在总文件夹下设置一个 webpack.config.js 文件，名字固定，不能更改

webpack.config.js中设置：

const path = require('path')

module.exports={
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,"dist"),
    filename:'bundle.js'
  }
}

然后在终端输入 npm init 进行初始化操作，提示输入名字等等信息，最后得到一个package.json文件。在scripts脚本对象中，输入"build":"webpack"，就可以使用npm run build进行打包操作了

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },

loader

loader是webpack中一个非常核心的概念

  • 之前的实例中，主要使用webpack来处理js代码，并且webpack会自动处理js之间相关的依赖
  • 但是，在开发中不仅仅有基本的js代码处理，也需要加载css，图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5，scss，less装成css，将jsx,.vue文件转成js文件等等
  • 对于webpack本身能力来说，对于这些转化是不支持的。
  • 这时就需要webpack的扩展loader

使用步骤：

  1. 通过npm安装需要使用的loader
  2. 在webpack.config.js中的modules关键字下进行配置

css文件处理

项目开发过程中，必然需要添加很多样式，而样式往往写到一个单独的文件中。

  1. 在src目录中，创建一个css文件夹，其中创建一个normal.css文件
  2. normal.css中的代码非常简单，就是将body设置成红色

这个时候normal.css文件会生效吗？
当然不会，因为根本没有引用它。webpack也不可能找到他，因为需要一个入口，webpack会从入口开始查找其他依赖的文件。

在main.js文件中引入normal.css

require("./css/normal.css")
这时候如果打包会报错，提示说加载normal.css文件必须有对应的loader，在终端输入
npm install css-loader@x.x.x --save-dev
在webpack的官网中，可以找到关于样式的loader使用方法，按照官方配置webpack.config.js文件:

module:{
    rules:[
      {
        test:/\.css$/,
        use:["style-loader","css-loader"]
        //css-loader 只负责将css文件进行加载
        //style-loader 负责将样式添加到DOM中
        //使用多个loader时，是从右向左
      }
    ]
  }

此时还发现了一个“style-loader”，如果不安装style-loader，即使是重新打包了，样式也不会显示。这时就需要一个style-loader来处理。

less文件处理

如果希望在项目中使用scss,less，stylus来写样式，webpack是否可以处理呢？

以less为例子，创建一个less文件，依然放在css文件夹中.

@fontSize: 50px;
@fontColor:orange;

body{
  font-size: @fontSize;
  color: @fontColor;
}

在终端输入npm install less less-loader --save-dev下载less和less-loader，下载好之后需要先配置文件，在webpack.config.js文件中输入

test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],

html页面中 写入document.writeln("<h1>Hello,Vue</h1>"),之后成功打包！

打开页面：

图片文件处理

在上述中的css文件中加入一张图片

body{
  background-color: red;
  background: url("../img/1.jpg");
}

如果此时直接打包，会出现报错。提示：需要一个合适的loader来解决这个类型的文件。

在终端输入 npm install --save-dev url-loader@1.1.2下载安装url的loader.

下载完之后需要到webpack.config.js文件中进行配置

{
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片，小于limit时，会将图片编译成base64字符串形式
              limit: 8192
            },
          },
        ],
      },

其中有个options下的limit属性，如果当文件的比特大小大于当前大小时，就会将图片编译成base64字符串的形式，图片也可以直接显示在页面上，但是如果文件大于当前大小，就会报错。提示需要下载安装file-loader。

安装好file-loader之后，文件大于limit属性规定的大小，就会将图片重新命名（按照哈希算法命名）并打包到dist文件夹，此时页面也不会显示图片，这是因为webpack会将生成的路径（index源文件的路径）直接返回给使用者，但是整个程序都是打包在dist文件下的，所以需要配置一个路径

module.exports={
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,"dist"),
    filename:'bundle.js',
    publicPath:'dist/',//添加一个这样的路径
  },

重新打包就可以显示了。

但是此时会发现webpack打包时，重新命名的文件名太长了，并且会直接打包在dist的根目录下。

如果文件过多的情况下就显得非常凌乱，并且不知道哪个文件是哪个文件了，这时就需要进行一定的配置，希望打包后重新命名的文件名依然是原先的名字，为了防止命名冲突，哈希值只保留8位，并且相同类型的文件在同一个文件夹下。

{
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片，小于limit时，会将图片编译成base64字符串形式
              limit: 8192,
              name:'img/[name].[hash:8].[ext]' //[]代表中间的值为一个变量，可以动态获取
            },
          },
        ],
      },

此时就发现dist文件夹下多了个img文件夹，照片的文件也按照原来的命名并加上了哈希值。

ES6转成ES5的babel

如果仔细阅读webpack打包的js文件，会发现ES6的语法并没有转成ES5。那么就意味着一些对ES6不支持的浏览器没有办法很好的运行代码。

这时就需要用到babel

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
{
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,  //exclude:除了,这些文件一般不会进行打包
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }

Vue的配置

在实际项目中，会使用vuejs进行开发，而且会以特殊的文件来组织vue的组件，所以需要学习webpack环境中集成Vuejs

首先需要安装vue， 在终端输入npm install vue，下载安装后，要在main.js中进行导入

//使用vue开发
import Vue from 'vue'

const app =new Vue({
  el:"#app",
  data:{
    message:"vue中的message"
  }
})
<body>
  <div id="app">
    {{message}}
  </div>
<script src="./dist/bundle.js"></script>
</body>

但是此时浏览器中会有报错，这个错误说的是当前使用的是runtime-only版本的Vue，这里暂时只能有解决方案，原理还在后面。

需要在webpack.config.js中配置

resolve:{
    alias:{//别名
      'vue$':'vue/dist/vue.esm.js'
    }
  }

el 和template的区别

上述代码成功运行后，考虑一个问题：

  • 如果希望将data中的数据显示在界面中，就必须是修改index.html，如果后面自定义了组件，也必须修改index.html来使用组件，但是html模板在开发中，不希望被频繁的修改，是否可以做到呢？

在上述的Vue实例中，定义了el属性，用于和index.html中的#app来绑定，让Vue实例之后可以管理它其中的内容，现在就将div元素中的{{message}}内容删掉，只保留最基本的id为app的div元素，但是依然想显示{{message}}的内容，该如何处理？

首先定义一个template的属性，代码如下：

//main.js
new Vue({
  el:"#app",
  template:` <div> <h2>{{message}}</h2> </div> `,
  data:{
    message:"vue中的message"
  }
})

代码重新打包，页面依然显示message

现在想实现，组件与实例分离，如何做到？

  1. 首先创建一个App.vue文件，模板如下：
//App.vue
<template>
  //写入组件的模板
</template>

<script> export default { name="App", //写入组件的属性 } </script>

<style> //写入组件的样式 </style>
  1. 可以将实例中的属性复制到.vue文件中：
//App.vue
<template>
  <div>
    <h2>{{message}}</h2>
  </div>
</template>

<script> export default { name:"App", data(){ return { message:"这是vue文件中的信息", } } } </script>

<style> h2{ color: blue; } </style>
  1. 创建好组件后，需要在main.js文件中导入
import App from './vue/App.vue'

new Vue({
  el:"#app",
  template:'<App/>',
  components:{
    App
  }

})

4.但是此时无法直接加载，因为这是新的格式文件，也是需要专用的loader：
npm install vue-loader vue-template-compiler --save-dev

5.安装之后还需要进行webpack.config.js文件配置

{
        test:/\.vue$/,
        use:["vue-loader"]
      }
    ]

HtmlWebpackPlugin的使用

目前，index.html文件是存放在根目录下的，在真实发布项目的时候，发布的是dist文件夹内的文件，但是现在dist文件夹中没有index.html文件，那么整个项目就无法启动。这时就要用到 HtmlWebpackPlugin插件来将index.html文件打包到dist文件下。

HtmlWebpackPlugin可以做这些事情：

  • 自动生成一个index.html文件在dist文件夹下（可以指定index.html 的模板）
  • 在index.html文件中插入script的标签
  1. 首先安装插件：npm install html-webpack-plugin --save-dev
  2. 配置webpack.config.js文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
  ...,
  plugins:[
    new HtmlWebpackPlugin({
    template: 'index.html'
  })
  ]	
}

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/xiaotangyu7dong/article/details/120066503

内容来源于网络，如有侵权，请联系作者删除！

vue.jsJavaScriptnode.js前端知识菜鸟入门

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com