浅谈webpack3.0+

Posted jianxian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浅谈webpack3.0+相关的知识,希望对你有一定的参考价值。

(1)webpack作用

  技术图片

 

 

  1、前端为什么需要webpack?

现在的前端网页功能丰富,特别是SPA(single page web application 单页应用)技术流行后,javascript的复杂度增加和需要一大堆依赖包,
还需要解决SCSS,Less……新增样式的扩展写法的编译工作。所以现代化的前端已经完全依赖于WebPack的辅助了。

   2、什么是webpack?

 

 

    技术图片

 

  简单理解就是打包用的,结合图进行理解

1、将.js(脚本文件)、.jade(源于Node.js 的html高性能模板引擎)、.coffee(js的简化版本语法,经过编译最终编译为js)等打包为js
2、将模块打包为静态文件
3、对于SPA应用打包,webpack3.0进行了一些优化 拓展:
1、因为webpack实际上只能处理JS文件,如果需要使用一些非JS文件(比如Coffee Script),就需要将它转换成JS再require进来。 2、webpack处理的主要对象是JS文件,而我们知道JS文件是可以做很多事情的,比如编译Less/SASS/CoffeeScript,比如在页面中插入一段HTML,比如修改替换文本文件等等。

  3、安装webpack

  首先我们创建一个目录,初始化 npm,然后 在本地安装 webpack

  技术图片

  接下来进行npm初始化,然后进行安装

  全局安装webpack模块

注意版本:
    目前webpack版本已经更新到了4.0+,要安装最新版本或特定版本,请运行以下命令之一
    最新版:npm install --save-dev webpack(如果你使用 webpack 4+ 版本,你还需要安装 CLI,即npm install --save-dev webpack-cli)
    特定版:npm install --save-dev webpack@<version>

  另外,安装分为全局安装(npm i webpack --global)和本地安装(npm i webpack --save-dev),建议如下

  技术图片

 

   全局安装如下:

  技术图片

  所以接下来我们进行本地安装,然后安装特定版本3.6.0

 技术图片

  如果进行全局安装,有时安装完毕后,官方会有提示

官方不推荐全局安装webpack,因为全局安装的话,webpack会锁定到指定版本,例如下载版本为3.6.0,则会一直锁定到3.6.0.并且在使用webpack过程里,可能会导致构建失败。
例如,我们在电脑上全局安装了3+版本,但是新项目是用4+进行构建的,如果全局安装了3+,本地安装了4+,但是在构建项目时默认会走全局的webpack版本,可能导致构建项目失败。

  接下来结合上述所说,重新进行安装

  《1》创建项目目录,进行初始化

mkdir webpack-test
cs webpack-test
npm init --yes(因为本地安装webpack,需要一个package.json文件来存储依赖关系)

  技术图片

 

   《2》安装特定版本webpack

npm i webpack@3.6.0 --save-dev

  《3》安装完毕后检验版本及是否安装成功

webpack -v或者webpack --version

  注意:如果失败,看下node版本、网络原因、地域(某些地域被npm屏蔽,可以使用cnpm)、权限问题遇到时前面加上sudo即可等

 

  

 

(2)webpack上手demo

  构建项目结构,简单进行打包

  接着上面案例,进行介绍,这里我们安装完毕webpack3.6.0版本

  技术图片

 

   如果我们现在将项目拉去下来,但是webpack版本过低,需要升级,这时删除node_modules文件夹,然后直接在这里修改webpack,如下所示,修改为3.8.0,之后执行npm i安装依赖模块即可

  技术图片

 

   接下来建立项目基本结构

  1、src目录(也叫源代码文件夹),主要用于存放编写代码

  2、dist目录(主要用于生产环境)

  3、简单理解,src为开发环境,dist为生产环境

  4、新建dist/index.html文件,因为前期文件过少,不适于打包,所以这里先放到dist目录下

    技术图片

 

   5、新建入口文件src/entery.js,并编写简单代码

    技术图片

 

   6、开始进行打包

    技术图片

 

     Hash为打包号、Version为webpack版本、Time耗时、文件大小等... ...

  7、观看打包结果

    这里需要安装live-server,详见web服务器live-server(热更新)的安装及使用.然后执行live-server,默认浏览器会打开预览

    技术图片

 

     技术图片

 

     技术图片

 

 

 

(3)配置:入口和出口文件

  技术图片

 

   1、配置文件webpack.config.js基本结构

    首先需要暴露接口,如下所示

    技术图片

 

     配置基本结构:入口和出口

    技术图片

 

     接下来编写模块module,主要负责解读模块打包、图片压缩等相关配置等。还有plugins插件数组、webpack开发服务devServer等,如下所示

    技术图片

 

     接下来主要介绍下入口entry和出口output配置

    技术图片

    注意:path.join和path.resolve区别

join是把各个path片段连接在一起, resolve把‘/’当成根目录
  path.join(/a, /b) // Outputs ‘/a/b‘
  path.resolve(/a, /b) // Outputs ‘/b‘

    下面进行打包,如下所示,此时直接运行webpack即可,不用再和之前一样手动配置入口和出口文件

    技术图片

    接下来开始运行下

    技术图片

  2、接下来做个多入口和多出口的功能,添加入口文件entry2.js

    技术图片

 

     接下来配置多入口

    技术图片

 

     然后配置多出口,如下所示。其中[name]表示,出口文件名字与入口文件名相同

    技术图片

    接下来打开终端,进行打包

    技术图片

 

     技术图片

 

     此时bundle.js便无用论,所以修改下html文件的引用

    技术图片

 

     然后运行live-server服务,在浏览器进行预览

    技术图片

 

 

 

 

.

npm install --global webpack

以上是关于浅谈webpack3.0+的主要内容,如果未能解决你的问题,请参考以下文章

webpack3.0+总结

初步认识webpack3.0

webpack-dev-server配置指南(使用webpack3.0)

四大维度解锁Webpack3.0工具全技能

浅谈Mybatis

四大维度解锁Webpack3.0工具全技能视频 Webpack教程