2024年Vue基础知识总结 9：vue webpack打包原理_vue打包(1)，【秋招面试专题解析

最新推荐文章于 2024-06-07 17:03:35 发布

2401_84620288

最新推荐文章于 2024-06-07 17:03:35 发布

阅读量543

点赞数 19

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84620288/article/details/138687064

版权

程序员专栏收录该内容

87 篇文章 0 订阅

订阅专栏

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：

3、plugin的使用过程

4、代码实例

5、htmlWebpackPlugin

6、第三方插件uglifyjs-webpack-plugin

7、webpack-dev-server搭建本地服务器

一、前端模块化

webpack是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。

并且不仅仅是JavaScript文件，还有CSS、图片、json文件等等，在webpack中都可以被当做模块来使用。

二、打包

webpack中的各种资源模块进行打包合并成一个或多个包（Bundle）。

在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

和gulp的有什么区别？

gulp叫做前端自动化任务管理工具；
gulp会定义一系列的task，处理各种事务（ES6、ts转化、图片压缩、scss转成css）
通过gulp依次执行这些task，并且让整个流程自动化；

const gulp = require('gulp')
const babel = require('gulp-babel')

gulp.task('js',() => 
    gulp.src('src/*.js')
        .pipe(babel({
            prests:['es2015']
        }))
        .pipe(gulp.dest('dist'))
);

什么时候使用gulp呢？

如果工程模块依赖比较简单，甚至没有用到模块化的概念；
只需要进行简单的合并、压缩；

总而言之，webpack是功能更加强大的gulp。

三、安装webpack

1、安装node.js

打开官网下载链接:Download | Node.js 我这里下载的是node-v6.9.2-x64.msi,如下图：

2、安装webpack

npm install webpack@3.6.0 -g

四、webpack打包js

1、普通打包方式

webpack .\src\main.js .\dist\bundle.js

打包之后，就可以在index.html中引入bundle.js了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="./dist/bundle.js"></script>
</body>
</html>

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

（1）webpack.config.js

const path = require('path')

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

（2）package.json

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

3、理解开发时依赖和运行时依赖

本地安装webpack

npm install webpack@3.6.0 --save-dev

在终端中敲的命令，运用的都是全局的webpack。

五、loader

1、loader简介

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：

npm install --save-dev css-loader
npm install --save-dev ts-loader

然后指示 webpack 对每个 .css 使用 css-loader，以及对所有 .ts 文件使用 ts-loader：

webpack.config.js

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

2、使用 loader

在你的应用程序中，有三种使用 loader 的方式：

配置（推荐）：在 webpack.config.js 文件中指定 loader。
内联：在每个 import 语句中显式指定 loader。
CLI：在 shell 命令中指定它们。

3、配置[Configuration]允许你在 webpack 配置中指定多个 loader

这是展示 loader 的一种简明方式，并且有助于使代码变得简洁。同时让你对各个 loader 有个全局概览：

六、less与url-loader

1、安装less

npm install --save-dev less-loader less

2、less示例

将 css-loader、style-loader 和 less-loader 链式调用，可以把所有样式立即应用于 DOM。

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

3、安装url-loader

npm install --save-dev url-loader

4、url-loader用法

url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

import img from './image.png'

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

当图片大小大于limit中限制时，需要使用file-loader进行图片加载，再转为base64字符串。

5、file-loader

1、安装file-loader

npm install --save-dev file-loader

七、加载图片代码实例

1、项目目录

2、index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="./dist/bundle.js"></script>
</body>
</html>

3、main.js

// 1.使用commonjs的模块化规范
const {add, mul} = require('./js/mathUtils.js')

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

// 2.使用ES6的模块化的规范
import {name, age, height} from "./js/info";

console.log(name);
console.log(age);
console.log(height);

// 3.依赖css文件
require('./css/normal.css')

// 4.依赖less文件
require('./css/special.less')
document.writeln('<h2>你好啊,哪吒!</h2>')

4、info.js

export const name = 'why';
export const age = 18;
export const height = 1.88;

