关于前端:基础搭建从零开始基于-Webpack5-搭建一个-VueCli

4次阅读

共计 9624 个字符，预计需要花费 25 分钟才能阅读完成。

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点 是我的座右铭，根底是进阶的前提 是我的初心

背景

大家平时在进行 Vue 开发的时候，大部分人都是应用 Vue-cli 这个现成的 Vue 脚手架来进行开发的，然而用它用了这么久，你难道不想本人搭一个属于本人的 Vue-cli 吗？

明天我就带大家来搭建一个根本的 Vue-cli ，也能够让大家对 Webpack 有更深刻的理解！倡议大家肯定要跟着我一步一步来哦！

当时阐明：本文只介绍 vue-cli 根本配置，对于优化、标准这两方面，我前面会再写两篇文章进行解说

1、建一个文件夹

新建一个文件夹 my-vue-cli 用来寄存我的项目

2、初始化 npm

在终端中输出

npm init

而后始终回车就行，这样能使我的项目领有一个 npm 治理环境，之后能够在此环境上装置咱们所须要的包

3、webpack、webpack-cli

装置 webpack、webpack-cli

  • webpack ：打包的工具

  • webpack-cli ：为 webpack 提供命令行的工具

    npm i webpack webpack-cli -D

4、src、public

在根目录下新建 src、public 这两个文件夹，前者用来搁置我的项目次要代码，后者用来放我的项目专用动态资源

  • public/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>my-vue-cli</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

  • src/main.js 

    import {add} from './tools/add.js'

console.log(add(1, 2))
console.log('我是 main.js')

  • src/tools/add.js 

    export const add = (a, b) => {return a + b}

5、入口文件

刚刚的 main.js 就是咱们的入口文件，也就相当于整个援用树的根节点，webpack 打包须要从入口文件开始查找，始终到打包所有援用文件。

进行入口文件的配置，在根目录下新建 webpack.config.js ：

const path = require('path')

module.exports = {
  // 模式 开发模式
  mode: 'development',
  // 入口文件 main.js
  entry: {main: './src/main.js'},
  // 输入
  output: {
    // 输入到 dist 文件夹
    path: path.resolve(__dirname, './dist'),
    // js 文件下
    filename: 'js/chunk-[contenthash].js',
    // 每次打包前主动革除旧的 dist
    clean: true,
  }
}

6、配置打包命令

到 package.json 里配置打包命令：

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

当初咱们到终端输出 npm run build ，就能发现打包胜利：

然而这其实不是咱们要的目标，咱们的目标是将这个打包后的最终 js 文件，插入到刚刚的 index.html 中，因为 js 文件得让 html 文件援用，才有意义嘛！所以咱们不仅要打包 js，还要打包 html

小常识：loader 和 plugin

  • loader ：使 webpack 领有解析非 js 文件的能力，如 css、png、ts 等等
  • plugin ：拓展 webpack 的打包性能，如优化体积、显示进度条等等

7、打包 html

打包 html 须要用到 html-webpack-plugin 这个插件，也就是 plugin，所以须要装置一下：

npm i html-webpack-plugin -D

并且须要在 webpack.config.js 中配置一下

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 刚刚的代码...
  
  // 插件都放 plugins 中
  plugins: [
    new HtmlWebpackPlugin({
      // 抉择模板 public/index.html
      template: './public/index.html',
      // 打包后的名字
      filename: 'index.html',
      // js 文件插入 body 里
      inject: 'body',
    }),
  ]
}

当初咱们能够在终端中执行打包命令 npm run build 能够看到 html 被打包了，且打包后的 html 主动引入打包后的 js 文件

当初咱们能够关上打包后的 index.html ，发现控制台能够输入，阐明胜利了！

打包 CSS

在 src 下新建 styles 文件夹，用来寄存款式文件文件

  • src/styles/index.scss 

    body {background-color: blue;}

    而后咱们在入口文件 main.js 中引入

    import './styles/index.scss'

// 刚刚的代码...

    咱们的目标是，打包 index.scss 这个文件，并且让 index.html 主动引入打包后的 css 文件，所以咱们须要装置以下几个货色：

  • sass、sass-loader ：能够将 scss 代码转成 css
  • css-loader ：使 webpack 具备打包 css 的能力
  • sass-resources-loader ：可选，反对打包全局公共 scss 文件
  • mini-css-extract-plugin ：可将 css 代码打包成一个独自的 css 文件

咱们装置一下这些插件

npm i 
sass
sass-loader
sass-resources-loader
mini-css-extract-plugin
-D

