Webpack是什么?
webpack是一个使用Node.js实现的一个模块化代码打包工具
首先要先安装webpack
先创建一个文件夹,然后去给他初始化一下
npm init
然后在cmd内去输入指令进行安装
npm install -D webpack webpack-cli
完成后可以去package.json内查看版本是否有安装成功
或者使用./node_modules/.bin/webpack -v指令来查看
然后是如何使用他,可以举个例子,比如需要使用index.html来获取一个src文件夹内的a.js的内容,可以使用./node_modules/.bin/webpack ./src/a.js方法来将其进行打包,打包完成后会发现多出一个dist文件夹和里面的main.js,我们可以在index.html内引入这个即可获取到a.js的内容
我们每次打包如果都使用./node_modules/.bin/webpack的话是比较繁琐的,所以为了方便使用,我们可以到package.json中的scripts中来进行简化,例如:
然后如果要打包的话直接使用npm start即可,
要知道他有一些特殊的指令,例如start、stop、restart等,直接使用npm start即可输出
正常的一些指令,例如hello,是需要使用npm run hello
虽然我们可以直接通过命令来打包,但是更推荐创建一个webpack.js的配置文件来实现更方便和强大的功能
要知道指定打包入口文件有三种不同的形式,string\object\array
第一种,这是一个入口,一个打包文件
第二种,这是多个入口,一个打包文件
第三种,他是多个入口,多个打包文件
打包完成后
__dirname作用是获取当前项目所在的文件目录
dist含义是如果他没有,那就创建一个dist文件,如果已经有了,照常在已有的里面添
filename里面的name是个占位符,不会显示到页面上
最后,要知道在webpack中,有一个很重要的特性;模块不仅仅只是js的文件,webpack可以吧任意文件数据作为模块进行处理,包括:非js文本、css,图片等等,但是webpack默认情况下只能处理js模块,如果需要处理其他类型的模块,就需要使用它提供的一些其他功能了
我这里举个例子,比如说我新建了一个txt文档,想要把他里面的内容输出到页面上,如图
我可以现在index.js内引用data内的girl.txt,然后使用console.log方法把他输出到页面上
这样不做处理直接输出的话,txt内的内容是输出不到页面上的,如果想让他输出到页面上,我们可以去webpack.config.js内把index.js进行打包操作,如下
test内是正则,来找txt的文件后缀,找到后使用use内的loader来进行处理即可完成