webpack 建構簡單的vue項目

---恢複内容開始---

webpack主要執行流程：

入口→loader處理→出口

// webpack.config.js 檔案：
const path = require('path') // 引入path子產品
module.exports = {
  "entry": "./src/main.js",  // 入口檔案
  "output": {
    "filename": 'bundle.js', // 打包後檔案名字
    "path": path.resolve(__dirname, "dist"),  // 出口檔案路徑
    "publicPath": "/dist" // 虛拟打包後檔案路徑。熱替換時有用。打封包件不寫入磁盤，存在虛拟檔案夾中，以便于修改檔案後及時回報在網頁上。
  },
  "module": { 
    "loaders":[{
      "test": /\.css$/, // css檔案需要style-loader，css-loader
      "loader": ["style-loader","css-loader"],
      "exclude": '/node_modules' // 不需要編譯node_modules
    },{
      "test": /\.js$/,
      "loader": 'babel-loader', // js檔案使用babel-loader 轉換。
      "exclude": '/node_modules'
    },{
      "test": /\.vue$/, // 遇到vue檔案使用vue-loader。vue-loader需要依賴其他loader 下載下傳後會有提示
      "loader": 'vue-loader',
      "exclude": '/node_modules'
    }]
  },
  resolve: {
    alias: { // 别名設定
      'vue$': 'vue/dist/vue.esm.js', // 運作時建構必用。
        '@': path.resolve('src') // @代表src目錄
    }
  },
  devServer: { // 伺服器設定
    // contentBase: '', 這個鍵 主要作用是靜态伺服器入口檔案夾。如果不設定，相當于項目目錄。如果有index.html 會直接找到index.html并且打開。
    hot: true, // 熱切換
    historyApiFallback: true,  // 單頁應用找不到時復原到index.html
    inline: true
  }
}      

// 多檔案入口      

　　const HtmlWebpackPlugin = require('html-webpack-plugin') // 引入html生成插件

　"entry": {
    "first":"./src/entry/first.js", // key為檔案名，對應出口[name].js 中的name
    "second": './src/entry/secend.js' // value 為入口檔案路徑。
  },
  plugins: [ 
     new HtmlWebpackPlugin ({ // 這個插件能在打包的時候，自動生成html檔案，并且放入出口path中。并且sript src 引入所有打包的js檔案。
      filename: 'second.html', // 生産的html檔案名字。
      // template: 'test.html', 
      inject: true
    }),
    new HtmlWebpackPlugin({ // 2次執行個體化，生成2個html檔案
      filename: 'first.html',
      inject: true
    })
  ],
  "output": {
    "filename": '[name].js', // 出口檔案名字，對于入口的key值
    "path": path.resolve(__dirname, "./dist"),
    "publicPath": "/dist"
  },      

// package.json  
// 這兒有了webpack，不再需要main字段。設定scripts字段。這兒用npm run dev 可運作dev鍵 後面的代碼。      

"scripts": {
    "dev": "webpack-dev-server --inline --hot", // 啟動webpack調試伺服器，隻重新渲染修改部分，修改後立即重新整理。
    "build": "webpack -p" // webpack打包，并且檔案壓縮檔案。
  },      

// .babelrc 
{
   presets：['stage-2']  // 這兒stage 一共5個階段，stage-5 不存在，為es2015 ，stage-0 最高，階段數字越小，技術越新，但是新技術不穩定，可能未來會被淘汰。一般選stage-2
}
          

現在就可以用npm run dev 啟動調試，npm run build 啟動打包。

---恢複内容結束---