webpack构建自定义vue应用

简介: 在上一篇中我们利用webpack从0到1搭建了一篇最基本的react应用,而vue在团队项目里也是用得非常之多,我们如何不依赖vue-cli脚手架搭建一个自己的vue工程化项目呢?

上一篇中我们利用webpack从0到1搭建了一篇最基本的react应用,而vue在团队项目里也是用得非常之多,我们如何不依赖vue-cli脚手架搭建一个自己的vue工程化项目呢?


相比较react,vue所需要的插件要少得多,我们知道在vue中,大多数是以.vue的模版组件,因此关键是我们可以用webpack的相关loader能够解析.vue文件即可,在vue项目中解析单文件组件,热加载,css作用域等全部依赖于这个插件vue-loader[1],因此vue-loader算是vue工程化中必不可少的一个插件。


正文开始...


初始化项目


新建一个webpack-03-vue目录,执行npm init -y


安装相关基础配置插件

npm i webpack webpack-cli fs-loader css-loader style-loader html-webpack-plugin mini-css-extract-plugin -D

安装vue最新版本,执行以下命令

npm i vue -s

安装解析.vue文件的loader

npm i vue-loader -D


配置loader


// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader' // 与 use: ['vue-loader']等价
      }
    ]
  },
}

除了设置loader,我们还需要引入另外一个插件VueLoaderPlugin,不然运行项目加载template时就会报错。

// webpack.config.js
const HtmlWebpackPlguins = require('html-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
// 引入VueLoaderPlugin 必不可少
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlguins({
      template: './public/index.html'
    }),
    new miniCssExtractPlugin({
      filename: 'css/[name].css'
    }),
    new VueLoaderPlugin(),
  ]
}

如果我们需要提取css,我们需要把style-loader换成miniCssExtractPlugin.loader即可

// webpack.config.js
const miniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [miniCssExtractPlugin.loader, 'css-loader']
      },
      ...
    ]
}

所有配置完成后,看下最终的webpack.config.js完整配置

const path = require('path');
const HtmlWebpackPlguins = require('html-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
  entry: {
    app: './src/index.js'
  },
  output: {
    filename: '[name][hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [miniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.less$/,
        use: [
          miniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'less-loader'
          },
          {
            loader: 'postcss-loader'
            // options: {
            //   postcssOptions: {
            //     plugins: [['postcss-preset-env']]
            //   }
            // }
          }
        ]
      },
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlguins({
      template: './public/index.html'
    }),
    new miniCssExtractPlugin({
      filename: 'css/[name].css'
    }),
    new VueLoaderPlugin()
  ]
};

我们在src目录下新建一个index.jsApp.vue文件

<!--App.vue-->
<template>
  <div class="app">
       <h1>{{name}}</h1>
       <h2>{{age}}</h2>
       <h3>{{publicText}}</h3>
    </div>
</template>
<script>
import {reactive, toRefs } from 'vue';
export default {
  name: 'App',
  setup() {
    const info = reactive({
          name: 'Maic',
          age: 18,
          publicText: 'web技术学苑'
    })
    return {
        ...toRefs(info)
    }
  },
}
</script>
<style scoped>
.app h1{
  color: red;
}
</style>

我们在index.js中引入App.vue文件

import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');

运行npm run server,打开地址localhost:8080访问

04104699aab9e62712f0f9e3ea1c75ba.png

vue中会用less,因此我们看下lessvue中的运用


配置less


在项目中,我们会用less,scss或者stylus这样的第三方css编译语言,在vue项目中需要有对应的loader加载才行


安装npm i less less-loader -d,并设置loader[2]

// webpack.config.js
module.exports = {
  module: {
    rules: [
       ...
       {
        test: /\.less$/,
        use: [miniCssExtractPlugin.loader,  'css-loader', 'less-loader']
      },
    ]
  }
}

App.vue中设置less

<style lang="less" scoped>
.app{
  h1 {
      color: red;
      & {
        font-size:30px;
      }
  }
  h2 {
    display: flex;
  }
}
</style>

ok页面已经支持less了,我们知道css有很多特性需要些支持多个浏览器的兼容性,因此会有很多的前缀,譬如--webkeit----ms--等等,那么这些前缀,我能否利用插件来支持呢,因此我们需要了解一个插件postcss


配置postcss


postcss有很多可配置的参数,更多参考可以查看官网webpack-postcss[3],也可以查看更详细api文档github-postcss[4]实现更多的功能

