20230419----重返学习-webpack基础-vue脚手架

最新推荐文章于 2024-09-14 10:29:57 发布

方朝端

最新推荐文章于 2024-09-14 10:29:57 发布

阅读量438

点赞数

分类专栏：重返学习文章标签： webpack 学习 vue.js

本文链接：https://blog.csdn.net/seetoyou/article/details/130256260

版权

重返学习专栏收录该内容

126 篇文章 4 订阅

订阅专栏

day-053-fifty-three-20230419-webpack基础-vue脚手架

webpack基础

配置CSS的解析和压缩规则
- 需要在打包页面中使用样式【编译less为css,最后把css导入到页面中】
- 初始打包，不支持less,需要配置打包规则，支持less
1. 创建less文件
  - 示例为：
    - 在src目录下面创建一个assets的文件夹，里面创建 common.less、index.less 文件
      - index.less通过@import "./common.less";导入common.less文件
2. 在js文件中引入less文件
3. 在webpack.config.js中设置module.exports对象的module.rules[n]

配置css兼容各浏览器-即css加浏览器前缀

安装mini-css-extract-plugin插件依赖

npm i mini-css-extract-plugin –save-dev

在根目录下创建postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
};

在package.json中配置浏览器兼容性问题即browserslist

{
  "browserslist注释": "表示全球超过1%人使用的浏览器都要兼容，最后两个版本不用兼容",
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

抽离css文件-即出口文件html中的css文件通过link引入

安装mini-css-extract-plugin依赖插件。
```
npm i mini-css-extract-plugin –save-dev
```

在webpack.config.js中引入并使用插件。

//所有的插件都放在这个数组里。
const pluginsList = [];

// 1. 抽离css文件，通过link引入。
let MiniCssExtractPlugin = require("mini-css-extract-plugin");
const theMiniCssExtractPlugin = new MiniCssExtractPlugin({
  //=>设置编译后的文件名字
  filename: "main.[hash].css",
});
pluginsList.push(theMiniCssExtractPlugin);
module.exports = {
  plugins: pluginsList, //2. 使用插件，是一个数组。也可以写在这，不过为了好抽离和逻辑更新，最好放外面用一个变量来放置。
};

在webpack.config.js中设置module，即设置加载器相关的东西。

// 1. 抽离css文件，通过link引入。
let MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  // 3. 配置loader
  module: {
    //配置规则----css，图片...等。
    rules: [
      // 配置css。
      {
        test: /\.(css|less)$/, //要处理文件的文件名规则，用正则进行匹配。这里表示匹配以`.css`或`.less`结尾的文件。

        //对应文件的编译规则，规则由下往上看
        use: [
          MiniCssExtractPlugin.loader, //使用MiniCssExtractPlugin插件配套中的loader代替style-loader中的内嵌style方式。即使用link标签引入代替了在html中内嵌style标签的方式。
          // "style-loader", //=>把CSS插入到HEAD中，以内嵌使用css样式。

          "css-loader", //=>编译解析@import/URL()这种语法
          "postcss-loader", //=>设置前缀

          "less-loader", //将less后缀的文件转为css
        ],
      },
    ],
  },
};

压缩css文件（优化项）

安装依赖

npm i optimize-css-assets-webpack-plugin –save-dev

在webpack.config.js中引入并使用依赖，之后设置module.exports对象的optimization，即设置优化项相关的东西。

// 所有的优化项都放在这里
const optimizationMinimizerList = [];

// 1. 配置压缩优化项
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
const theOptimizeCssAssetsWebpackPlugin = new OptimizeCssAssetsWebpackPlugin();
optimizationMinimizerList.push(theOptimizeCssAssetsWebpackPlugin);

// 这个导出的对象，就是webpack的配置；
module.exports = {
    //2. 设置优化项
  optimization: {
    minimize: true,
    minimizer: optimizationMinimizerList, //优化项列表
  },
};

配置图片的解析和压缩规则

安装依赖

npm i file-loader url-loader html-withimg-loader --save-dev

在webpack.config.js中引入并使用依赖，之后设置module.exports对象的module.rules，即设置加载器相关的东西。

module.exports = {
  //=>模块规则：使用加载器（默认从右向左执行）
  module: {
    //配置规则----css，图片...等。
    rules: [
      //图片
      {
        test: /\.(png|jpe?g|gif)$/i, //文件格式的后缀。大图片
        use: [
          {
            //=>把指定大小内的图片BASE64
            //=>不在指定范围的采用file-loader进行处理
            loader: "url-loader",
            options: {
              //小于200kB的图片自动 base64，大于的 file-loader
              limit: 200 * 1024,
              //输出后的路径 dist/images
              outputPath: "/images",
              //name:'[name].[ext]'
            },
          },
        ],
        exclude: /node_modules/, //在文件文件夹里的文件不处理
        // includes: /assets/, //只处理对应文件夹里的图片
      },
      {
        test: /\.(svg|eot|ttf|woff|woff2)$/i, //动态图，字体等。
        use: "file-loader",
      },
      {
        test: /\.html$/,
        use: ["html-withimg-loader"],
      },
    ],
  },
};

