webpack学习之webpack手动构建vue2项目

小麟
786 阅读8分钟

发现最近不论看什么平台发现都在给我推前端找工作之类的文章，基本都是找工作多久多久仍然在找工作，搞得我也有点紧迫感，既然气氛都到这个地步了，那就也找找工作吧，于是打开找工作的软件开始未雨绸缪。结果一看才发现原来大部分招聘要求我都不符合（无语加焦虑啊）。仔细有一想我还在职呢，慌什么，而且目前的工作还算比较稳定。不过发现了自己的短板就要去弥补。所以就随意挑了一条要求------对node.js，webpack有一定的了解，或者有使用经验

既然好了方向，那就可以把劲往一个方向使了。首先看了下其他人发的一些博客，有好多介绍webpack的，不过好像大多都是比较笼统，而且一个工具也不可能随意看了几篇文章就理解了的。所以就从视频上入手。在B站上找到了一个相对比较短的视频，分了十几集吧，太短没懂就没了，太长看着看着就走神。所以十几分钟刚刚好，不长不短。

看完视频之后大致了解了如何把css,sass,less,图片文件，fonts字体文件翻译编译成js文件的一个工具，用官方的话来说：webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。

不过视频没有介绍怎么把vue文件也放进去的，只是留了个小作业。于是我就查找了一些文章，找了个有详细步骤的一步一步操作，不过还是因为自己基础比较薄弱，失败了，不过也是有收获的，

比如npm i XX时有些要指定版本号，例如vue，如果不指定就会下载vue3版本的，可惜我现在还不会vue3，vue2还在摸索当中。

再比如，安装依赖报时，可以一次写多个，
npm install xxx -g是全局安装，会安装到当时指定的node_global文件夹下面
npm install xxx是本地安装，是会安装到当前项目目录下。

不过不太了解全局安装之后，本地再安装一遍会不会重复，而且全局安装的作用是什么，

试了很多种发现到最后手动构建的vue项目还是启动会有各种问题。

索性就自己慢慢一步一步的来，反正这么多次的失败，颇有收获。

一、创建项目文件夹，并初始化

例如创建一个名为webpack-vue的文件夹，然后使用 vscode 打开,运行npm init -y

npm init -y    //-y的作用是所有选项都使用初始化值。省的一遍遍来回填，

初始化之后会生成一个package.json文件：

image.png

