Webpack,小白入门,包教不包会。

本篇写于2019.10.21,当前webpack的版本为4.X.X。目的是在于能够将小白入门,并且自己会搭建webpack的相关插件以及一些其他的loader之类的。好了,话不多说,我们开始写吧!

什么是Webpack,以及我们为什么要用他。

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法

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

WebPack和Grunt以及Gulp相比有什么特性

借用两张图表示的话就是。
gulp:

  • gulp是在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务

webpack:

  • webpack是把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。

开始使用webpack

// 先全局安装webpack
npm install -g webpack

现在,我们新建一个文件夹

// 使用npm init
npm init
// init是创建package.json用的,创建的时候叫你填写一些信息,
// 不用管它,对于现在的我们来说先不用了解,然后我们一路回车。

// 安装局部webpack
npm install --save-dev webpack

我们现在在package.json文件所在的文件夹里面创建两个文件夹apppublic.
此时,我们的项目结构如下图所示。

现在叫我们在app文件夹里面创建main.js
public文件里面创建index.html

现在,我们的项目目录结构是这样的:

我们现在要学会第一次打包,先配置webpack配置文件。
在当前目录下,新建一个webpack.config.js的配置文件
文件里面内容为

// webpack.config.js
module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

现在将index.html文件里面写上一些基础的元素




  
  
  
  Document


  

看到index.html上有一个id为root的dom元素,还有一个script标签,里面指向内容为bundle.js
现在还不理解上面的东西,没关系。接着往下看。
先在app/main.js 里面写上一段代码

document.getElementById('root').innerText = 'webpack好好玩,我好喜欢玩这个啊!'

package.json里面写上

{
  "name": "sfwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"  // 修改这里,json文件不支持注释,复制完成请删除
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  }
}
npm的 start命令是一个特殊的脚本名称,其特殊性表现在,在命令行中使用npm start就可以执行其对于的命令,如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用 npm run {script name}npm run build,我们在命令行中输入 npm start试试,


可以看到,我们已经打包成功了!将main.js变为了bundle.js并且将他输出到了public的文件夹下。
到此为止,我们已经知道了在刚才的index.html文件里面bundle.js和id为root的dom元素是干什么了吧?
我们现在打开public文件夹下的index.html文件,能够看到页面上显示的是webpack好好玩,我好喜欢玩这个啊!
现在,先别急着往下走。我们先来看看控制台的提示

它对我们警告,需要配置mode,这里先不用管它,我们后面会讲这一点,这也是webpack4新加的一个功能。

你现在已经成功的打包了一个webpack文件,这会是一个良好的开始!!!

现在,我们还必须手动刷新网页,每次更改后都会按下F5,使得调试极其不容易,所以我们现在想要代码一更新就会自动加载。

// 安装webpack-dev-server
npm install --save-dev webpack-dev-server

这个webpack-dev-server是基于node.js构建的一个本地服务器,简单来说就是能够让你不刷新的情况下,看到更改后的内容
devserver作为webpack配置选项中的一项,以下是它的一些配置选项,更多配置请参考官网,这里给出一些配置信息

devserver的配置选项 功能描述
contentBase 默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到“public"目录)
port 设置默认监听端口,如果省略,默认为”8080“
inline 设置为true,当源文件改变时会自动刷新页面

把下面的命令假如到webpack.config.js文件里面

module.exports = {
    entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
      path: __dirname + "/public",//打包后的文件存放的地方
      filename: "bundle.js"//打包后输出文件的文件名
    },
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
      },
  }

将下面的命令加入到package.json文件中

"server":  "webpack-dev-server --open"

我们运行 npm run server就可以看到,浏览器自动打开一个页面,我们修改main.js里的文件内容

// main.js
document.getElementById('root').innerText = '我好喜欢玩这个啊!'

能够看到浏览器自动刷新,不需要我们手动修改它了。

Loaders

loaders是webpack的核心功能了,它的主要作用是将ES6转换为浏览器识别的ES5或者说将LESS/SCSS编译为CSS等等。好了,我们看看如何使用loaders了。

  • test:一个用以匹配loaders所处理文件的拓展名的正则表达式(必须)
  • loader:loader的名称(必须)
  • include/exclude : 手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
// 安装vue
npm install vue

未完待续。。。。

你可能感兴趣的