webpack--快速入门

前言

webpack作为前端模块化构建工具,很值得一学,那么我们快速入门的目标,就是利用webpack进行css,js等基础一系列打包压缩.

安装

自己创建个测试文件夹,然后本地安装

npm install webpack --save-dev

创建完后,到package里面查看下版本,我的版本是4.34
由于版本问题,我还需要安装webpack-cli
npm install --save-dev webpack-cli

然后初始化npm信息

npm init 这里注意不要加-y,我这里报错是因为我这里有中文

这里啊,我又跟着文档继续操作,操作了一阵子后,我发现我就蒙蔽了,所以我认为啊,这里的webpack中文文档写的不是很好,对小白不友好.附上地址:
https://www.webpackjs.com/concepts/
然后我就又百度,找到了菜鸟教学,进去看看吧
https://www.runoob.com/w3cnote/webpack-tutorial.html

跟着菜鸟教学一起构建webpack

1.跟着菜鸟教学,一步一步搭建,然后准备压缩代码,发现报错了

然后百度…发现网上惊人的一致,都是说什么"没有全局安装,巴拉巴拉的",试了一下,OK解决.但是又报其他的错了,我的天啊.查看版本差异发现也找不到,官网还网速不好.
吐槽归吐槽,下面我们就来分析对比下,各个版本的坑:

3.x和4.x版本的坑

3.x	4.x
打包命令:webpack a.js b.js	打包命令:webpack a.js -o b.js
兼容webpack-cli	需要自己安装webpack-cli

这是最主要的几个坑

3.x版本练习

压缩js命令:

webpack a.js b.js

步骤:
1.全局安装webpack
2.建立目录

然后压缩下js,测试下,发现没有问题.
但是webpack只能压缩js,如果要压缩css的话,要安装

npm install css-loader style-loader

测了下,没问题

我们手动压缩的方法搞懂了,这样肯定不行,手动的话很麻烦,所以要进行配置一下.

这样的话,我们只用执行webpack就可以生成bundle.js了.
但是,我们肯定希望他能自己监听自己,实时刷新,这样多方便.
所以可以用命令

webpack --progress --colors --watch

或者是用webpack-dev-server实现
基本写到这里,webpack算是基本入门了,为了以后不用从头开始看起,方便查阅,下面以4.x为基本,进行总结和问题解决记录.

4.x版本记录

常用指令

名称	作用
webpack -version	查看版本信息
npm uninstall webpack -g	全局卸载webpack
npm install webpack -g	全局安装webpack
npm install webpack@4.x -g	全局安装指定版本的webpack
npm cache clean -f	清除npm缓存

卸载的时候可以把npm包下的一起删了去,防止冲突,我的npm包路径是

C:\Users\Administrator\AppData\Roaming\npm

操作4.x步骤

1 本地安装

$ npm install webpack webpack-cli --save-dev

2 查看webpack版本

webpack -verison

3 报错

解决办法:全局安装 $ npm install webpack webpack-cli -g

4 再次查看版本

webpack -version

成功解决

5 创建目录并压缩js

又报错了,这里可以看到,是版本的问题带来的错误,解决办法,换一种编译方式:

webpack test.js -o main.js 这里的-o参数位置不能变

可以看到问题已经解决了.
6.配置webpack.config.js

然后运行webpack,发现可以压缩,成功

至此,webpack算是基本入门,下篇就是对webpack的中级研究了