webpack3从零开始配置过程

PingCAP 发布于2019-08-22 18:25 / 3394人阅读

摘要：配置过程基本的入口出口配置入口输出目录这里使用方法是为了消除跨平台的差异因为和的绝对路径表示方式不一样添加基本的加载器导入中加入对象使用的目标文件。

webpack配置过程 基本的入口出口配置

const webpack = require("webpack");
const path = require("path");
module.exports = {
  entry: {
    main: "./src/main.js",  // 入口
  },
  output: {
    path: path.resolve(__dirname, "dist"),    // 输出目录 这里使用path.resolve方法是为了消除跨平台的差异因为mac和window的绝对路径表示方式不一样
    filename: "bundle.js",
  }
}

添加基本的加载器

导入extract-text-webpack-plugin

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const lessExtract = new ExtractTextPlugin("less.css");

module.exports中加入module对象

  module: {
    rules: [
      {
        test: /.(js)$/, // 使用loader的目标文件。这里是.js
        loader: "babel-loader",
        exclude: [
          path.join(__dirname, "../node_modules"),  // 由于node_modules都是编译过的文件，这里我们不让babel去处理其下面的js文件
        ],
      },
      {
        test: /.(c)ss$/,
        use: [
          "style-loader", // style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中
          "css-loader", // css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们
          "postcss-loader",
        ],
      },
      {
        test: /.less$/,
        loader: lessExtract.extract({
          use: ["css-loader?minimize", "less-loader"],
        }),
      },
    ],
  },
  plugins: [
    lessExtract,
  ],

这个时候就可以看出打包速度异常之慢，同时无法加载antd样式

配置.babelrc
再plugins中添加解决无法加载antd样式问题

    [
        "import",
        {
          "libraryName": "antd",
          "style": true
        }
    ]

使用HappyPack来优化js得打包(happyPack原理)

导入happypack

const HappyPack = require("happypack");
const os = require("os");
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

plugins 中添加如下代码

    new HappyPack({
      id: "jsHappy",
      verbose: false, //关掉日志
      threadPool: happyThreadPool,
      loaders: [{
        path: "babel-loader",
        query: {
          cacheDirectory: "./node_modules/.webpack_cache",
        },
      }],
    }),

将module.rules 中js得规则改为

      {
        test: /.js?$/,
        exclude: /node_modules/,
        loader: "HappyPack/loader?id=jsHappy",
      },

再次编译发现编译时间减少了6s 也就是一倍左右

添加webpack.dll.config.js

很多时候我们并不是都需要每次重新打包所有文件我们只是需要打包我们的源代码
此时我们就需要这种方式去优化，配置过程很统一，参考以下链接

webpack.dll.config.js详解

事实上这种优化方式只是对生产模式有很大优化，如果是开发模式不如下文中添加--wathch参数的方式

添加electron配置：

由于是使用electron开发桌面应用，所以需要在moudle.export 对象内添加

  target: "electron-renderer",

添加这句话后我们的前端代码中也可以引用node和electron自带的一些node_modules
同时直接在浏览器中打开入口文件的话，将会报错啦

启动

在package.json 中添加这样一句话

"scripts": {
  "dev": "webpack --watch",
},

这个watch 参数表名了启动webpack监听，启动后每次修改文件采用增量打包的方式自动重新编译，速度很快

最后附上一篇吐槽webpack得链接

idc机房托管超融合服务器从零开始 linux从零开始 python从零开始从零开始php

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

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

从零开始的webpack生活-0x004：js压缩混淆

摘要：概述上一章讲了关于生成模板的，并且最后将压缩，这一章讲的是压缩混淆配置环境初始化项目新建修改配置安装依赖修改初始化添加插件最终配置文件打包配置匹配上的文件才压缩添加修改打包未被压缩压缩了取值正则匹配或者正则匹配数组需要压 0x001 概述上一章讲了关于生成模板html的，并且最后将html压缩，这一章讲的是js压缩混淆 0x002 配置环境初始化项目 $ npm init -y...

Riddler 2019-08-21 17:27 评论0 收藏0
从零开始最小实现 react 服务器渲染

摘要：从零开始最小实现服务器渲染前言最近在写的时候想到，如果我部分代码提供，部分代码支持，那我应该如何写呢不想拆成个服务的情况下而且最近写的项目里面也用过一些服务端渲染，如，自己也搭过的项目，确实开发体验都非常友好，但是友好归友好，具体又是如何实 showImg(https://segmentfault.com/img/bVMbjB?w=1794&h=648); 从零开始最小实现 react...

cheukyin 2019-08-22 14:02 评论0 收藏0
webpack4 的开发环境配置说明

摘要：的开发环境配置说明完整的的配置地址开发环境的搭建，总体而言就比较轻松，因为用户就是开发者们。的做法是在的字段配置类似这样这样配置后，当运行时，在里通过可以取到值以来做判断就可以啦。 webpack4 的开发环境配置说明完整的webpack4的配置clone地址： https://github.com/ziwei3749/... 开发环境的搭建，总体而言就比较轻松，因为用户就是开发者们...

fancyLuo 2019-08-23 10:34 评论0 收藏0
React入门：从零搭建一个React项目

摘要：一初始化项目新建文件夹，文件名文件夹名称不要用，这类关键字，后面使用插件时会发生错误。未设置会报一个警告。四在项目中使用安装。一、初始化项目新建文件夹，文件名firstreact 文件夹名称不要用react，node这类关键字，后面使用插件时会发生错误。 init项目环境，项目信息可默认或自行修改 mkdir firstreact cd firstreact npm ...

stackvoid 2019-08-23 15:20 评论0 收藏0
webpack3 升级 webpack4踩坑记录

摘要：本篇不包含所有坑，暂时只记录自己踩到的部分坑一安装安装最新版本安装新增依赖这个在中，本身和它的是在同一个包中，中将两个分开管理。我记录下自己更新这个的过程，以下前半部分可以直接跳过。以下记录踩坑过程。本篇不包含所有坑，暂时只记录自己踩到的部分坑一.安装安装webpack4最新版本 npm install --save-dev webpack@4 安装新增依赖 webpack-c...

马忠志 2019-08-02 15:38 评论0 收藏0