問(wèn)題描述

bundle.js生成的這些代碼是什么啊?瀏覽器運(yùn)行html報(bào)錯(cuò)啊.http://www.jianshu.com/p/42e1... 我是按照這里的說(shuō)明操作的啊

問(wèn)題解答

webpack將工程的依賴文件解耦壓縮打包生成了你的 bundle.js，沒(méi)人會(huì)去管這個(gè) bundle.js 的內(nèi)容，另外請(qǐng)注意各個(gè)博客中使用的依賴庫(kù)的版本，版本升級(jí)造成API接口改變是很有可能的，還有你具體報(bào)了什么錯(cuò)也沒(méi)說(shuō)清楚，問(wèn)問(wèn)題就這樣貼了個(gè)鏈接，被踩很正常。

正如樓上所說(shuō).你最好再編輯下你的問(wèn)題.建議你結(jié)合webpack的文檔,與各教程對(duì)照學(xué)習(xí).根據(jù)你的目錄結(jié)構(gòu),我推測(cè)下webpack.config.js的寫(xiě)法,我也是初學(xué),有不對(duì)之處歡迎各位扶正.假設(shè)你開(kāi)發(fā)目錄結(jié)構(gòu)

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

// webpack.config.jsvar path = require(’path’), HtmlWebpackPlugin = require(’html-webpack-plugin’), webpack = require(’webpack’);module.exports = { entry: {// greeter: ’./src/js/Greeter.js’, // 把greeter文件單獨(dú)提取出來(lái).main: ’./src/js/main.js’ // 如果不單獨(dú)提取greeter文件,它將跟main打包到一起. }, output: {path: path.resole(__dirname, ’dist’), // 輸出路徑filename: ’js/[name].[hash:5].js’ // 輸出文件名,[hash:5]這里的:5意思是只要hash的5個(gè)字符,當(dāng)時(shí)看各教程案例都沒(méi)解釋這個(gè),搞的我一開(kāi)始也不明白這是什么用意. }, // 以上基本就算完成了webpack工程化,如果你要把引用的greeter文件提取出來(lái)就使用 CommmonsChunkPlugin插件. plugins: [new webpack.optimize.CommmonsChunkPlugin({name: ’greeter’}),new HtmlWebpackPlugin() // 該插件是把打包的JS所應(yīng)用到的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' }}

我入門(mén)時(shí)幫助比較大的幾個(gè)鏈接webpack 中文文檔(2.2)webpack 官方文檔Webpack之“多頁(yè)面開(kāi)發(fā)”最佳實(shí)戰(zhàn)Webpack 常見(jiàn)靜態(tài)資源處理 <- 主要參考的是加載器/插件的參數(shù)說(shuō)明.webpack踩坑之路 (2)——圖片的路徑與打包