webpack 学习笔记

Posted 2020-11-04 learn-dotnet

这几天进入新公司，领导让我学习下 vue 的知识，正好学习下 webpack 的使用。

基础使用

创建 vue 项目：　　vue init webpack 程序名称
添加依赖包：　　　　npm/cnpm install 包名 --save-dev
调试：　　　　　　　npm run dev
打包：　　　　　　　npm run build

调试和构建的命令可在 package.json 中进行配置修改

 

1、package.json 文件介绍

　　程序所依赖的包的引用信息和调试、build 的命令都在该文件中配置。

　　这里主要介绍部分信息：

基础配置信息：

1   "name": "xjtest",                           // 项目名称
2   "version": "1.0.0",                         // 版本
3   "description": "A Vue.js project",    　　　 // 简介
4   "author": "",                               // 作者

命令配置信息：

　　这里配置的就是程序调试、打包等命令信息

1 "scripts": {
2     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
3     "start": "npm run dev",                     
4     "build": "node build/build.js"
5   }

　　以上这些命令可以自己添加或修改，比如我们需要同时开发 PC 站和 Mobile 站的话，我们可以在这里定义不同的运行和打包命令，如下：

1 "scripts": {
2     "dev-pc": "node compile/build/dev-server.js",
3     "dev-mobile": "node compile/build/dev-server.js -mobile",
4     "start": "node build/dev-server.js",
5     "build-pc": "node compile/build/build.js",
6     "build-mobile": "node compile/build/build.js -mobile"
7   }

 

2、 build 文件介绍

　　这里是存放调试和打包必须的配置信息的地方，由上面的 scripts 配置信息可以看出。

　　build.js 文件介绍：

 1 ‘use strict‘
 2 require(‘./check-versions‘)()
 3 // 环境变量设置
 4 process.env.NODE_ENV = ‘production‘
 5 
 6 // 引入依赖
 7 const ora = require(‘ora‘)
 8 const rm = require(‘rimraf‘)
 9 const path = require(‘path‘)
10 const chalk = require(‘chalk‘)
11 const webpack = require(‘webpack‘)
12 const config = require(‘../config‘)    // 项目配置文件
13 const webpackConfig = require(‘./webpack.prod.conf‘)    // webpack 配置信息
14 var utils = require(‘./utils‘)     // 基础操作定义
15 
16 const spinner = ora(‘building for production...‘)
17 spinner.start()
18 
19 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
20   if (err) throw err
21     // 这是通过加载 webpackConfig 来对项目进行打包
22   webpack(webpackConfig, (err, stats) => {
23     spinner.stop()
24     ....
25   })
26 })

　　webpack.base.conf 介绍：

 1   entry: ‘main.js‘,    // 程序入口
 2 
 3   // 输出信息
 4   output: {
 5     path: config.build.assetsRoot,     // 从配置中读取输出路径
 6     filename: ‘[name].js‘,     // 输出的文件名
 7     // 根据环境变化设置发布路径
 8     publicPath: process.env.NODE_ENV === ‘production‘
 9       ? config.build.assetsPublicPath
10       : config.dev.assetsPublicPath
11   },

　　webpack.prod.conf 介绍：

 // 输出设置，同上
 output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath(‘[name].js‘),
    chunkFilename: utils.assetsPath(‘[id].js‘)
  },