配置js的ES6转ES5解析
1. 安装依赖
2. 在package.json中配置浏览器兼容性问题即browserslist
```
{
  "browserslist注释": "表示全球超过1%人使用的浏览器都要兼容，最后两个版本不用兼容",
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}
```
3. 在webpack.config.js中设置module.exports对象的module.rules，即设置加载器相关的东西。
使用垫片处理ES6转ES5中的Promise语法

配置js的压缩规则

安装依赖
```
npm i terser-webpack-plugin --save-dev
```

在webpack.config.js中引入并使用依赖，之后设置module.exports对象的optimization，即设置优化项相关的东西。

// 所有的优化项都放在这里
const optimizationMinimizerList = [];

// 1. 压缩js
const TerserPlugin = require("terser-webpack-plugin");
const theTerserPlugin = new TerserPlugin();
optimizationMinimizerList.push(theTerserPlugin);

// 这个导出的对象，就是webpack的配置；
module.exports = {
    //2. 设置优化项
  optimization: {
    minimize: true,
    minimizer: optimizationMinimizerList, //优化项列表
  },
};

插件的问题

插件与优化项

如果带有optimize与plugin的，一般就为优化项。
- 如：“optimize-css-assets-webpack-plugin”。
单纯地只有plugin的一般就是插件。
- 如："clean-webpack-plugin"与"mini-css-extract-plugin"等。

有些插件，还配置了对应的路由，在module.exports.module.rules[n].use[m]中调用。

如：“mini-css-extract-plugin”

// 抽离css文件，通过link引入。
// 1. 导入插件。
let MiniCssExtractPlugin = require("mini-css-extract-plugin");
const theMiniCssExtractPlugin = new MiniCssExtractPlugin({
  //=>设置编译后的文件名字
  filename: "main.[hash].css",
});
// 2. 使用插件
const pluginsList = [];
pluginsList.push(theMiniCssExtractPlugin);
// 这个导出的对象，就是webpack的配置；
module.exports = {
  plugins: pluginsList, //2. 使用插件，是一个数组。

  // 3. 配置loader
  module: {
    //配置规则----css，图片...等。
    rules: [
      // 配置css。
      {
        test: /\.(css|less)$/, //

        //对应文件的编译规则，规则由下往上看
        use: [
          MiniCssExtractPlugin.loader, //使用MiniCssExtractPlugin插件配套中的loader代替style-loader中的内嵌style方式。即使用link标签引入代替了在html中内嵌style标签的方式。
          // "style-loader", //=>把CSS插入到HEAD中，以内嵌使用css样式。

          "css-loader", //=>编译解析@import/URL()这种语法
          "postcss-loader", //=>设置前缀

          "less-loader", //将less后缀的文件转为css
        ],
      },
};

使用插件

安装依赖
在webpack.config.js中引入插件，一般都会实例化一次。
在webpack.config.js中module.exports对象里的plugins中引入该插件实例，以使用插件。
有些插件可能还要配合module.rules[n].use[m]中调用对应配置的loader。

vue脚手架

vue的脚手架就是vue-cli。
步骤

全局安装vue-cli。
```
npm install -g @vue/cli
```
- 这个一个电脑一般就只要一次就好了，除非要更新vue-cli的版本
安装成功后查看版本，出现版本说明成功了
```
vue -V
```
- 这个

使用vue-cli的vue命令创建一个vue项目

相当于创建好vue项目，并搭建好该vue项目完整的webpack配置。同时一般它还会安装好对应的依赖，相当于在项目根目录中的npm install

vue create 项目名称

选项一些选项，空格用于选中选项，按上下键可以上下移动选项以便取消或选中，按回车表示完成了当前选项的所有选择。

问题1：选择vue项目的基础模板

- ? Please pick a preset 选择vue项目的基础模板，默认有`vue2的默认模板`与`vue3的默认模板`及`自己本地电脑保存的项目模版`及`Manually select features自定义项目`
  > Manually select features //自定义项目

问题2：选择Manually select features，就会出现问题2，用于选择项目的一些常用依赖与插件。

- ? Check the features needed for your project 
    (*) Choose Vue version  //选择vue版本
    (*) Babel  //用于把es6--转成es5
    ( ) TypeScript   //是否使用 ts
    ( ) Progressive Web App (PWA) Support  //是否支持Progressive Web Apps，渐进式网页应用
    (*) Router  //是否使用 vue-Router路由配置
    (*) Vuex    //是否使用 vuex全局存储
    (*) CSS Pre-processors  是否使用 预处理  less sass stylus
   >(*) Linter / Formatter  是否使用 eslint 语法检测
    ( ) Unit Testing  是否使用 单元测试
    ( ) E2E Testing   是否使用 E2E元测试

问题3：选择vue版本。问题2结束后，就会出现问题3了

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
  > 2.x
    3.x

问题4：选择vue-Router的导航方式是否为history历史模式。一般选择否，即用哈希模式。

?Use history mode for router?  router是否是history
  (Requires proper server setup for index fallback in production) (Y/n) n

问题5：选择css预处理语言。一般选择less或者scss。

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow ke
  ys)
    Sass/SCSS (with dart-sass)
    Sass/SCSS (with node-sass)
  >Less
    Stylus

问题6：选择ESlint的配置

  ? Pick a linter / formatter config: (Use arrow keys)
    > ESLint with error prevention only
      ESLint + Airbnb config
      ESLint + Standard config
      ESLint + Prettier

问题7：选择ESlint的什么时候开始检测

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) //选择在什么时间进行ESLint检测
  > In dedicated config files //保存时检测
    In package.json //提交时检测

