学点Webpack吧

邱勇发布于2019-08-20 18:53 / 1840人阅读

摘要：下的包含很多匹配规则正则表达式，每一条代表加载什么类型的资源文件，上面写的就是加载样式文件，并使用和加载。现在问题来了，我想喝瓶茅台自动添加浏览器产商前缀。没问题，强大的生态圈给你提供了，一个更高大上的。

开始 webpack 之旅

npm install webpack --save-dev

这里如果没有指定 -g全局安装，那么需要调用 node_modules 下的 webpack.js 来执行，因为非全局安装没有添加环境变量

尝尝鲜，做点 webpack

必须的第一步：编写 webpack.config.js

// webpack.config.js
module.exports = {
  // 两个必须参数：
  entry: "", // 入口文件，写路径即可
  output: {  // 打包后文件，有两个参数：
    filename: "",   // 文件名，"[name]"表示使用原名，"[hash]"使用哈希值
    path: "",       // 文件夹路径，对着官方敲,path.resolve(__dirname, "文件夹名"),需先导入
    publicPath: "", // 上线地址，例如 http://ningtaostudy.cn
  },
};

现在碗和米饭有了，怎么端起来吃呢

直接在命令行运行 webpack，再加点料：

webpack 
    --display-reasons 
    --progress 
    --colors 
    --display-modules 
    --config # webpack 配置文件名（换个碗吃饭）

在 npm 脚本里写指令（偷懒让别人帮你盛饭），接着命令行里运行 npm run webpack：

{
    "scripts": {
        "webpack": "webapck --progress --colors"
    }
}

饭吃到了，没有菜（webpack 插件）怎么行呢

打包 html 的插件 html-webpack-plugin。惯例第一步 npm install，接着在 webpack.config.js 里配置插件，有了 entry 和 output 出头鸟，我们知道该写一个 plugin 了：

// webpack.config.js
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  plugins: [
    new htmlWebpackPlugin({
      filename: "[name]-[hash].html",
      template: "index.html",
      inject: "head",
      kill: "bill",
    }),
  ],
};

让我们来品品小当家的菜：

filename 很好，不就入口文件吗

template 你不用说，我知道是模板，相对于配置文件的路径

inject 我就不遵从开发最佳实践，就要在head里加载js文件，打我呀

kill 杀死比尔，纯属虚构。这是自定义的模板，模板里调用，下面举个栗子：



<%= htmlWebpackPlugin.options.kill %><title>

<!-- 转化后 -->
<title>bill

上面代码一样一样的。老夫斗胆说一句，这里模板引擎类似 jsp，但还是 js 语法

去官网看看小当家

来瓶酒（loaders）吧，生活美滋滋

loader 用来加载资源文件，诸如图片、css之类的，这样我们就可以在 .js 里导入 css，你没听错，用起来我也没有在蒙你

最简单常用来加载 css 的两个 loader:

npm install style-loader css-loader --save-dev
# style-loader 用来插入 style 标签
# css-loader 用来加载 css 代码，此 loader 居下

话不多说，开车：

// webpack.config.js
module.exports = {
  modules: {
    rules: [
      {
        test: /.css$/,
        use: [
          "style-loader",
          "css-loader",
        ],
      },
    ],
  },
};

看起来嵌套挺多的哈，不过很简单。modules 下的 rules 包含很多匹配规则（正则表达式），每一条代表加载什么类型的资源文件，上面写的就是加载 .css 样式文件，并使用 style-loader 和 css-loader 加载。

现在问题来了，我想喝瓶茅台（自动添加浏览器产商前缀）。没问题，强大的 webpack 生态圈给你提供了 postcss-loader，一个更高大上的 loader。这个时候我们都知道只需要改一下 use 数组：

[
  "style-loader",
  {
    loader: "css-loader",
    options: {
      importLoaders: 1
    },
  },
  "postcss-loader"
]

数组的项可以是对象，这样我们的 loader 就能带 options 里的参数，等同于：

use: "style-loader!css-loader?importLoaders=1!postcss-loader"

至于为什么要带这样的参数，这是因为一个 @import 引发的血案

webpack-dev-server 大厨来也

我是谁，我从哪里来，我又该到哪里去

