vue項目實戰, webpack 配置流程記錄

 vue項目實戰記錄,地址在這 購物車單界面   

npm install
npm run dev 

跑起來能夠看到界面效果

 

這裏簡單記錄一下webpack的編譯流程

 

入口 package.json 

"scripts": {
    "dev": "node build/dev-server.js", //npm run dev ，執行這裏
    "build": "node build/build.js"
  },

 

build文件下的dev-server.js文件

var config = require('../config')//引入的一個配置文件，運行時和開發時的一個配置文件

var webpack = require('webpack')
var opn = require('opn')
var proxyMiddleware = require('http-proxy-middleware')//http協議代理的一箇中間鏈
var webpackConfig = require('./webpack.dev.conf')// 目前是開發環境，因此是dev.conf

 

webpack.dev.conf 的導入文件

var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var utils = require('./utils')
var baseWebpackConfig = require('./webpack.base.conf') //導入基礎配置文件
var HtmlWebpackPlugin = require('html-webpack-plugin')//webpack提供的一個操做html的插件
//具體看demo註釋

 

webpack.base.conf 文件

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')//定義了當前項目的根目錄


entry: {
    app: './src/main.js'  //這個就是定義的入口文件了
  },
 output: {
    path: config.build.assetsRoot, //輸出的文件路徑,對應config文件加下的index.js文件的assetsRoot路徑

    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
    filename: '[name].js' //對應的  entry的一個key ，這裏就是app, app.js就是這麼得來的

 resolve: {
//模塊的相關配置
    extensions: ['', '.js', '.vue', '.json'],//能夠自動補全的後綴
    fallback: [path.join(__dirname, '../node_modules')],//當前端模塊找不到的時候就從node_modules裏面找
    alias: {
//提供的別名
      'vue$': 'vue/dist/vue.common.js',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components')
    }

  module: {
//
    loaders: [
      {
//編譯時候的處理，好比這裏，對全部的js後綴文件babel loader作處理
       test: /\.js$/,
        loader: 'babel',  
        include: projectRoot, //檢查該目錄裏面的文件
        exclude: /node_modules/  //排除這個目錄裏面的文件
      },

{

//這裏有個query操做， 超過10KB的文件，對文件名作處理
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
還有一個eslint， 作demo的時候我通常都直接去掉了，由於格式的錯誤提示很藍瘦，有興趣的能夠Google


vue: {
//css文件配置,具體看utils.cssLoaders函數
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
    postcss: [
      require('autoprefixer')({
        browsers: ['last 2 versions']
      })
    ]
  }
dev-server.js

module.exports = app.listen(port, function (err) {\
//啓動server監聽端口，這裏是8080，在dev裏面配置
//經過localhost端口啓動網頁
  if (err) {
    console.log(err)
    return
  }
  var uri = 'http://localhost:' + port
  console.log('Listening at ' + uri + '\n')

  // when env is testing, don't need open it
  if (process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
})

 

最近在學vue.js 高仿餓了麼的實戰項目，有須要視頻的告訴我，給連接。