javascript - webpack打包後的bundlejs檔案程式碼不知道什麼意思.

Question

#bundle.js產生的這些程式碼是什麼啊?瀏覽器運行html報錯啊.http://www.jianshu.com/p/42e1... 我是按照這裡的說明操作的啊###

Answer 1

webpack將工程的依賴檔解耦壓縮打包產生了你的bundle.js，沒人會去管這個bundle.js 的內容，另外請注意各個博客中使用的依賴庫的版本，版本升級造成API接口改變是很有可能的，還有你具體報了什麼錯也沒說清楚，問問題就這樣貼了個鏈接，被踩很正常。

Answer 2

如樓上所說.你最好再編輯下你的問題.
建議你結合webpack的文檔,與各教程對照學習.
根據你的目錄結構,我推測下webpack.config.js的寫法,我也是初學,有不對之處歡迎各位扶正.
假設你開發目錄結構

text_pro/
|- node_modules/
|- src/
|-  |- js/
|-  |-  |- main.js
|-  |-  |- Greeter.js
|-  |- index.html
|- webpack.config.js
|- package.json

// webpack.config.js
var path = require('path'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    webpack = require('webpack');
module.exports = {
    entry: {
        // greeter: './src/js/Greeter.js',  // 把greeter文件单独提取出来.
        main: './src/js/main.js' // 如果不单独提取greeter文件,它将跟main打包到一起.
    },
    output: {
        path: path.resole(__dirname, 'dist'), // 输出路径
        filename: 'js/[name].[hash:5].js' // 输出文件名,[hash:5]这里的:5意思是只要hash的5个字符,当时看各教程案例都没解释这个,搞的我一开始也不明白这是什么用意.
    },
    // 以上基本就算完成了webpack工程化,如果你要把引用的greeter文件提取出来就使用 CommmonsChunkPlugin插件.
    plugins: [
        new webpack.optimize.CommmonsChunkPlugin({name: 'greeter'}),
        new HtmlWebpackPlugin() // 该插件是把打包的JS所应用到的html中.
    ]
}

// package.json
{
  "name": "test_pro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --progress --colors --inline",
    "build": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^2.29.0",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.0"
  }
}

我入門時幫助比較大的幾個連結
webpack 中文文件(2.2)
webpack 官方文件
Webpack之「多頁開發」最佳實戰
Webpack 常見靜態資源處理<- 主要參考的是載入器/插件的參數說明.
webpack踩坑之路(2)－圖片的路徑與打包