问题8：选择在什么位置保存配置文件

? Where do you prefer placing config for Babel, ESLint, etc.? //选择在什么位置保存配置文件，这里有两个选项（单选）
  > In dedicated config files //独立保存为 config 文件
    In package.json //全部保存在 package.json 文件

问题9：择是否保存本次配置以便于下次使用。一般选n否，输入n按回车。

? Save this as a preset for future projects?
  输入
    y：保存配置
    N：不保存配置

进入新创建的项目目录
- 因为vue-cli会在当前目录新创建一个与项目名称同名的文件夹，当成项目的根目录
```
cd 新创建项目目录
```

运行脚本文件

启动创建的项目(开发环境)

//yarn serve //yarn执行，备用。npm先下，下不下来。因为npm支持的比较多。
npm run serve

打包项目 (生产环境)

//yarn build //yarn执行，备用。npm先下，下不下来。因为npm支持的比较多。
npm run build

目录结构

  public/ 
    |--index.html //打包入口的html文件
  src/
    |--api //ajax请求及封装文件
    |--assets //静态资源文件
    |--components //业务组件，一般不会随url路径而变动的组件。
    |--router //路由文件夹
    |--store  //vuex文件夹
    |--views/或pages/ //vue页面，路由变化切换时用的会跟随url路径变动的组件。
    |--App.vue  //vue入口页面
    |--main.js //入口的js文件
  .browserslistrc //browserslistrc配置文件，用于浏览器兼容。
  .eslintrc.js   //eslint配置文件，
  babel.config.js //配置文件  es6--es5
  .gitgnore //git配置文件，用于配置忽略文件。
  package.json //npm包管理器的清单
  vue.config.js  //配置 相当于  webpack.config.js

vue总体思路

/src/main.js 在vue-cli中默认是主入口文件，会以它为入口构建js代码，一个vue单页应用程序通常会依赖于它。

/src/main.js中引入的东西在webpack中都会被解析成js代码，最终运行的都是js代码。

/src/main.js

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

//如果vue出现警告型错误，开发环境会提示，生产环境不会提示
Vue.config.productionTip = false

let vm=new Vue({
  router,
  store,
  render: h => h(App)//解析 App.vue
}).$mount('#app')//插入 id="app"

console.log(vm);

/public/index.html 是打包入口的html文件，/src/main.js最终会被它导入。

每个XXX.vue的页面都是一个组件

完整结构

<template>
  <div class="XX">
  </div>
</template> 视图
<script>
  export default{
    data(){
        return {
            num:100
        }
    }
  }
</script>
<style></style>

里面中的<template>与<script>两个至少要有一个，而<style>可有可无。

创建组件
- 创建的地方
  - 业务类组件一般在components中创建，即与url变动没关系的组件。
  - 页面类组件一般在views中创建，一般与url变动有关，一个url变动后也随之变动组件。
- 组件的命名规则
  - 串式命名： my-name-apple 一般在template标签中使用
    - 原因是原生html规则不支持驼峰字母命名规则
      - 不过个人感觉，业务组成员自己定义的用大驼峰，第三方插件用串式命名更好。
        因为业务中，可不可控更重要。
        第三方插件意味着不可控，可以自己进一步封装成，之后再大写。
        业务级成员定义的，则意味着可以改，用大写区别更好。
  - 大驼峰命名：MyNameApple 一般在vue文件名及vue引入及script标签中使用
- 组件的类别
  - 类组件里面有data，有自己内部的数据
    - vue的组件基本上都是类组件
    - 类组件可以变成函数组件：在template根标签上加上functional这个属性。
      - <template functional></template>
  - 函数组件通常只做渲染
    - 一般只有一个template标签和style标签。
- 组件的作用范围
  - 局部组件
    - 局部组件的创建
      1. 创建一个组件（
        
        一般components文件夹创建
        用大驼峰作文件名，如 OnePage.vue
      2. 在某个路由组件中使用（切页面的）
        
        // 导入组件 @--->src目录 import OnePage from '@/components/OnePage.vue' // 导入组件 import OnePage from '../components/OnePage.vue' export default{ components: {//挂载 OnePage } }
        
        在template标签中使用
        
        <template>  <one-page></one-page> </template>
  - 全局组件