日益繁重的前端工作下，没有人能阻挡我们偷懒的步伐。。webpack 只是一个打包工具，即使我们能带 --watch 自动编译，但浏览器还得手动刷新（心中一个卧槽，尼玛还有这种操作，曾经学习的一年里自己起码动手刷新浏览器点了 10000 次，忍不住吐槽浏览器刷新按钮就不能做一个浮动的吗，还得移动大半个屏幕，我鼠标少说走了 1000m 了）。很好，在灵长类动物面前都不是问题：

npm install webpack-dev-server -D # 这个不是重点，缩写而已

接下来配置 webpack，其实官网很详细了，还带中文的，比个赞

// webpack.config.js
module.exports = {
  devServer: {
    contentBase: "./dist", // 根目录，就像 apache 的 www 文件夹
  },
};

然后呢卧槽？没错，好了，输入吧肿瘤君：

webpack-dev-server --open

偷懒神（package.json）在此：

{
    "scripts": {
        "start": "webpack-dev-server --open --color"
    }
}

再运行 npm start，这次连 run 都省了，，，

好了，以上就是初步了解 webpack 了，再总结一下吧

配置项一览：

// webpack.config.js
module.exports = {
  entry: "",
  output: {},
  module: {
    rules: [],
  },
  plugins: [],
  devServer: {},
  devtool: "inline-source-map", // 开发环境下调试专用，快速定位错误文件位置
};

常用 loader：

加载 html：html-webpack-plugin、html-loader

加载 css：style-loader、css-loader、sass/less-loader

加载 es6：babel-loader

加载图片、json 等文件：file-loader、url-loader（转base64）、image-loader（压缩）、json-loader

上面的这些 loader 都可以去 npmjs 官网上查看详细的配置

-loader 在 webpack 2+ 不能省略；html 插件和 loader（加载模板）不能混着用

GPU云服务器云服务器学点 javascript教学点每周学点大数据 webpack

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84840.html

趁着课余时间学点Python（十四）文件操作

摘要：我是布小禅，一枚自学萌新，跟着我每天进步一点点吧说了这么多暂时也就够了，那么就告辞吧文章目录 ☀️ 前言 ☀️? 作者简介 ??文件操作?1️⃣、open函数...

abson 2021-09-07 09:59 评论0 收藏0
【正经的AI on Python入门系列】0.来学点Python吧！从一个斗图小工具开始

摘要：因此，本文将会以一些正经的严谨的有深度的大概吧的课题，慢慢的接触人工智能的相关知识。 Before The Beginning 近年，技术圈炒的最火的两个话(ba)题(gua)不外乎就是人工智障智能以及炒币区块链了，这个系列文章我主要以一个小菜鸟的角度一步一步的对人工智能的相关知识做一点了解，也算是一个颤颤巍巍追着AI浪潮公交车的社会主义五好青年，咳咳，扯远了...其实对于人工...

赵连江 2019-07-30 17:14 评论0 收藏0
前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
写给在迷茫中前行的前端学习/工作者

摘要：我从今年的月份开始在知乎上连续回答前端开发相关的问题，至今已有将近三个月，回顾写过的一百多条回答，不少是给迷茫的前端工作者的建议。今天我把我的思考提炼整理成文，希望能给予在迷茫中前行中的前端学习工作者一些有用的建议。本文首发于知乎专栏——前端指南作者：Mark MFS老师转载请注明来源。我从今年的2月份开始在知乎上连续回答前端开发相关的问题，至今已有将近三个月，回顾写过的一百多条回...

罗志环 2019-08-20 16:03 评论0 收藏0
为vue3学点typescript, 解读高级类型

摘要：直达第一课体验第二课基础类型和入门高级类型第三课泛型第四课解读高级类型第五课什么是命名空间回顾第二课的时候为了更好的讲解基础类型所以我们讲解了一部分高级类型比如接口联合类型交叉类型本节课我会把剩余高级类型都讲完知识点摘要本节课主要关键词为自直达第一课, 体验typescript 第二课, 基础类型和入门高级类型第三课, 泛型第四课, 解读高级类型第五课, 什么是命名空间(na...

chuyao 2019-08-26 10:28 评论0 收藏0