标签：inner stat gre star 加载 ... rect ora uil
这几天进入新公司，领导让我学习下 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‘) },
标签：inner stat gre star 加载 ... rect ora uil
原文地址：https://www.cnblogs.com/learn-dotnet/p/9023032.html
