乐趣区

关于前端:webpack从零构建自定义vue应用

jiezi

在上一篇中咱们利用 webpack 从 0 到 1 搭建了一篇最根本的 react 利用，而 vue 在团队我的项目里也是用得十分之多，咱们如何不依赖 vue-cli 脚手架搭建一个本人的 vue 工程化我的项目呢？

相比拟 react,vue 所须要的插件要少得多，咱们晓得在 vue 中，大多数是以 .vue 的模版组件，因而要害是咱们能够用 webpack 的相干 loader 可能解析 .vue 文件即可, 在 vue 我的项目中解析单文件组件，热加载，css 作用域等全副依赖于这个插件 vue-loader，因而 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.js 与App.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 拜访



在 vue 中会用 less，因而咱们看下less 在vue中的使用

配置 less

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

装置npm i less less-loader -d，并设置 loader

// 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，也能够查看更具体 api 文档 github-postcss 实现更多的性能

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.js 的loader中设置 postcss-preset-env，你也能够在根目录新建一个文件postcss.config.js 以此来代替 loader 的设置

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

因而你就会看到款式 user-select 加了前缀

然而你会发现，为啥 display:flex 没有前缀，因而有一个对浏览器兼容性设置的配置，实际上装置 webpack 时就曾经给咱们主动装置了，次要依附 .browserslist 来设置反对浏览器的前缀 css

browserslist

这个插件次要是能够让你的款式兼容多个不同版本的浏览器，如果指定的版本浏览器比拟高，那么一些反对的个性就会主动反对，所以就不会设置前缀，具体能够参考 browserslist

你能够在 package.json 中设置，比方像上面这样

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

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

或者你能够在根目录新建一个 .browserslistrc 文件，与 package.json 设置的等价

> 1%
last 2 versions

终于对于用 webpack 搭建 vue 的min工程版曾经能够了，我的项目还有一些图片加载，字体图标啊这些都是 file-loader 插件的事件，后续有用上的时候就装置反对配置一下，具体也可参考这一篇文章 webpack 从 0 到 1 构建也有相干 file-loader 的设置

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

总结

  • 装置 webpack,webpack-cli 等根底插件，反对 vue 外围插件vue-loader
  • .vue文件须要 vue-loader 编译，须要配置对应 loader, 在webpack.config.js 中须要退出 VueLoaderPlugin 插件，肯定要引入, 不然会间接报错。
  • less与 postcss 的装置，次要依赖 less,less-loader, postcss,posscss-loader,postcss-preset-env 这些插件反对，既能够在 loader 中反对配置 postcss-preset-env, 能够用postcss.config.js 来代替设置
  • browserslist 配置设置，外部次要是依赖 caniuse-lite 与Can I Use 来做浏览器兼容性查问的
  • 本文 code-example
退出移动版