webpack初识

webpack初识


webpack是打包工具,他的作用是把各种奇形怪状的文件(如.vue,.jsx,.ts,.less,.sass文件)变成浏览器认识的.html,.css,.js,静态资源(图片,视频)文件。


webpack具体做了些什么事情,一一分析

把多个JS文件最终打包为一个JS

把less文件转化为css文件并打包

语法检查eslint

JS兼容性处理,把es6转成es5

把静态资源文件处理后打包

处理其他的资源文件

打包HTML文件

自动编译并预览项目

热摸替换


webapck的本质是一个模块打包工具, 所以webpack默认只能处理JS文件,不能处理其他文件,用于将其它类型文件转换为webpack能够识别处理模块的工具我们就称之为loader。


使用必须先安装:


全局安装webpack(这里一版本3为例):

npm install [email protected] -g


检查版本

webpack --version


再本地安装一个,因为全局的可能会有版本冲突,一般项目就用本地局部的webpack:

npm install [email protected]


安装完这个package.json会多一个dependencies:




完成一个webpack最简单的打包测试:


创建一个webpack项目,并打包测试

JS和JSON文件不需要任何配置或者安装loader即可打包。


1.创建src目录

src里面有一个main.js入口文件,即打包入口文件,这里就是各种模块引用的开始。

在main.js里面先简单写个log输出代码,只测试打包。



2.创建dist目录

dist用来放打包后的文件,即出口文件。


3.创建 index.html文件

此外,一个前端项目必须有一个index.html文件在根目录下,在这个里面导入打包后的文件来运行起项目。由于HTML文件里面使用模块化浏览器无法识别,所以就有开发版和生产版的区分。


4.创建 webpack.config.js文件(打包配置文件)

规定webpack打包的入口和出口:

里面写打包的入口和出口,注意出口必须是绝对路径, 入口就是main.js

入口entry: ./src/mainjs

出口output:看下文


出口 必须是绝对路径,需要npm安装path包来解决

先初始化包:npm init 一路回车即可 生成package.json文件

再安装 :npm i path

然后在webpack.config.js中引入path包

路径写法是:

path: path.resolve(__dirname,"dist")

filename: 就是最终打包的文件名:这里命名为pack.js

这样路径就OK了


webpack.config.js代码:




以上完成webpack项目的基本文件构成:



来小总结一下:


dist:用来存放打包后的文件

public:用来存放静态资源文件

src:用来存放项目业务代码(我们写代码的地方)

index.html:一个项目必须有一个html入口文件

package.json:通过npm init生成的,npm包管理的文件

webpack.config.js:webpack的配置文件(设置打包的规则)


好,完成上面的之后,在项目根目录打开cmd黑框, 输入webpack 回车

就会打包完成,显示如下:



然后dist目录就会生成一个名为pack.js的文件,这个就是打包后的文件。



然后双击index.html发现什么也没有,这是因为我们需要将打包后的文件引入index.html才能生效。



然后再双击index.html就会看到mainjs里的输出。




到此,一个简单的webpack打包就完成了,只是没有其他代码,只有一句log输出。


自定义webpack的打包命令


在文件package.json中的scripts中配置(因为有时候命令会很长输入不便,这个类似起了个简便的别名):



然后就打包就直接 npm run build 回车




打包css样式文件:


以上我们只是打包js文件,一个项目里面一定是有css,静态资源文件等,下面看下css文件的打包。


首先,在项目里面新建一个css文件,然后要在入口文件中引入,打包才能打包进去。



执行打包,发现报错,需要css loader:



那就安装css loader: cnpm install --save-dev [email protected]



然后在配置文件中配置:



然后再打包可以了,但是样式发现还是没有显示出来。因为这个loader只负责加载,不负责解析,所以还要安装一个loader:style的loader,这个就是负责将css添加到DOM中解析应用。



安装: npm install -save -dev [email protected]



加入配置(注意这里的配置顺序必须是style在前面,css在后面):



然后再打包,这时就Ok了,样式看见引进去了也生效了。




打包 less文件:


新建一个less文件,并在入口文件main.js中导入:




安装less loader:

cnpm install [email protected] [email protected] --save-dev



配置:



再打包检验,发现less样式已经有了:




ES6转ES5:


安装:

cnpm install babel-loader@8 babel-core babel-preset-es2015



配置(rules数组下):



打包测试成功,es6的东西就会转成es5的。



配置语法检查eslint


安装eslint和eslintloader


然后在config.js配置,在官网复制配置代码对象


然后还要在package.json中配置检查规则



打包 css图片资源:


在css中有一个背景图片




安装 url-loader



配置,官网复制,然后更改options


limit:"8192",大于8KB就不转base64

publicpath:"../dist/image",打包后的访问路径

outputpath:"images",输入路径

name:"[hash:5].[ext]"打包后的名称取五位,ext是保留图片后缀



打包测试,图片正常显示:




打包HTML文件


前提,HTML里面不引入任意的JS,之前我们是手动把打包的js引入index.html的。打包后自动引入需要的JS,因为webpack无法打包HTML文件,需要借助插件,这个插件要求HTML文件里面不能引入任何的css和JS。所以首先清除html里引入的东西:



安装 HTML-webpack-plugin插件



然后配置,官网复制,然后改一下,意思是把自己的index.html移到dist下,并且自动引入打包后的JS文件



执行打包命令后会在dist下生成一个index.html文件,此文件里面会自动引入打包的js。




点击这个index.html, 运行 正常,写的内容-样式-js都打进去了:




打包HTML中的图片:


在首页写一个img图片



安装HTMLloader cnpm install --save-dev html-loader



配置



打包测试,运行正常,图片正常展示:





开启自动打包编译并自动刷新浏览器 (我们写的代码需要各种的编译打包才能查看,而这个插件就是帮我们完成这一步,并把编译后的东西直接开了一个本地服务器上浏览,就相当于模拟项目上线的效果)


安装webpack-dev-serve

cnpm install webpack-dev-server@2 --save



配置自动化编译,在configJS和package.json中都配置,看官网

在webpack.config.js中加入:



在package.json中加入:




输入你配置的启动命令(一般都用start),打开浏览器查看你的项目


输入 npm start ,自动打开浏览器运行了



到这,其实已经实现我们改代码,保存然后就会自动打包并放在本地服务器上预览效果。


也就是说我们ctrl+s后会发生下面几件事:

1-webpack帮我们把所有的代码进行编译处理

2-打包为html,css,js文件

3-把打包好的文件放在本地localhost:8080这个服务器上



热摸替换(局部刷新)


因为devserve只要修改东西会刷新整个页面,这样不好,我们希望改哪刷新哪,所以出现热摸替换


只需要在devserve配置中加入 hot:true 即可



但是发现HTML不更新,所以还要改一下入口处,入口变为数组,把index.html也放在入口里面就行了



最终,我们的文件应该是这样(是不是就类似vue脚手架了):



运行效果:




webpack3的大概流程就是这样(这玩意坑真多),简单的模仿了下脚手架,当然,vue-cli里面有更多的配置,所以还得继续卷啊...