现在,webpack已经更新到了4.X的版本了,在这之前呢,有过一点的接触,简单的学了一下,但是到了这个版本之后呢,发现了很多新的东西,有些指令,包的功能发生一些变化,在使用的过程中也发现了很多的问题,现在做一下整理
首先说一下webpack是什么?他是一个专门打包的工具,在前端开发过程中,是必不可少的,尤其是在大型的项目里面,起到了很大作用,他们把多个js文件打包成一个js文件,减少http请求,减少服务器压力,还能把less,sass,stylus,等前端css预处理器,转换成浏览器认识的css代码,这个是需要加载loader,最后可以优化复杂的前端项目
1.开始
使用webpack,首先必须要安装node环境,这里就不做介绍了,可以自行百度
2.安装webpack
首先新建一个文件夹,里面的src文件是必不可少的,然后同级在新建webpack.config.js,用于配置相关参数,在然后用cmd初始化package.js文件,执行npm init -y ,(或者配置了淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 可以使用cnpm init -y),这个文件分为开发环境(develepment)和生产环境(production),例如:npm i jquery -D (将jq放在package.json的devDependencies)或者npm i jquery -S (将jq放在package.json的dependencies)
3.package.json的配置
可以在script里面配置启动服务启动,打包的配置,npm run dev (启动服务器) npm run build (对文件进行 打包),development里面是需要的包
3.webpack.config.js ---- webpack配置文件
module.exports={
//入口配置
entry:{},
//出口配置
output:{},
//module.rules
//加载loaders
module:{},
//插件
plugins:[],
//开发服务器
devServer:{}
};
如图:这是一些webpack.config.js的常用配置,平时工作中用的比较多
src文件下title的配置
这module里面可以加载loaders,用于处理css样式的引入
不断更新中。。。。