首页 > 编程知识 正文

webpack基础知识,webpack底层原理

时间:2023-05-03 06:11:16 阅读:201963 作者:4699

1.新建一个空文件夹demo1

在该路径下cmd窗口打开,输入npm init初始化一个项目

此时文件夹中会生成一个package.json文件,备注:此时项目中只有这一个文件。

2.安装依赖npm install loadash --save

备注:--save是为了项目帮助记住依赖信息,从npm 5以上的版本会默认加上这个参数,所以不写--save也没关系。

npm install jquery --save-dev

备注:dependencies一般对应生产环境的依赖,devDependencies是开发环境的依赖,一般用于装一些开发辅助(如eslint)依赖。不添加任何参数(npm install)这两种包都会安装到node_modules中,npm install --only=dev/npm install --only=prod:只安装开发环境/生产环境的包,加快安装的速度。

3.cmd窗口执行webpack执行打包,若报错,可能是webpack-cli没装,执行下npm install webpack-cli -g

备注:webpack打包的默认打包入口就是src文件下的index.js,默认出口文件就是dist mian.js

4.自定义配置

新建一个webpack.config.js,自定义打包的入口文件为app.js,出口文件为dist文件夹下面的bundle.js

entry:工程资源的入口,它可以是一个文件也可以是多个文件

output:打包结果的配置,path有一个要求(必须是绝对路径)

5.安装webpack-dev-server

webpack-dev-server打包的特殊之处,它不会生成一个打包后的文件,但页面又可以正常访问,就好像是把文件放在了一个内存当中。

额外拓展loader

loader是文件加载器

webpack项目可以在js文件中import引入css或png文件,原因是因为loader的存在,loader的使用需要先安装,npm install css-loader --save-dev,loader的引入在每一个webpack版本中都不太一样。为了使样式生效也要安装:npm install style-loader --save-dev,必须是css-loader在style-loader之后。

 

 

 

 

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。