【webpack】打包一个vue应用

Tag: 学习 webapck

打包一个vue应用最方便的还是使用官方提供的vue-cli应用，但是，从长远来说，这不利于我们自身的成长；
所以让我们暂时忘却vue-cli，基于webpack，从头一点一点去整合出一个webpack打包配置来；

目标

• 打包一个vue应用，可本地运行调试，可打线上包

前期准备

学习资料

深入浅出webpack

webpack中文文档

webpack核心概念

• Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
• Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
• Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
• Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
• Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
• Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

运行环境

node-v16.9.1
vue-cli(用于生成一个vue基本工程)

依赖版本相关
"webpack": "^5.64.1",
"webpack-cli": "^4.9.1",

技术选型

• 开发语言 ( JS (ES5/ES6+) or TS )

  使用ES6，借助Babel

• css预处理器 ( Less (.less) | Sass (.scss/.sass) | Stylus(.stylus/.styl) | Postcss )

  使用Less

一个空vue工程

// 验证cli是否安装成功
vue -V // 3.5.1

// Mac/linux系统
vue create webpack-practice
// Windows系统
winpty vue.cmd create webpack-practice

// 选择default(babel, eslint)
cd webpack-practice
npm run serve

/**
 *  DONE  Compiled successfully in 3542ms 
 * 
 * App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://x.x.x.x:8080/
  Note that the development build is not optimized.
  To create a production build, run npm run build.
 * /
// 出现以上字样表示空工程已就绪

一切准备就绪，下面开始进入正题

基础依赖及配置

npm i webpack webpack-cli -D

// package.json - add npm script
"scripts": {
  "start": "webpack",
  "serve:webpack": "webpack serve",
  "build:webpack": "webpack --mode production"
},

// 根目录 - ./webpack.config.js
/**
 * webapck配置总入口
 * 将配置分成三份，common/dev/prod
 */
const merge = require('webpack-merge');
const commonConfig = require('./build/webpack-common.config.js');
const developmentConfig = require('./build/webpack-dev.config.js');
const productionConfig = require('./build/webpack-prod.config.js');

module.exports = (env, args) => {
  if (args.mode === 'production') {
    return merge(commonConfig, productionConfig);
  } else {
    return merge(commonConfig, developmentConfig);
  }
};

// build目录 - ./build/webpack-common.config.js
/**
 * webapck配置文档
 * docs: https://webpack.docschina.org/concepts/
 */
const path = require('path');

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  /**
   * 入口(entry)
   * 入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
   * 默认值是 ./src/index.js
   */
  entry: './src/main.js',
  /**
   * 输出(output)
   * output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
   */
   output: {
    path: resolve('/dist'), // 需要绝对路径
    filename: '[name].js',
    publicPath: '/'
  },
}

// build目录 - ./build/webpack-dev.config.js
/**
 * 开发环境webpack配置
 */
module.exports = {
  mode: 'development',
}

// build目录 - ./build/webpack-prod.config.js
/**
 * 生产环境webpack配置
 */
module.exports = {
  mode: 'production',
}

至此webpack相关基本配置已完成

开始执行打包命令：

npm run start
/**
 * 
 * ERROR in ./src/App.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
>