javascript - Saya tidak tahu maksud kod fail bundlejs yang dibungkus oleh webpack.

Question

Apakah kod ini yang dijana oleh bundle.js? Penyemak imbas melaporkan ralat semasa menjalankan html http://www.jianshu.com/p/42e1... Saya mengikuti arahan di sini

Answer 1

Webpack memisahkan, memampatkan dan membungkus fail kebergantungan projek untuk menjana bundle.js anda. Di samping itu, sila perhatikan versi pustaka bergantung yang digunakan dalam setiap blog . Peningkatan versi akan menyebabkan perubahan dalam antara muka API Ia sangat mungkin, dan anda tidak menjelaskan dengan jelas ralat yang anda laporkan.

Answer 2

Seperti yang dinyatakan di atas, lebih baik anda mengedit soalan anda sekali lagi
Saya cadangkan anda menggabungkan dokumentasi webpack dan membandingkannya dengan setiap tutorial
Berdasarkan struktur direktori anda, saya membuat spekulasi tentang cara menulis webpack.config.js seorang pemula. Jika terdapat sebarang kesilapan, sila betulkan saya
Andaikan anda membangunkan struktur direktori

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

Beberapa pautan yang banyak membantu saya semasa bermula
webpack Cina dokumentasi (2.2)
webpack rasmi dokumentasi
Amalan terbaik Webpack untuk "pembangunan berbilang halaman"
Webpack biasa pemprosesan sumber statik<- Rujukan utama ialah pemuat/plag -dalam perihalan Parameter.
Perangkap pek web (2) - laluan imej dan pembungkusan