webpack入门秘籍

首先创建文件夹目录并安装NODEgitwebpackinstallnpmi-gwebpack分别将内容写入对应的文件app.jsimportmodulesfrom'./modules';(前面的modules代表自定义接收"./moudules"里面的默认函数;)modules();执行方法document.write('我是App');index.html引用生成的文件modules.js导出默认方法，使用默认系统自动生成默认方法exportdefaultfunction(){console.log('我是modules');}#在项目的根目录打开git/nodeinputwebpack./app.js./dist/bundles.js回车eg:wepack入口文件新建文件的位置#可以看到有在dist目录下多一个bundles.js文件，执行index.html文件，打开console，你会看到输出如下：如果你理解了上面webpack简单的工作原理，那就开始练习webpack进阶版1.同样先创建文件目录。前面的app.j、index.html、modules.js，都是同一个class内容，多创建两个文件在项目根目录下执行npmi-Dwebpack-dev-server，回车npminit-y<如果能用yarn，最好>####手动创建一个webpack.config.js文件，内容如下：constpath=require('path');module.exports={//入口文件地址entry:'./app.js',//输入文件的地址output:{//__dirname表示node打开的文件的根目录path:path.join(__dirname,'dist'),//存放文件的目录publicPath:'/dist/',//新文件的名称filename:'bundle.js'},//创建带端口的目录of3000并执行For/dist/devServer:{publicPath:"/dist/",//端口为3000port:3000}}###所有准备工作完成，模块安装完毕，会出现下图似乎打开了包裹。在json文件中的scripts对象中添加“dev”：“webpack-dev-server”##打开根目录执行npmrundev回车或者输入webpack回车打开index.html文件，看是否效果成功。初步了解它；后面会进行新文件转码，lesssass等一系列操作。如果本文对您有帮助，请收藏并分享！