{
  "name": "boke",  //项目名称
  "version": "1.0.0",  //项目版本
  "description": "",   //项目描述
  "main": "main.js",  //指定了程序的主入口文件---这里要改成main.js--对应vue文件里的main.js
  "scripts": {
    //写一些运行的命令
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

二、创建其他所需要的文件夹及文件：

1.src文件夹 -- （好像是固定名称不可更改）在根目录下创建

  • main.js
    src文件夹下main.js文件作为程序的入口文件，
  • App.vue
    vue文件的挂载文件---应该是这么叫的
  • views文件夹
    用来装vue文件的，例如Home.vue
  • router文件夹 vue-router的配置文件夹，在此文件夹下创建index.js文件---后面会用到

2.public文件夹 -- 在根目录下创建 -- 用来放html页面的

  • index.html 在public文件夹下创建
<!DOCTYPE html>
<html lang="">
  <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><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

3.webpack.config.js

webpack配置文件，在根目录下创建

const path = require("path")
module.exports = {
   //配置后面添加
}

二、下载所需依赖并配置

1.下载webpack webpack-cli webpack-dev-server

  • webpack
    这个不多介绍，学的就是它，怎么能不安装它呢

  • webpack-cli
    此工具用于在命令行中运行 webpack

  • webpack-dev-server
    提供了一个基本的 web server，并且具有 live reloading(实时重新加载) 功能,大概就类似于vue运行后的样子。

    注：我最开始是直接看完JavaScript后就看了一个月vue，然后就开始工作了，创建vue项目使用的是vue create [name]，然后就是选择vue版本，然后一直回车就生成了一个vue项目，第一次感觉，这么神奇，这些东西直接就命令生成了，都不用手动去写。后来慢慢理解了生成的文件都有什么作用，不过不太理解，直到现在看了webpack，才懂
    安装执行命令：

npm install webpack webpack-cli webpack-dev-server --save-dev

配置 webpack.config.js

const path = require("path")
module.exports = {
   //入口 -- path是node.js里的路径处理模块。__dirname可以用来动态获取当前文件所属目录的绝对路径
   entry: path.resolve(__dirname, './src/main.js'),
    //服务
   devServer: {
       hot: true,  //热服务--应该是编辑保存后可以立即刷新页面内容，不过我试的好像有点延迟
       allowedHosts: 'all', //该选项允许将允许访问开发服务器的服务列入白名单
       port: 8089, //端口
       open: true, //运行自动打开浏览器
       compress: true,
       client: {//允许在浏览器中设置日志级别
           overlay: {
               errors: true,
               warnings: false
           }
       }
   },
   // 出口
   output: {
       path: path.resolve(__dirname, './dist'),
       filename: '[name].js'
   },
}

下载了webpack-dev-server，肯定要启动的，所以要配置一下启动命令：

配置package.json

"scripts": {
   "build": "webpack ",
   "server": "webpack server"
},

启动时直接 npm run serve就可,好像有其他复杂的写法，还没搞明白

2.下载其他所需要的依赖：

  • css样式 style
    需要安装 style-loader和 css-loader 命令行：

    npm install --save-dev style-loader css-loader

    配置webpack.config.js

    module.exports = {
   devServer：{
       ···
   },
   //模块
   module:{
       rules: [
           //css处理模块
           {
               test: /.css$/i,
               use: ['style-loader', 'css-loader'],
               //这个顺序是从右往左的，因为要
           },
       ],
   },
   output:{
       ···
   }
};

  • less、sass类css语法
    因为我经常使用的是saa语法，所以就只安装了sass，sass-loader 命令行：

    npm install sass-loader sass  --save-dev

    配置webpack.config.js

    module.exports = {
   devServer：{
       ···
   },
   //模块
   module:{
       ruels: [
           ...
           //sass和scss
           {
               test: /.s[ac]ss$/i,
               use: [
                 // 将 JS 字符串生成为 style 节点
                 'style-loader',
                 // 将 CSS 转化成 CommonJS 模块
                 'css-loader',
                 // 将 Sass 编译成 CSS
                 'sass-loader',
               ],
           },
           ...注意:配置其他依赖规则时，只需要在ruels数组中添加对应的对象就行，不是替换。
       ],
   },
   output:{
       ···
   }
};

  • img图片类的资源
    webpack 5 中，可以使用内置的 Asset Modules，webpack5以前没学不太清楚，好像是挺复杂的，所以webpack不用下载依赖，webpack5内置过了，直接配置就行

    配置webpack.config.js

    module.exports = {
   devServer：{
       ···
   },
   //模块
   module:{
       ruels: [
           ...
           {
               test: /.(png|svg|jpg|jpeg|gif)$/i,
               //如果还有其他格式的图片，直接在上面添加后缀名就行。
               type: 'asset/resource',
           },
       ],
   },
   output:{
       ···
   }
};

  • bable应该是处理高版本js的工具
    命令行：

    npm install -D babel-loader @babel/core @babel/preset-env

    配置webpack.config.js

    module.exports = {
   devServer：{
       ···
   },
   //模块
   module:{
       ruels: [
           ...
           {
             test: /.m?js$/,
             exclude: /(node_modules|bower_components)/,
             use: {
                   loader: 'babel-loader',
                   options: {
                     presets: ['@babel/preset-env']
                   }
             }
           },
           ···
       ],
   },
   output:{
       ···
   }
};

  • html-webpack-plugin
    可以把pubilc里的html文件作为模版打包时复制的打包的文件夹下
    命令行：

    npm install --save-dev html-webpack-plugin

    这个属于插件了，所以不是module里的 配置webpack.config.js

    const htmlwebpackPlugin = require('html-webpack-plugin')
module.exports = {
   //模块
   module:{
       ···
   },
   plugins: [
       new htmlwebpackPlugin({
           title: 'webpack手动构建vue项目',
           favicon: './public/favicon.ico', // 没有图标可不配置
           template: './public/index.html'
       })
   ],
};

  • vue相关的包和插件：

  1. vue
  2. vue-loader
  3. vue-template-compiler
  4. vue-router 因为目前使用的是vue2，所以要指定版本安装，不然会报错，或者vue3语法不懂，看着别扭。
    命令行： 
    npm i vue@2.7.14  vue-loader@15.9.3 vue-template-compiler@2.7.14 vue-router@3  --save-dev
    配置webpack.config.js 
    const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
   //模块
   module:{
       ···
       {
           test: /\.vue/,
           use: 'vue-loader'
       },
   },
   plugins: [
       new VueLoaderPlugin()
   ],
};

三.配置其他文件

1. main.js

import Vue from 'vue'
import app from './App.vue'
import router from './router/index'
new Vue({
    el: '#app',
    router,
    render: h => h(app)
}).$mount('#app')

2.App.vue

<template>
	<div id="app">
		<router-view />
	</div>
</template>

<script>
export default {
	name: "app",
	components: {},
	mounted() {},
	methods: {},
};
</script>

<style>
* {
	padding: 0;
	margin: 0;
}
#app {
	height: 100vh;
	width: 100%;
	box-sizing: border-box;
}
html {
	font-size: 16px;
}
</style>

