javascript - I don't know what the bundlejs file code packaged by webpack means.

Question

What are these codes generated by bundle.js? The browser reports an error when running html. http://www.jianshu.com/p/42e1... I followed the instructions here

Answer 1

Webpack decouples, compresses and packages the dependency files of the project to generate your bundle.js. No one will care about the content of this bundle.js. In addition, please pay attention to the version of the dependent library used in each blog. Version upgrades will cause changes in the API interface. It's very possible, and you didn't make it clear what error you reported. You just posted a link when asking a question. It's normal for it to be rejected.

Answer 2

As mentioned above, you'd better edit your question again.
I suggest you combine webpack's documentation and compare it with each tutorial.
Based on your directory structure, I speculate on how to write webpack.config.js. I am also a beginner. If there are any mistakes, please correct me.
Assume you develop the directory structure

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"
  }
}

A few links that helped me a lot when getting started
webpack Chinese documentation (2.2)
webpack official documentation
Webpack's best practice for "multi-page development"
Webpack common static resource processing<- The main reference is the loader/plug-in Parameter description.
Webpack pitfalls (2) - image path and packaging