初识Webpack

146 阅读2分钟

1、什么是Weboack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言,比如Scss,并将其打包为合适的格式以供浏览器使用。

2、为什要使用WebPack

当今的网页都有复杂的JavaScript代码和一大堆的依赖包。我们为了简化开发的困难程度前端社区涌现出了很多好的实践方法

  • 模块化,让我们可以把复杂的程序细化为小的文件;
  • 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能能装换为JavaScript文件使浏览器可以识别;
  • scss,less等CSS预处理器

这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的,这就为WebPack类的工具的出现提供了需求。

3、webpack 安装

在开始之前,请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本,是理想的起步。使用旧版本,你可能遇到各种问题,因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。

  1. 安装Node.js安装完成后通过node -v来检查是否安装成功

  2. 安装npm 安装完成后通过npm -v来检查是否安装成功

  3. 安装Webpack

    1)全局安装:npm install webpack -g

    2)局部安装:进入那个项目 npm install webpack --save-dev

    3)指定版本安装:npm install webpack@2.2.x --save-dev

4、Webpack的配置

contentBase 默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到“public"目录)

port 设置默认监听端口,如果省略,默认为”8080“

inline 设置为true,当源文件改变时会自动刷新页面

historyApiFallback 在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html