3.views文件夹下的Home.vue

<template>
    <div id="Home">
	<h1>这是Home组件</h1>
    </div>
</template>

<script>
export default {
	components: {},
	props: {},
	data() {
		return {};
	},
	created() {},
	mounted() {},
	methods: {},
	watch: {},
	computed: {},
};
</script>
<style lang="scss" scoped>
#Home {
	width: 100%;
	height: 100%;
	background: url("../assets/img/loginBackground.jpg") no-repeat center center;
        //这里记得在放一张图片，随意什么图片都行，记得名字改一下
	background-size: 100% 100%;
	color: #ffffff;
}
</style>

4.router文件夹下的index.js

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Home from '../views/Home.vue'  //引入根目录下的Hello.vue组件

Vue.use(Router)  //Vue全局使用Router

export default new Router({
    routes: [              //配置路由，这里是个数组
        {                    //每一个链接都是一个对象
            path: '/',         //链接路径
            name: 'Home',     //路由名称，
            component: Home   //对应的组件模板
        },

    ]
})

这样基本上就可以了，然后运行

npm run server

image.png 成功运行并自动打开浏览器，没有报错，只是有几个警告： 可以挨个解决下：

四、解决运行后的警告

第一个：mode

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/

image.png 大概问题就是没有设置mode的值，所以要设置一个mode值，我看其他人有把webpack.config.js文件拆分为三个文件,分别配置不同环境下的配置。因为我是刚刚懂了点基础知识，所以就没有分这么细，毕竟一口吃不成胖子，

解决办法：webpack。config.js文件里：
module.exports={
    // mode 选项用于告知 webpack 应当使用何种模式的内置优化
    mode: process.env.NODE_ENV !== 'development' ? 'production' : 'development',
}

而且mode不同的值，打包时的内容也大不相同，例如mode:"development",开发环境时，打包不会太精简。而mode:"production",生产环境时，特别精简，基本上打包后的代码在一行，空格什么的都没有。

第二个：应当是图片文件太大

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  main.js (303 KiB)
  b3f5979e86418fd78185.jpg (419 KiB)

image.png 看网上好多都是直接关闭警告提示 webpack.config.js里

 performance: {
        hints:false   
     },

后面有时间了再慢慢学习其他优化什么的，这次能运行起来就已经很满足了

over

avatar
文章
阅读
粉丝
相关推荐
手动搭建vue2.0项目-webpack5
1.1k阅读
 · 
6点赞
# vue2项目从webpack3升级至webpack5
759阅读
 · 
2点赞
webpack4.0搭建vue脚手架详解
4.8k阅读
 · 
33点赞
从0到1：webpack5 搭建 Vue3 项目——打包优化
545阅读
 · 
0点赞
webpack5基础+vue-cli配置
3.5k阅读
 · 
9点赞