《前端》使用webpack+vue从零开始打造前端项目(2020最新版)一最基础的小demo学习--bilibili--2021-01-18

最新推荐文章于 2021-10-16 16:21:30 发布

bellediao

最新推荐文章于 2021-10-16 16:21:30 发布

阅读量306

点赞数 1

分类专栏：前端 webpack VUE.JS

本文链接：https://blog.csdn.net/bellediao/article/details/112790465

版权

前端同时被 3 个专栏收录

257 篇文章 1 订阅

订阅专栏

VUE.JS

62 篇文章 0 订阅

订阅专栏

webpack

21 篇文章 0 订阅

订阅专栏

bilibili中找到一个讲的很好的webpack+vue教程：https://www.bilibili.com/video/BV157411V7Dh?from=search&seid=13060654339969180489

代码见git：https://github.com/BellaDiao/webpack-vue-BasicStudy

一、准备工作

1、项目初始化：

npm init -y

生成package.json
2、安装webpack和webpack-cli

npm install -D webpack webpack-cli

（-D是--save-dev的简写-开发环境依赖）

生成node_moudule，更新package.json，会生成如下devDependencies

二、编写项目入口

1、编写index.html

在项目根目录下创建一个index.html，作为项目文件主页，编写内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>从零开始打造vue项目</title>
</head>
<body>
   <div id="app"></div> 
   <!--<script src="./dist/bundle.js"></script>-->
</body>
</html>

2、编写vue根实例

（把相关的业务代码放在src目录下）在src下创建一个main.js作为项目的总入口文件。

首先要安装vue，在命令行执行：npm install vue

再在main.js中写入：

import Vue from 'vue'
  new Vue({
      el:'#app'
  })

3、挂载App组件到vue根实例中

先在src下新建文件App.vue

<template>
    <div>this is App</div>
</template>
<script>
export default {
    name:'App'
}
</script>
<style scoped>

</style>

再挂载到main.js中

// 1 创建vue根实例--要安装vue：npm install vue
// 2 挂载app组件
//  导入vue
import Vue from 'vue'
//  导入App组件
import App from './app.vue'
// 创建vue的根实例
new Vue({
    el: 'app',
    components: {
        //   组件名：组件对象
        //   App: App 可以简称成
         App
    },
    template:'<App/>'//  这里的App相当于在components中定义的组件名
})

最后在index.html中导入main.js

添加如下： <script src="./src/main.js"></script> 点击浏览器测试一下。

不成功，因为浏览器是不认识import 这些东西，所以要使用webpack完成打包。下面介绍webpack的基本配置。

三、webpack的基本配置

1、在根目录下创建webpack配置文件：webpack.config.js，编写最基本配置：

// 导入path模块
const path=require('path')

module.exports={
    // 打包入口
    entry:'./src/main.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist') //当前目录下的绝对路径
    }
}

在命令行输入npx webpack（在当前目录下的node_modules中找webpack，而不是全局找）

但其实有比输入npx webpack更简单的方法：

在package.json中的“scripts”下输入“build”命令：

输入npm run build 即可

报错：

ERROR in main
Module not found: Error: Can't resolve './src' in 'E:\BellaUP\firstVue'

webpack 5.15.0 compiled with 1 error and 1 warning in 134 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! firstVue@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the firstVue@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Program Files\nodejs\node_cache\_logs\2021-01-18T11_16_13_293Z-debug.log

报错：

报错原因：webpack只能打包js文件，对于后缀为vue的文件不能打包。

补充：什么是loader？

对于webpack来说，默认只能打包处理JS文件，或者说JS模块，但是webpack作为模块打包工具，需要打包的模块肯定不仅仅只有JS模块，还有：图片模块，CSS模块等等；但是webpack默认是没有图片模块、CSS模块打包功能的，所以问题来了，webpack如何打包除了JS模块之外的其他模块哪？那就得用到第三方loader了，所以按照我们表面理解：loader就是帮助webpack打包那些webpack默认打包不了的模块的工具；

四、使用vue-loader打包vue文件

官网地址：https://vue-loader.vuejs.org/zh/guide/#vue-cli

vue-loader

1、安装vue-loader和vue-template-compiler

npm install vue-loader vue-template-compiler -D

2、安装完后，要安装css-loader

npm install -D css-loader

3、webpack配置

需要在webpack.config.js中配置打包规则。

    module:{
        rules:[{//当遇到以vue结尾文件时，用vue-loader来打包
            test:/\.vue$/,
            loader:'vue-loader'
        }]
    },

从vue-load@15版本开始，vue-loader需要在webpack中添加一个插件：

const VueLoaderPlugin=require('vue-loader/lib/plugin')

插件引用：

   // 插件
    plugins:[
        new VueLoaderPlugin()
    ]

webpack.config.js完整代码：

// 导入path模块
const path=require('path')

// 引入vue-loader插件
const VueLoaderPlugin=require('vue-loader/lib/plugin')
module.exports={
    // 打包入口
    entry:'./src/main.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist') //当前目录下的绝对路径
    },
    // 配置打包规则
    module:{
        rules:[{//当遇到以vue结尾文件时，用vue-loader来打包
            test:/\.vue$/,
            loader:'vue-loader'
        }]
    },
    // 插件
    plugins:[
        new VueLoaderPlugin()
    ]
}

执行打包命令。输入： npm run build，生成bundle.js即为打包成功。

代码有个警告：


WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
配置中的警告
尚未设置“mode”选项，对于此值，webpack将回退到“production”。将“mode”选项设置为“development”或“production”，为每个环境启用默认值。
也可以将其设置为“无”以禁用任何默认行为。了解更多：https://webpack.js.org/configuration/mode/

解决这个警告：mode属性。

报错：

原因：

vue会打包生成三个文件：

runtime only 的文件vue.common.js
compiler only 的文件 compiler.js
runtime + compiler 的问题vue.js

默认导出的是vue.common.js

如何解决：在webpack中添加别名配置：

    resolve:{
        alias:{
            'vue':'vue/dist/vue.js'
        }
    }

当我们导入vue时，是去加载vue/dist/vue.js文件，而不是默认的vue.common.js

完整代码：

// 导入path模块
const path=require('path')

// 引入vue-loader插件
const VueLoaderPlugin=require('vue-loader/lib/plugin')
module.exports={
    // mode:'production',//生产环境
    mode:'development',//开发环境

    // 打包入口
    entry:'./src/main.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist') //当前目录下的绝对路径
    },
    // 配置打包规则
    module:{
        rules:[{//当遇到以vue结尾文件时，用vue-loader来打包
            test:/\.vue$/,
            loader:'vue-loader'
        }]
    },
    // 插件
    plugins:[
        new VueLoaderPlugin()
    ],
    resolve:{
        alias:{
            'vue':'vue/dist/vue.js'
        }
    }
}

总结：

webpack本身只能打包js文件，如果要打包其他文件，就要借助loader。

loader其实就是专门用于打包特定文件的处理程序。