18、webpack配置和使用
其他
2018-08-11 08:58:11
阅读次数: 0
1、webpack:webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,说白了webpack可以裸奔cmd规范。
2、基本使用
┣ js ┃ ┣ main.js ┃ ┣ yuan.js ┣ index.html |
我们的项目很简单,没有任何的第三方库,没有sea.js、没有require.js。
程序也很简单,所有的js文件都在裸奔CMD规范,没有任何的标准壳:
main.js:
var yuan = require("./yuan.js");
alert(yuan.mianji(20));
这里面出现了require这个词,浏览器不认识,但是打包之后的all.js中会定义require,会自动给他加上标准壳。
yuan.js:
function mianji(r){
return 3.14 * r * r;
}
exports.mianji = mianji;
然后我们在CMD窗口中执行:
webpack js/main.js dist/all.js
此时神奇的事情发生了,两个js文件:main.js、yuan.js被打包成为了一个js文件。
-
webpack不是无脑合并js文件!和我们今后要学习的Grunt、Gulp不同;
-
webpack是按图索骥的,只有require链中出现的js文件,才会被打包到all.js文件中!
-
如果多个文件都require了某文件,这个文件只会在all.js中出现一次。
3. webpack.config.js文件
在项目的根目录,创建一个webpack.config.js文件,这个文件可以指导webpack的工作。
var path = require("path");
//进行配置的东西,实际上是本文件的暴露项,要写module.exports
module.exports = {
//配置入口文件
entry : "./js/main.js" ,
//配置产出文件
output : {
//产出文件文件夹
path : path.resolve(__dirname , "dist") ,
//产出文件的文件名
filename : "all.js"
},
//实时监测文件更新,一旦文件更新了,就重新合并打包一份
watch : true
}
写完这个文件之后,我们就能在项目的根目录打开CMD窗口,输入简单的命令:
webpack
webpack就知道自己找入口文件了,自己合并到产出文件了,自己监听文件的变化了。
转载自blog.csdn.net/sinat_36414515/article/details/81380763