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

时间 2019-11-09

标签 webpack 入门包教繁體版

原文原文链接

本篇写于2019.10.21，当前webpack的版本为4.X.X。目的是在于可以将小白入门，而且本身会搭建webpack的相关插件以及一些其余的loader之类的。好了，话很少说，咱们开始写吧！

什么是Webpack，以及咱们为何要用他。

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

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

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

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

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

webpack：
前端

webpack是把你的项目当作一个总体，经过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的全部依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

开始使用webpack

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

如今，咱们新建一个文件夹vue

// 使用npm init
npm init
// init是建立package.json用的，建立的时候叫你填写一些信息，
// 不用管它，对于如今的咱们来讲先不用了解，而后咱们一路回车。

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

咱们如今在package.json文件所在的文件夹里面建立两个文件夹app和public.
此时，咱们的项目结构以下图所示。
node

如今叫咱们在app文件夹里面建立main.js
在public文件里面建立index.htmlwebpack

如今，咱们的项目目录结构是这样的：

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

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

如今将index.html文件里面写上一些基础的元素正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
  <script>
  </script>
</body>
</html>

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

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

在package.json里面写上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

未完待续。。。。