webpack 學習筆記

這幾天進入新公司，領導讓我學習下 vue 的知識，正好學習下 webpack 的使用。

基礎使用

建立 vue 項目：　　vue init webpack 程序名稱
添加依賴包：　　　　npm/cnpm install 包名 --save-dev
調試：　　　　　　　npm run dev
打包：　　　　　　　npm run build

調試和構建的命令可在 package.json 中進行配置修改

 

一、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   }

 

二、 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')
  },