这几天进入新公司，领导让我学习下 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 err21 ????// 这是通过加载 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.assetsPublicPath10 ??????: config.dev.assetsPublicPath11 ??},webpack.prod.conf 介绍：
// 输出设置，同上 output: { ???path: config.build.assetsRoot, ???filename: utils.assetsPath(‘[name].js‘), ???chunkFilename: utils.assetsPath(‘[id].js‘) ?},webpack 学习笔记
原文地址：https://www.cnblogs.com/learn-dotnet/p/9023032.html