Question

webpack build后生成的app，vendor，manifest三者有何职能不同

Answer 1

不太明白你的意思首次使用Webpack,用CLI,即CommandLineInterface→确认是否安装了NodeJSnpm-v→安装Webpacknpminstallwebpack-g→创建一个简单的网站..webpacktest/.app.js.index.html→导航到webpacktest所在文件夹→对app.js文件使用webpackwebpack./app.jsbundle.js→我们看到在webpacktest目录下多了一个bundle.js文件→现在，可以在index.html中引用bundle.js文件，而不是app.js文件■在项目中添加配置文件→在项目根目录下创建名称为webpack.config.js文件当设置好webpack.config.js文件后，每次我们导航到项目，只要使用webpack这一个命令就可以使用各项功能了。module.exports={entry:"./app.js",output:{filename:"bundle.js"}}→命令行来到需要Webpack的网站下→直接输入webpack命令webpack■启用Webpack观察者模式当webpack.config.js的配置发生变化，如果每次都要手动输入webpack命令来生成js文件的话，显得相对麻烦一些。Webpack为我们提供了观察者模式，启用后，任何的webpack.config.js中的变化将接受观察，自动生成最终的js文件。→命令行来到需要Webpack的网站下→启用观察者模式webpack--watch→在webpack.config.js中添加watch字段，并设置成truemodule.exports={entry:"./app.js",output:{filename:"bundle.js"},watch:true}→这样，每次修改保存webpack.config.js中引用文件，bundle.js的文件会自动更新。■安装启用WebpackDevServer→导航到目标网站目录→输入npm命令安装WebpackDevServernpminstallwebpack-dev-server-g→输入webpack-dev-server命令webpack-dev-server→看到大致如下内容login');document.write("WelcometoBigHairConcerts!!Baby");console.log('Apploaded');→在浏览器中输入：可以看到变化。→在项目下再添加一个utils.js文件console.log('loggingfromtheutils.jsfile');→来到webpack.config.js下配置如下：module.exports={entry:["./utils","./app.js"],output:{filename:"bundle.js"},watch:true}→命令行导航到当前项目下→重新启用WebpackDevServerwebpack-dev-server→在中体现了相应的变化