javascript - Je ne sais pas ce que signifie le code du fichier bundlejs emballé par webpack.

Question

Quels sont ces codes générés par bundle.js ? Le navigateur signale une erreur lors de l'exécution du HTML http://www.jianshu.com/p/42e1... J'ai suivi les instructions ici

.

Answer 1

Webpack découple, compresse et empaquete les fichiers de dépendances du projet pour générer votre bundle.js Personne ne se souciera du contenu de ce bundle.js. De plus, veuillez faire attention à la version de la bibliothèque dépendante utilisée dans chaque blog. Les mises à niveau de version entraîneront des modifications dans l'interface de l'API. C'est très possible et vous n'avez pas précisé quelle erreur vous avez signalée. Vous venez de publier un lien en posant une question. Il est normal qu'il soit rejeté.

Answer 2

Comme mentionné ci-dessus, vous feriez mieux de modifier à nouveau votre question.
Je vous suggère de combiner la documentation de webpack et de la comparer avec chaque tutoriel.
En fonction de la structure de vos répertoires, je spécule sur la façon d'écrire webpack.config.js. un débutant. S'il y a des erreurs, veuillez me corriger
Supposons que vous développiez la structure des répertoires

.

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

Quelques liens qui m'ont beaucoup aidé lors de mes débuts
Documentation chinoise du webpack (2.2)
Documentation officielle du webpack
Meilleures pratiques de Webpack pour le "développement multi-pages"
Traitement des ressources statiques communes du Webpack<- La référence principale est le chargeur/plug -dans la description du paramètre.
Pièges du Webpack (2) - chemin de l'image et emballage