webpack 配置流程記錄

標籤：tin   webpack   process   檔案配置   ssl   script   google   out   自動   

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

npm installnpm 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的時候我一般都直接去掉了，因為格式的錯誤提示很藍瘦，有興趣的可以Googlevue: {//css檔案配置,具體看utils.cssLoaders函數    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),    postcss: [      require(‘autoprefixer‘)({        browsers: [‘last 2 versions‘]      })    ]  }dev-server.jsmodule.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 高仿餓了麼的實戰項目，有需要視頻的告訴我，給連結。

 

webpack 配置流程記錄