而后配置一下 webpack.config.js 

// 方才的代码...
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  // 方才的代码...
  plugins: [
    // 方才的代码...
    new MiniCssExtractPlugin({
      // 将 css 代码输入到 dist/styles 文件夹下
      filename: 'styles/chunk-[contenthash].css',
      ignoreOrder: true,
    }),
  ],
  module: {
    rules: [
      {
        // 匹配文件后缀的规定
        test: /\.(css|s[cs]ss)$/,
        use: [
          // loader 执行程序是从右到左
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
          // {
          //   loader: 'sass-resources-loader',
          //   options: {
          //     resources: [
          //       // 搁置全局引入的公共 scss 文件
          //     ],
          //   },
          // },
        ],
      },
    ]
  }
}

此时咱们从新执行打包命令 npm run build ，能够发现呈现了打包后的 css 文件，且 index.html 中主动引入了 css 文件：

咱们能够看看页面，能够看到，body 的背景曾经变成蓝色，阐明有成果了：

打包图片

webpack5 中曾经废除了 url-loader ，打包图片能够应用 asset-module ，咱们先搁置一张图片在 src/assets/images 中：

并且改写一下 index.css 

body {
  width: 100vw;
  height: 100vh;
  // 引入背景图片
  background-image: url('../assets/images/guang.png');
  background-size: 100% 100%;
}

