webpack 学习笔记

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

基础使用

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

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

1、package.json 文件介绍

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

　　这里主要介绍部分信息：

基础配置信息：

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

命令配置信息：

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

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

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

"scripts": {
    "dev-pc": "node compile/build/dev-server.js",
    "dev-mobile": "node compile/build/dev-server.js -mobile",
    "start": "node build/dev-server.js",
    "build-pc": "node compile/build/build.js",
    "build-mobile": "node compile/build/build.js -mobile"
  }

2、 build 文件介绍

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

　　build.js 文件介绍：

'use strict'
require('./check-versions')()
// 环境变量设置
process.env.NODE_ENV = 'production'

// 引入依赖
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')    // 项目配置文件
const webpackConfig = require('./webpack.prod.conf')    // webpack 配置信息
var utils = require('./utils')     // 基础操作定义

const spinner = ora('building for production...')
spinner.start()

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
    // 这是通过加载 webpackConfig 来对项目进行打包
  webpack(webpackConfig, (err, stats) => {
    spinner.stop()
    ....
  })
})

　　webpack.base.conf 介绍：

  entry: 'main.js',    // 程序入口

  // 输出信息
  output: {
    path: config.build.assetsRoot,     // 从配置中读取输出路径
    filename: '[name].js',     // 输出的文件名
    // 根据环境变化设置发布路径
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

　　webpack.prod.conf 介绍：

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