npm install --save-dev postcss-loader postcss postcss-preset-env

我们在loader上加上postcss-loader

module.exports = {
  module: {
    rules: [
      ...
       {
        test: /\.less$/,
        use: [
          miniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'less-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [['postcss-preset-env']]
              }
            }
          }
        ]
      },
    ]
  }
}

我们注意到官方提供了一个autoprefixer,但是我们这里使用的是postcss-preset-env,实际上这个插件已经有了autoprefixer的功能。


从官网了解到,你可以在webpack.config.jsloader中设置postcss-preset-env,你也可以在根目录新建一个文件postcss.config.js以此来代替loader的设置

// postcss.config.js
module.exports = {
  plugins: [['postcss-preset-env']]
};

因此你就会看到样式user-select加了前缀


6b48c42aa94231168424c7b24c0fb419.png

但是你会发现,为啥display:flex没有前缀,因此有一个对浏览器兼容性设置的配置,实际上安装webpack时就已经给我们自动安装了,主要依靠.browserslist来设置支持浏览器的前缀css


browserslist


这个插件主要是可以让你的样式兼容多个不同版本的浏览器,如果指定的版本浏览器比较高,那么一些支持的特性就会自动支持,所以就不会设置前缀,具体可以参考browserslist[5]


你可以在package.json中设置,比如像下面这样

{
  ...
  "dependencies": {
    "vue": "^3.2.36"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

当你设置完后,你会发现,重新执行npm run server,对应的display:flex就已经加了前缀了。

c626e9b313013244d518449d9b8b0fc4.png

或者你可以在根目录新建一个.browserslistrc文件,与package.json设置的等价

> 1%
last 2 versions

b99f47dbf8e5b3964d5d906636017223.png

终于关于用webpack搭建vuemin工程版已经可以了,项目还有一些图片加载,字体图标啊这些都是file-loader插件的事情,后续有用上的时候就安装支持配置一下,具体也可参考这一篇文章webpack从0到1构建也有相关file-loader的设置


看完是不是觉得webpack配置vue没那么难了


总结


  • 安装webpack,webpack-cli等基础插件,支持vue核心插件vue-loader
  • .vue文件需要vue-loader编译,需要配置对应loader,在webpack.config.js中需要加入VueLoaderPlugin插件,一定要引入,不然会直接报错。
  • lesspostcss的安装,主要依赖less,less-loader, postcss,posscss-loader,postcss-preset-env这些插件支持,既可以在loader中支持配置postcss-preset-env,可以用postcss.config.js来代替设置
  • browserslist配置设置,内部主要是依赖 caniuse-liteCan I Use 来做浏览器兼容性查询的
  • 本文code-example[6]
相关文章
|
1月前
|
JavaScript 前端开发 开发工具
使用Vue.js、Vuetify和Netlify构建现代化的响应式网站
使用Vue.js、Vuetify和Netlify构建现代化的响应式网站
34 0
|
1月前
|
JavaScript
在Vue中,如何编写自定义的验证规则?
在Vue中,如何编写自定义的验证规则?
22 1
|
1月前
|
监控 JavaScript 前端开发
如何进行 Vue 项目的构建和部署?
如何进行 Vue 项目的构建和部署?
47 2
|
9天前
|
JavaScript 前端开发 API
Vue.js:构建高效且灵活的Web应用的利器
Vue.js:构建高效且灵活的Web应用的利器
|
1月前
|
JavaScript 前端开发
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
29 0
|
1月前
|
JavaScript 前端开发 API
Vue.js:构建现代化Web应用的灵活选择
Vue.js:构建现代化Web应用的灵活选择
37 0
|
1月前
|
JavaScript 前端开发
【Vue3】toRefs和toRef在reactive中的一些应用
【Vue3】toRefs和toRef在reactive中的一些应用
|
1月前
|
JavaScript 前端开发 算法
Vue.js的单向数据流:让你的应用更清晰、更可控
Vue.js的单向数据流:让你的应用更清晰、更可控
|
1月前
|
JavaScript 前端开发 API
Vue.js 深度解析:nextTick 原理与应用
Vue.js 深度解析:nextTick 原理与应用
|
2月前
|
JavaScript 前端开发 安全
轻松创建自定义手势图案锁 - Vue 手势密码锁组件
轻松创建自定义手势图案锁 - Vue 手势密码锁组件
56 0