而后咱们在 webpack.config.js 中增加打包图片的配置

  module: {
    rules: [
      // 刚刚的代码...
      {
        // 匹配文件后缀的规定
        test: /\.(png|jpe?g|gif|svg|webp)$/,
        type: 'asset',
        parser: {
          // 转 base64 的条件
          dataUrlCondition: {maxSize: 25 * 1024, // 25kb}
        },
        generator: {
          // 打包到 dist/image 文件下
         filename: 'images/[contenthash][ext][query]',
        },
     }
    ]
  }

咱们当初从新运行一下 npm run build ，发现 dist 下曾经有了 images 这个文件夹

咱们看一下页面背景图片曾经失效，阐明打包胜利了！

配置 babel

babel 能够将咱们我的项目中的高级语法转化成比拟低级的语法，比方能够将 ES6 转为 ES5 ，这样能够兼容一些低版本浏览器，所以是很有必要的

首先装置所需的包：

  • @babel/core、babel-loader ：转换语法的工具
  • @babel/preset-env ：转换的一套现成规定

  • @babel/plugin-transform-runtime ：转换 async/await 所需插件

    npm i
@babel/core babel-loader
@babel/preset-env
@babel/plugin-transform-runtime
-D

    因为 babel 是针对 js 文件的语法转换，所以咱们须要在 webpack.config.js 中去针对 js 进行操作

    module: {
  rules: [
    // 刚刚的代码...
    {
      // 匹配 js 后缀文件
      test: /\.js$/,
      // 排除 node_modules 中的 js
      exclude: /node_modules/,
      use: ['babel-loader'],
    }
  ]
}

    单单配置了 babel-loader 还是不够的，咱们还须要配置 babel 转换的规定，所以须要在根目录下创立 babel.config.js 

    // babel.config.js

module.exports = {
presets: [
  // 配置规定
  "@babel/preset-env"
],
// 配置插件
plugins: ["@babel/plugin-transform-runtime"]
}

    此时咱们从新运行打包 npm run build ，咱们能够发现打包后的 js 代码中，曾经把刚刚代码中的 ES6 语法转成 ES5 语法了！能够看到刚刚代码中的 const 曾经转成 ES5 语法了

打包 Vue

打包 Vue 须要用到以下几个包：

  • vue ：Vue 开发所需的依赖
  • vue-loader ：解析 .vue 文件的 loader
  • vue-template-compiler ：解析 vue 中模板的工具
  • @vue/babel-preset-jsx ：反对解析 vue 中的 jsx 语法

留神： vue 和 vue-template-compiler 版本须要统一，这里我应用 2.6.14 这个版本， vue-loader 这里我应用了 15.9.8 这个版本

所以咱们先装置一下：

npm i 
vue@2.6.14 vue-template-compiler@2.6.14
vue-loader@15.9.8 @vue/babel-preset-jsx
-D

而后咱们须要去 webpack.config.js 中配置对 .vue 文件的解析

// 方才的代码...
const {VueLoaderPlugin} = require('vue-loader')

module.exports = {
  // 方才的代码...
  plugins: [
    // 方才的代码...
    new VueLoaderPlugin()],
  module: {
    rules: [
      // 方才的代码...
      {
        test: /\.vue$/,
        use: 'vue-loader',
      }
    ]
  }
}

并且到 babel.config.js 中配置一下，让 webpack 反对 .vue 文件中的 jsx 语法

module.exports = {
  presets: [
    "@babel/preset-env",
    // 反对 vue 中的 jsx 语法
    "@vue/babel-preset-jsx"
  ],
  plugins: ["@babel/plugin-transform-runtime"]
}

当初咱们能够在 src 下新建一个 App.vue 

<template>
  <div class="box"> 我是 App 哈哈哈哈 </div>
</template>

<script>
export default {}
</script>

<style lang="scss">
.box {
  width: 500px;
  height: 200px;
  color: #fff;
  background-color: #000;
}
</style>

而后改写一下 src/main.js 

import Vue from 'vue'
import App from './App.vue'

new Vue({render: (h) => h(App),
}).$mount('#app')

此时咱们从新运行 npm run build ，咱们能够看看页面的成果，阐明打包胜利啦！

配置门路别名

有时候文件援用搁着太多层，援用起来会看起来很不明确，比方
../../../../../App.vue ，所以咱们能够配置一下别名 alia 

module.exports = {
  // 方才的代码...
  resolve: {
    // 门路别名
    alias: {'@': path.resolve('./src'),
      assets: '~/assets',
      tools: '~/tools'
    },
    // 引入文件时省略后缀
    extensions: ['.js', '.ts', '.less', '.vue'],
  },
}

当初别名配置实现啦：

  • 配置前： ../../../../../App.vue
  • 配置后： @/App.vue

webpack-dev-server

刚刚咱们发现，每改一次代码就得从新打包一次，十分繁琐，有没有能够改代码主动从新打包的呢？这就要用到 webpack-dev-server 

npm i webpack-dev-server -D

到 webpack.config.js 中配置 devServer 

  devServer: {
    // 自定义端口号
    // port:7000,
    // 主动关上浏览器
    open: true
  },

而后到 package.json 中配置一下启动命令

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

此时咱们运行 npm run serve 就能够启动我的项目啦！

辨别环境

咱们不能把所有配置都配置在一个 webpack.config.js 中，因为咱们有两个环境 development(开发环境)、production(生产环境) ，所以咱们在根目录下创立 build 文件夹 ，并创立三个文件

  • webpack.base.js ：两个环境共用配置

    • 入口，输入配置
    • 各种文件的解决
    • 进度条展现
    • 门路别名

  • webpack.dev.js ：开发环境独有配置

    • webpack-dev-server
    • 不同的 source-map 模式
    • 不同的环境变量

  • webpack.prod.js ：生产环境独有配置

    • 不同的 source-map 模式
    • 不同的环境变量

咱们须要先装置一个合并插件 webpack-merge ，用于两个环境的配置能够合并公共的配置

npm i webpack-merge -D

而后咱们在根目录下新建一个 build 文件夹 ，并在此文件夹下新建 webpack.base.js、webpack.dev.js、webpack.config.js

  • webpack.base.js 

    // 公共配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const {VueLoaderPlugin} = require('vue-loader')
module.exports = {
// 入口文件 main.js
entry: {main: './src/main.js'},
// 输入
output: {
  // 输入到 dist 文件夹
  // 记得改门路
  path: path.resolve(__dirname, '../dist'),
  // js 文件下
  filename: 'js/chunk-[contenthash].js',
  // 每次打包前主动革除旧的 dist
  clean: true,
},
plugins: [
  new HtmlWebpackPlugin({
    // 抉择模板 public/index.html
    template: './public/index.html',
    // 打包后的名字
    filename: 'index.html',
    // js 文件插入 body 里
    inject: 'body',
  }),
  new MiniCssExtractPlugin({
    // 将 css 代码输入到 dist/styles 文件夹下
    filename: 'styles/chunk-[contenthash].css',
    ignoreOrder: true,
  }),
  new VueLoaderPlugin()],
module: {
  rules: [
    {
      // 匹配文件后缀的规定
      test: /\.(css|s[cs]ss)$/,
      use: [
        // loader 执行程序是从右到左
        MiniCssExtractPlugin.loader,
        'css-loader',
        'sass-loader',
        // {
        //   loader: 'sass-resources-loader',
        //   options: {
        //     resources: [
        //       // 搁置全局引入的公共 scss 文件
        //     ],
        //   },
        // },
      ],
    },
    {
      // 匹配文件后缀的规定
      test: /\.(png|jpe?g|gif|svg|webp)$/,
      type: 'asset',
      parser: {
        // 转 base64 的条件
        dataUrlCondition: {maxSize: 25 * 1024, // 25kb}
      },
      generator: {
        // 打包到 dist/image 文件下
        filename: 'images/[contenthash][ext][query]',
      },
    },
    {
      test: /\.js$/,
      // 排除 node_modules 中的 js
      exclude: /node_modules/,
      use: ['babel-loader'],
    },
    {
      test: /\.vue$/,
      use: 'vue-loader',
    }
  ]
},
resolve: {
  // 门路别名
  alias: {'@': path.resolve('./src'),
    assets: '~/assets'
  },
  // 引入文件时省略后缀
  extensions: ['.js', '.ts', '.less', '.vue']
},
}

  • webpack.dev.js 

    // 开发环境

const {merge} = require('webpack-merge')
const base = require('./webpack.base')

module.exports = merge(base, {
mode: 'development',
devServer: {
  open: true,
  // hot: true,
}
})

  • webpack.prod.js 

    // 生产环境

const {merge} = require('webpack-merge')
const base = require('./webpack.base')

module.exports = merge(base, {mode: 'production'})

而后咱们到 package.json 批改一下指令

  "scripts": {
    "serve": "webpack serve --config ./build/webpack.dev",
    "build": "webpack --config ./build/webpack.prod"
  },

接下来咱们运行这两个命令，发现都胜利了：

  • npm run build
  • npm run serve

构建进度条

无论是启动我的项目时还是打包时，都须要进度条的展现，所以须要把进度条配置在 webpack.base 中，咱们须要先装置进度条的插件 progress-bar-webpack-plugin 

npm i progress-bar-webpack-plugin -D
// webpack.base.js

// 刚刚的代码...
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const chalk = require('chalk')

module.exports = {
  // 刚刚的代码...
  plugins: [
    // 刚刚的代码...
    new ProgressBarPlugin({format: ` build [:bar] ${chalk.green.bold(':percent')} (:elapsed seconds)`,
    })
  ],
  // 刚刚的代码...
}

当初咱们能够看到无论启动我的项目或者打包，都会有进度条了

source-map

source-map 的作用：代码报错时，能疾速定位到出错地位， webpack5 的所有 source-map 模式 能够看 webpack 官网：https://webpack.docschina.org…

这里我应用两种模式：

  • development ：应用 eval-cheap-module-source-map 模式，能具体定位到源码地位和源码展现，适宜开发模式，体积较小
  • production ：应用 nosources-source-map ，只能定位源码地位，不能源码展现，体积较小，适宜生产模式

所以咱们开始配置 source-map

  • webpack.dev.js 

    // 方才的代码...
module.exports = merge(base, {
// 方才的代码...
devtool: 'eval-cheap-module-source-map'
})

  • webpack.prod.js 

    // 方才的代码...
module.exports = merge(base, {
// 方才的代码...
devtool: 'nosources-source-map'
})

环境变量

配置 devlopment、production 这两个环境的环境变量

  • webpack.dev.js 

    // 方才的代码...
const webpack = require('webpack')

module.exports = merge(base, {
// 方才的代码...
plugins: [
  // 定义全局变量
  new webpack.DefinePlugin({
    process: {
      env: {NODE_DEV: JSON.stringify('development'),
        // 这里能够定义你的环境变量
        // VUE_APP_URL: JSON.stringify('https://xxx.com')
      },
    },
  }),
]
})

  • webpack.prod.js 

    // 方才的代码...
const webpack = require('webpack')

module.exports = merge(base, {
// 方才的代码...
plugins: [
  // 定义全局变量
  new webpack.DefinePlugin({
    process: {
      env: {NODE_DEV: JSON.stringify('prodction'),
        // 这里能够定义你的环境变量
        // VUE_APP_URL: JSON.stringify('https://xxx.com')
      },
    },
  }),
]
})

优化、标准

对于优化、标准，我会另外再写两篇文章来讲

结语

我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜爱前端，想学习前端，那咱们能够交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】

正文完
前端
发表至： 前端
2022-03-15
 0
关于前端:要成为一名成功的开发人员您应该放弃的13件事
关于前端:提高国内访问-github-速度的-9-种方法
关于前端:vue实战完全掌握Vue自定义指令
关于前端:vuejs-父组件主动获取子组件的数据和方法子组件主动获取父组件的数据和方法

站内搜索

-「」