一步一步手动webpack：深入理解vue项目配置（2022）

参考视频 https://www.bilibili.com/video/BV1234y1D7Bv

1. vscode简单配置配置

a.安装ESlint插件，配置文件.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/standard'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren': 'off'
  }
}

b. 安装Prettier–code formatter插件，配置文件 .prettierrc

{
    "semi": false,
    "singleQuote": true,
    "trailingComma": "none"
}

c.安装Live Server

d.安装Vetur

e.安装其他插件，如Vue VSCode Snippets

f.vscode配置：

• Format On Save 打开
• VSCode tab改为2个空格
• 记得默认Prettier格式化工具

2.初始化工程，这里是vue2项目

# 创建目录
mkdir -p {vue-by-hand/src,vue-by-hand/dist}
cd vue-by-hand

# 初始化项目,生成package.json
npm init --yes

# 安装运行依赖 -S 即--save 可省略。主要是安装 vue2 ，其他按需导入element-ui vuex vue-router axios
npm install vue@2.6.14 element-ui@2.15.6  vuex@3.6.2 vue-router@3.5.3 axios -S

# 安装开发依赖--webpack（webpack核心、cli、devServer） vue-loader&compiler, vue-template-compiler与vue版本保持同步
npm install -D webpack webpack-cli webpack-dev-server vue-loader@15.9.8 vue-template-compiler@2.6.14 

# 安装开发依赖--less sass/scss(公用sass-loader而不是scss-loader ) css样式处理器 
# https://webpack.docschina.org/loaders/sass-loader/
npm install -D  less-loader less sass-loader sass css-loader style-loader 

# 安装开发依赖--babel ES转换
npm install -D babel-loader @babel/core @babel/preset-env

# 主要入口文件
touch dist/index.html
touch src/main.js
touch src/App.vue

# 生成webpack配置，非常关键的一个配置
touch webpack.config.js

上面有版本都是考虑与vue@2配合 -S=–save保存到依赖 -D保存到开发

3. package.json内容参考

注意scripts部分，serve/dev/build是新加入，dev/build用的是用原生的webpack命令(位于./node_modules/.bin/下)，serve需要webpack-dev-server支持，若不配置scripts可以用

./node_modules/.bin/webpack --mode=production

手动调用，注意带上路径执行用本项目安装的webpack，避免全局的webpack版本差异

{
  "name": "vue-by-hand",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode=development --watch",
    "serve": "webpack serve --mode=development",
    "build":"webpack --mode=production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.26.0",
    "element-ui": "^2.15.6",
    "vue": "^2.6.14",
    "vue-router": "^3.5.3",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.6.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}

4.webpack.config.js 配置 ！！！非常关键！！！

const path = require('path')
// vue-loader将Vue单文件组件(SFCs)转换为 JavaScript 模块
// https://vue-loader.vuejs.org/zh/
const { VueLoaderPlugin } = require('vue-loader') 

module.exports = {
  //入口文件，注意vue-cli生成的路径是在./main.js
  entry: './src/main.js',
  
  // 编译后输出配置
  output: {
   // 输出目录，resolve函数自动拼接目录名，主要是windows与xNix目录分隔符不同
   // __dirname 是node当初目录的环境变量
    path: path.resolve(__dirname, 'dist'),
    //打包的js文件名，这个与index.html的引入要一致 
    filename: 'bundle.js'
  },
  
  module: {
    rules: [
      // .vue的loader,配合VueLoaderPlugin使用，分别处理SFC的templete/scripts/style
      // 其中style部分根据按lang设定分发给不同的样式loader（css/sass/scss/less）
      { test: /\.vue$/, use: 'vue-loader' },
      
      // css loader配置,注意loader的先后顺序，最右的最优先,链式调用
      // https://webpack.docschina.org/loaders/css-loader/
      {
        test: /\.css$/,
        use: [
          //创建style标签，并将js中的样式资源插入到style标签中，然后添加到页面的head中生效
          'style-loader',
          //将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader'
        ]
      },
      
      // 处理less的loader,注意loader的先后顺序，最右的最优先
      // https://webpack.docschina.org/loaders/less-loader/
      {
        test: /\.less$/,
        use: [
          //创建style标签，并将js中的样式资源插入到style标签中，然后添加到页面的head中生效
          'style-loader',
          //将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader',
          //处理less文件
          'less-loader'
        ]
      },
      
      // 样式文件(.scss .sass)的loader，注意loader的先后顺序，最右的最优先，链式调用
      // sass-loader 、css-loader 与 style-loader 进行链式调用
      // https://webpack.docschina.org/loaders/sass-loader/
      {
        test: /\.s[ca]ss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      
      // js(.mjs .js)文件的loader 主要将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法
      // https://www.babeljs.cn/docs/
      // https://webpack.docschina.org/loaders/babel-loader/
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      
      // 图片资源文件(.png .jpg .jpeg .gif .svg .webp等)的处理,直接放入asset/resource目录
      // https://webpack.docschina.org/guides/asset-modules
      { test: /\.(png|jpg?g|gif|svg|webp)$/, type: 'asset/resource' }
      
    ]
  },
  
  // SFC解析插件，因为webpack是通用工具，解析vue是通过插件来实现的
  // https://vue-loader.vuejs.org/zh/guide/#vue-cli
  plugins: [new VueLoaderPlugin()],
  
  // devServer
  // https://webpack.docschina.org/configuration/dev-server/#devserver
  devServer: {
      
    // 必须，相当于为devServer指定一个wwwroot目录  
    static: {
      directory: path.join(__dirname, 'dist')
    },
    
    // proxy,可以解决前后端分离跨域问题，尤其是chrome高版本
    // https://webpack.docschina.org/configuration/dev-server/#devserverproxy
    // proxy: {
    //   //将 /api/users 的请求会将请求代理到 http://localhost:3000/api/users
    //   '/api': 'http://localhost:3000',
    // },
    
    // 其他参数
    // compress: true,
    
    // 指定端口
    // port: 9000,
    
    // 自动打开默认浏览器
    // open: true,
    
    // 只用本地ip，排除localhost 127.0.0.1方便跨设备调试
    // host: 'local-ip',
    
    // 监听环境变量
    // onListening({ server }) {
    //   const { address: addr, port } = server.address()
    //   console.log(`devServer start at : http://${addr}:${port}`)
    //}
  },
}

5.Vue主入口 ./src/main.js

vue-cli脚手架生成的放在根目录下，这里放在src目录下，在webpack.config.js中的 entry 配置一致即可

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

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

6. ./src/App.vue

<template>
  <div>Vue App By Hand 1.0</div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="less" scope></style>

7. git版本管理的 .gitignore 文件

.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

8.git版本管理

git init & git add & git commit....

9.运行

npm run serve