从0实现webpack5+vue2模板

lxj29
961 阅读7分钟

1.新建项目myCli

2.首先创建一个index.html。

肯定需要一个html页面，不然没有页面

image-20220523111006292

3.创建id挂载点。

因为是vue项目，至少有一个挂载点，给vue的el挂载

image-20220523111022824

4.引入打包后的js（bundle.js）。

引入打包后的代码。还需要引入vue、自己代码，但是不想一个个引入，可以用webpack，将我们所以的代码打包成一个js文件，直接引入打包后的js就行。我们自己写的代码写在main.js中

image-20220523110925194

5.创建两个文件夹，src、dist（分发到服务器）。

区分了打包前（自己写的）和打包后（准备分发的文件夹），在src中写自己的文件夹，因为我们需要在index.html中引入dist中的打包后文件夹（bundle.js），所以可以直接将index.html放入dist中。以上就是目录安排

image-20220523111157481

6.在src中创建入口文件main.js。

新建vue组件并挂载到index中的挂载点

指定元素el:'#app'，render:h=>h(App)（创建渲染函数，因为是函数，所以有参数， 参数为h创建一个虚拟节点，返回值是运行函数结果。）

过程：拿到App对象，将对象传给h函数，如果render运行，就会创建App对应的vNode虚拟节点，将虚拟节点替换掉app元素。

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

7.引入需要的依赖

  1. 引入ui库：element-ui。

    当然，也可以不引入，引入自己的ui库也行

    其中这两个都是普通依赖，需要放到package.json中的dependency里面

  2. 引入开发依赖：npm i axios

    安装好后，会发生一些问题：bundle还不存在，所以还需要webpack打包，接下来安装一些webpack依赖和对应的loader依赖

  3. 继续安装依赖：npm i -D webpack webpack-cli vue-loader vue-template-compiler sass-loader sass css-loader style-loader babel-loader @babel/core @babel/preser-env

    webpack（打包器本体）webpack-cli（终端命令，调用webpack） （loader的作用进行代码转换，新语法转老语法） vue-loader（vue转换为js）vue-template-compiler（将vue中html转化的包）sass-loader（转化sass）sass（sass本体）css-loader（转换css）style-loader（css处理好后还需要style标签加到html页面中）babel-loader（转化js，js会用新语法，需要兼容老浏览器）@babel/core（babel的核心库）@babel/preset-env（预设配置，babel设置好的配置）

    （这里全都用开发依赖装，默认就行）

8.配置webpack

  1. 创建webpack.config.js。

    目标是在main.js开始编译、打包，打包到dist文件夹，所以要配置文件中配置，在项目根目录中创建webpack.config.js

  2. 搭建webpack.config.js框架。

    • entry：入口
    • output：打包后放到哪个文件夹，叫什么名字（path、filename）
    • mudule：rules（是一个数组，会去匹配对应的扩展名，比如说是不是以 .vue 结尾的，这里通过test校验正则，通过use使用哪个loader(可以用数组)）
    • plugins：插件的作用，增强 webpack功能，相当于游戏里的'外挂'，是个数组，因为可以放多个插件，插件提供过来的时候，都是构造函数，所以需要new PluginA()

  1. 填充webpack配置文件

    1. 使用module.exports暴露

      module.exports和exports是属于commonJs规范，export和export default是ES6模块规范

      exports等于module.exports，exports是一个对象，可以有多个值

      写个代码体会一下：

      exports.fn1;
exports.fn2;
exports.fn3;
// 等价于
exports={fn1,fn2,fn3};
module.exports={fn1,fn2,fn3};

    2. entry入口。

      main作为入口文件，可以用绝对路径，也可以用相对路径

    3. output出口。

      设置path。path不能是相对路径，这里可以用__dirname，这个是node变量，就是当前文件所在的目录字符串保存，__dirname+'/dist'，这里会有路径的问题，因为Linux路径是/这个斜杠，wndow是\，需要表示\需要进行转义，所有就是两个\，所有就不统一了，那怎么办？可以使用path模块，这个是node自带的模块，会判断当前所处的操作系统，从而自动使用最合适的目录分隔符去拼接目录。path中有个resolve方法，运行它，并且提供两个参数，将它们拼起来，就不用自己操心写什么斜杠了path:path.resolve(__dirname,'dist')。

      设置filename。我们希望打包后的文件名为 bundle.js 直接给filename设置即可

    4. 定义模块转换规则。

      处理.vue。使用vue-loader

      处理.s[ca]ss。使用style-loader、css-loader、scss-loader

      处理.m?js。使用babel-loader，这里注意babael需要配置项，可以使用预设配置项@babel/preset-env

      处理图片。老版本是使用file-loader，然后配置一些项。新版本是使用type:'asset/resourse'

      一句话概括：使用对应loader，处理对应文件

    5. 配置plugins。

      目前只需要配置一个插件，VueLoaderPlugin，这个是vue-loader的库里的插件，处理vue文件中的js和css

    6. 完整代码

      const path = require('path')
