1. 搭建腳手架

Vue-cli官方教程
Vue.js安裝教程

yarn global add vue-cli
vue init webpack maijia-youzan
yarn
npm run dev  //啟動(dòng)項(xiàng)目
npm run build  //打包文件，項(xiàng)目目錄下會(huì)增加dist文件夾

• yarn global add vue-cli
  
  腳手架搭建.png
• vue init webpack maijia-youzan
  
  腳手架搭建-2.png
  
  
  腳手架搭建-3.png
  
  
  腳手架搭建完成.png
  
  （等待大約一個(gè)世紀(jì)的時(shí)間吧 就安裝好了...不知道咋回事，我這個(gè)有好多報(bào)錯(cuò)=.=）
• yarn
  官網(wǎng)文檔
  
  下載模塊.png
  
  
  已配置好的項(xiàng)目目錄.png
• npm run dev
  在開發(fā)環(huán)境下啟動(dòng)一個(gè)本地服務(wù)
  啟動(dòng)項(xiàng)目.png
• npm run build
  
  打包項(xiàng)目.png

“源”代碼(/src)是用于書寫和編輯的代碼；“分發(fā)”代碼(/dist)是構(gòu)建過程產(chǎn)生的代碼最小化和優(yōu)化后的“輸出”目錄，最終將在瀏覽器中加載

項(xiàng)目目錄新增dist文件夾.png

關(guān)于dist目錄結(jié)構(gòu)的補(bǔ)充說明.png

2.基于vue-cli搭建一個(gè)多頁面應(yīng)用

參考文章
(1). 調(diào)整項(xiàng)目目錄結(jié)構(gòu)
在開發(fā)路徑src下增加modules和pages文件夾，分別存放模塊和頁面
有關(guān)頁面的所有文件都放到同一文件夾下就近管理：index.html(首頁的頁面模板)、main.js(頁面入口文件)、App.vue(頁面使用的組件，公用組件放到components文件夾下)、router(關(guān)于首頁頁面的路由配置)、assets(首頁頁面的靜態(tài)資源)都移到index文件夾下，并把main.js改為index.js，保證頁面的入口js文件和模板文件的名稱一致

調(diào)整目錄結(jié)構(gòu).png

var path = require('path')
var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
var merge = require('webpack-merge')

//多入口配置
exports.entries = function() {
  var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
  var map = {}
  entryFiles.forEach((filePath) => {
    var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
    map[filename] = filePath
  })
  return map
}

//多頁面輸出配置
exports.htmlPlugin = function() {
  let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
  let arr = []
  entryHtml.forEach((filePath) => {
    let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
    let conf = {
      template: filePath,
      filename: filename + '.html',
      chunks: [filename],
      inject: true
    }
    if (process.env.NODE_ENV === 'production') {
      conf = merge(conf, {
        chunks: ['manifest', 'vendor', filename],
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
        },
        chunksSortMode: 'dependency'
      })
    }
    arr.push(new HtmlWebpackPlugin(conf))
  })
  return arr
}

(3). 修改build/webpack.base.conf.js的入口配置

module.exports = {
  entry: utils.entries(),
  ...
}

修改utils.js和webpack.base.conf.js

(4). 修改build/webpack.dev.conf.js和build/webpack.prod.conf.js的多頁面配置：把原有的頁面模板配置注釋或刪除，并把多頁面配置添加到plugins

原有的頁面模板配置注釋.png

• webpack.dev.conf.js：

//const HtmlWebpackPlugin = require('html-webpack-plugin')
......
  plugins: [
    ......
    //  new HtmlWebpackPlugin({
    //    filename: 'index.html',
    //    template: 'index.html',
    //    inject: true
    //  }),
    ......
  ].concat(utils.htmlPlugin())

• webpack.prod.conf.js：

//const HtmlWebpackPlugin = require('html-webpack-plugin')
......
  plugins: [
    ......
    // new HtmlWebpackPlugin({
    //   filename: config.build.index,
    //   template: 'index.html',
    //   inject: true,
    //   minify: {
    //     removeComments: true,
    //     collapseWhitespace: true,
    //     removeAttributeQuotes: true
    //   },
    //   chunksSortMode: 'dependency'
    // }),
    ......
  ].concat(utils.htmlPlugin())

開發(fā)環(huán)境dev和生產(chǎn)環(huán)境prod下的多頁面配置.png

補(bǔ)充說明：在上面多頁面輸出配置中有這樣一行代碼：
chunks: ['manifest', 'vendor', filename],

3.webpack

安裝

//全局安裝
npm install -g webpack
//安裝到你的項(xiàng)目目錄
npm install --save-dev webpack

要安裝最新版本或特定版本，請運(yùn)行以下命令之一：

npm install --save-dev webpack
npm install --save-dev webpack@<version>

首先我們創(chuàng)建一個(gè)目錄，初始化 npm，然后 在本地安裝 webpack，接著安裝 webpack-cli（此工具用于在命令行中運(yùn)行 webpack）：

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

• 通過命令行模式實(shí)現(xiàn)
  webpack可以在終端中使用，在基本的使用方法如下：

// {extry file}出填寫入口文件的路徑，本文中就是上述main.js的路徑，
// {destination for bundled file}處填寫打包文件的存放路徑
// 填寫路徑的時(shí)候不用添加{}
webpack {entry file} {destination for bundled file}

指定入口文件后，webpack將自動(dòng)識別項(xiàng)目所依賴的其它文件，不過需要注意的是如果你的webpack不是全局安裝的，那么當(dāng)你在終端中使用此命令時(shí)，需要額外指定其在node_modules中的地址，繼續(xù)上面的例子，在終端中輸入如下命令

// webpack非全局安裝的情況
node_modules/.bin/webpack app/main.js public/bundle.js

• 通過配置文件來使用Webpack
  根目錄下新建一個(gè)名為webpack.config.js的文件

module.exports = {
  entry:   __dirname +"app.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"http://打包后輸出文件的文件名
  }
}

注：“__dirname”是node.js中的一個(gè)全局變量，它指向當(dāng)前執(zhí)行腳本所在的目錄

有了這個(gè)配置之后，再打包文件，只需在終端里運(yùn)行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就可以了，這條命令會(huì)自動(dòng)引用webpack.config.js文件中的配置選項(xiàng)
有了這個(gè)配置之后，再打包文件，只需在終端里運(yùn)行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就可以了，這條命令會(huì)自動(dòng)引用webpack.config.js文件中的配置選項(xiàng)

更快捷的執(zhí)行打包任務(wù)
在命令行中輸入命令需要代碼類似于node_modules/.bin/webpack這樣的路徑其實(shí)是比較煩人的，不過值得慶幸的是npm可以引導(dǎo)任務(wù)執(zhí)行，對npm進(jìn)行配置后可以在命令行中使用簡單的npm start命令來替代上面略微繁瑣的命令。在package.json中對scripts對象進(jìn)行相關(guān)設(shè)置即可，設(shè)置方法如下。

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack" // 修改的是這里，JSON文件不支持注釋，引用時(shí)請清除
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "3.10.0"
  }
}