1:这里总结一下第二章的package.json与webpack.config.js,在上一章的最后,package.json里面script下面配置了webpack
这2个到底有什么区别呢?
1.1 package.json是用npm run webpack来执行的,npm run webpack运行的关键词是这个
1.2 而webpack.config.js是用webpack命令来执行的,所以注意一下
这里注明一下,因为前2章用了太多的图片了,导致了文章审核一直过不去,所以我在以后的文章中会少用图片,多用文字,开始
webpack配置的entry和output
1:entry它不止可以有1个入口文件,还可以有多个入口文件
//第三节 数组形势的多入口文件
module.exports = {
// 设置入口文件
entry:['./src/script/main.js','./src/script/a.js'],
// 设置出口文件,规定把打包后的文件放在哪里
output:{
// 出口文件放置的路径
path:__dirname + 'dist/js',
filename:'bundle.js'
}
}
打印结果:打包成了bundle.js文件
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(1);
module.exports = __webpack_require__(2);
/***/ }),
/* 1 */
/***/ (function(module, exports) {
function helloworld(){
}
/***/ }),
/* 2 */
/***/ (function(module, exports) {
function a(){
}
/***/ })
/******/ ]);
最后提一些:当entry是字符串的时候,表示单个路径,是数组的时候,表示多个路径
2:对象形势的多入口文件
//第三节 对象形势的多入口文件
module.exports = {
entry:{
main:'./src/script/main.js',
a:'.src/script/a.js'
},
output:{
path:__dirname + '/dist/js',
filename: 'bundle.js'
}
}
打包结果发现有问题:原因是output错误,入口数组或者字符串,可以单输出,但是当入口文件有多个的时候,ouput就要发生改变了
/* 0 */
/***/ (function(module, exports) {
function helloworld(){
}
/***/ })
/******/ ]);
3:对象形势的多入口文件,先记住3点 name hash chunkhash
name = main
hash = 每次打包时的hash值
chunkhash = 每个文件的版本号,保证每个文件的唯一性
//第三节 对象形势的多入口文件
module.exports = {
entry:{
main:'./src/script/main.js',
a:'./src/script/a.js'
},
output:{
path:__dirname +'/dist/js',
filename: '[name].js'
}
}
> [email protected] webpack D:\D\webpack-demo
> webpack --config webpack.config.js --progress --display-modules --colors --display-reasons
Hash: 699ff93bb25e27322e71
Version: webpack 1.15.0
Time: 58ms
Asset Size Chunks Chunk Names
a.js 1.41 kB 0 [emitted] a
main.js 1.42 kB 1 [emitted] main
[0] ./src/script/a.js 22 bytes {0} [built]
[0] ./src/script/main.js 31 bytes {1} [built]
最终生成目录:bundle.js是因为之前没有删掉而存在的