// 按需导入vue-router中的VueLoaderPlugin
const {VueLoaderPlugin} = require('vue-loader')
// 区分exports、module.exports和export、export default的区别
module.exports = {
  // 入口文件
  entry:'./src/main.js',
  // 出口文件，包括名字和地址
  output:{
    // 路径不能使用绝对路径，需要使用绝对路径，所以需要借助__dirname，这里引入path适配不同操作系统
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  // 模块文件，定义模块转换规则
  module:{
    rules:[
      {test:/.vue$/,use:'vue-loader'},
      {test:/.s[ca]ss$/,use:['style-loader','css-loader','scss-loader']},
      {
        test:/.m?js$/,
        use:{
          loader:'babel-loader',
          options:{
            presets:['@babel/preset-env']
          }
        }
      },
      {test:/.(png|jpe?g|gif|svg|webp)$/,type:'asset/resource'}
    ]
  },
  // 插件，增强webpack功能，需要组件实例
  plugins:[
    // 这个是vue-loader的库里的插件，处理vue文件中的js和css
    new VueLoaderPlugin()
  ]
}

9.打包

  1. 运行webpack

    终端输入 webpack，报错了！

    提示消息：CLI for webpack must be installed.（必须安装webpack命令行。）

    我们不是安装了webpack了吗？

image-20220523105523000

  1. 配置打包命令行。

    如果直接在终端输入 webpack，会报错，因为没有这个命令。刚刚我们已经装了webpack-cli，按道理应该是有这个命令的，为什么呢？因为它安装到了我们的node_module/bin/webpack中，如果要运行需要找到这个文件位置下的webpack ./node_module/bin/webpack此时就能运行成功，成功打包（如果没有设置模式，那么默认是生产模式）。

image-20220523105908107

image-20220523105923514

打包成功！

  1. 简化命令

    但是每次打包都要输入那么长的命令，很麻烦。为了简化操作，我们可以在package.json中设置scripts:{"serve":"webpack --mode=development/production --watch"}（这里可以是dev也可以serve新版本叫法），注意这里是不需要写node_module/bin/webpack这种具体位置，因为npm脚本会自动找文件。这里需要给它设置模式，设置为生产模式（除了编译转换打包外，还会优化代码，用户访问更快）

    watch的作用：只要有watch，就不需要手动运行，会自动运行。

    此时，运行 npm run webpack 就可以进行打包了，打包完成会生成dist文件夹，里面有bundle.js，我们可以使用在线服务器运行，此时，我们修改代码时，保存会自动打包（因为加了watch）

image-20220523110056221

image-20220523110231123

  1. bug。

    1. 这里我们在打包的时候出现了一些问题，主要是版本问题，通过google解决。
    2. 还有一个就是打包后，页面没有效果的问题。首先需要知道的是，webpack打包后，会生成一个bundle.js文件，这个是最关键的，那我们在浏览器上需要运行index.html，注意：index.html需要引入打包后的bundle.js文件，也需要给一个挂载点。

10.配置路由

可以配置的很多，例如：eslint、vuex等等，这里用配置路由举例。

  1. 安装vue-router

  1. 配置router。

    src文件夹下创建router文件夹再创建index.js。需要做的是：router里面创建vue-router实例，导出来。

    步骤：导入vue-router（下载的），创建vueRouter实例，配传入配置项（子路由routes:[]），保存到常量router，导出router实例。

  1. 注册router。

    这里跟注册elementUi一样，我们在router中直接注册vueRouter，通过use。注册完成，main中导入router，此时router导入的是vueRouter实例

image-20220523110727824

  1. 使用router。

    在App.vue中，添加路由占位符<router-view>，这个是路由器提供的动态视图插槽，会根据router中的routes配置，然后动态渲染成配置中的组件。跳转的两种方式：<router-link to="/Home">（组件跳转）和this.$router.push('/Home')（编程式，就是写js代码形式），这里的routerlink和routerview都是vue-router提供的组件

image-20220523110744579

  1. 创建views（pages），定义多个页面，首先是Home.vue，首页内容；再定义About.vue，关于页面内容。

image-20220523110623719

image-20220523110643840

到这里，webpack5+vue2模板的基本功能就实现了！🤗

avatar
文章
阅读
粉丝