5、mathUtils.js

export const name = 'why';
export const age = 18;
export const height = 1.88;

6、normal.css

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

7、special.less

@fontSize: 50px;
@fontColor: orange;

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

八、ES6语法处理

webpack打包的js文件，并没有将ES6语法转译成ES5的语法，因此可能对某些浏览器不兼容，此时需要使用babel。

1、安装babel-loader

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

2、在 webpack 配置对象中，需要添加 babel-loader 到 module 的 loaders 列表中，

像下面这样：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
    }
  ]
}

bundle.js从ES6语法编译为ES5语法了。

九、webpack使用vue的配置过程

1、安装vue的三种方式

直接下载应用
CDN引入
npm安装

2、npm安装vue

因为不是运行时依赖，以后部署的时候也要使用vue，所以不需要-vue

npm install vue --save

runtime-only -> 代码中，不可以有任何的template

runtime-compiler -> 代码中可以有template，因为有compiler可以用于编译template

使用如下配置解决找不到template的报错问题：

resolve: {
    // alias: 别名
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

十、el和template区别

1、正常运行之后，我们要考虑一个问题

如果我们将data中的数据显示在界面中，就必须修改index.html；

如果我们后面自定义了组件，也必须修改index.html来使用组件；

但是html模板在之后的开发中，并不希望手动的频繁的修改index.html；

2、解决方法 --> 定义template属性

在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容；

这里我们可以将div元素中的{{message}}内容删掉，只保留一个基本的id为div的元素；

但是如果我们依然希望在其中显示{{message}}的内容，我们可以定义一个template属性；

如果el和template同时存在时，template会替换掉el的内容：

new Vue({
    el:'#app',
    template:`
        <div>
            <h2>{{message}}</h2>
            <button @click="btnClick">按钮</button>
            <h2>{{name}}</h2>
        </div>
    `,
    data:{
        message:'hello webpack',
        name:'哪吒'
    },
    methods:{
        btnClick(){
            console.log('i am csdn 哪吒！')
        }
    }
})

简化：

const App = {
     template:`
        <div>
            <h2>{{message}}</h2>
            <button @click="btnClick">按钮</button>
            <h2>{{name}}</h2>
        </div>
    `,
    data:{   
        return {
            message:'hello webpack',
            name:'哪吒'
        }
    },
    methods:{
        btnClick(){
            console.log('i am csdn 哪吒！')
        }
    }
}

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

再次简化：

app.js

export default {
  template:  `
  <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
  </div>
  `,
  data() {
    return {
      message: 'Hello Webpack',
      name: 'coderwhy'
    }
  },
  methods: {
    btnClick() {

    }
  }
}

main.js

// 5.使用Vue进行开发
import Vue from 'vue'
import App from './vue/app'

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

终极优化

App.vue

<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
    <Cpn/>
  </div>
</template>

<script>
  import Cpn from './Cpn'

  export default {
    name: "App",
    components: {
      Cpn
    },
    data() {
      return {
        message: 'Hello Webpack',
        name: 'coderwhy'
      }
    },
    methods: {
      btnClick() {

      }
    }
  }
</script>

<style scoped>
  .title {
    color: green;
  }
</style>

main.js

// 5.使用Vue进行开发
import Vue from 'vue'
import App from './vue/App.vue'

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

但是，此时程序无法加载vue文件，需要npm安装loader

npm install vue-loader vue-template-compiler --save-dev

webpack.config.js中配置：

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

十一、认识plugin

1、plugin是什么？

plugin是插件的意思，通常适用于对某个现有的框架的扩展。

webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等。

2、loader和plugin的区别？

对象篇

模块化编程-自研模块加载器

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2401_84620288

关注

19
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
2024年Vue基础知识总结 9：vue webpack打包原理_vue打包(1)，【秋招面试专题解析

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】3、plugin的使用过程4、代码实例6、第三方插件uglifyjs-webpack-plugin7、webpack-dev-server搭建本地服务器loader 用于对模块的源代码进行转换。loader 可以使你在import。
复制链接

扫一扫