webpack简介与常用配置之插件

AlienZHOU 发布于2019-08-23 17:11 / 887人阅读

摘要：安装插件能帮忙每次打包之前先删除文件夹。安装插件提供了一种自定义编译期间如何报告进度的方法。插件能创建环境变量开发与生产时的不同配置时使用选项设置不同的配置文件开发生产能够为我们提供一个简单的并且具有实时重新加载功能。

写在前面，近期有想法整理一下前端工程化相关的知识，就先从打包工具开始吧；今天带来的是webpack相关的一些常用插件配置，后期有时间话，也会出一些比较轻量级的打包工具的配置 gulp, rullup...相对于webpack学习成本更低一些

介绍 webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle 概念

入口

输出

loader

插件

模式

配置文件

项目根目录下创建 webpack.config.js

运行启动

./node_modules/.bin/webpack

npx webpack

配置 npm 脚本

1.CopyWebpackPlugin (插件)

CopyWebpackPlugin 能够实现将某些文件或文件夹进行拷贝

安装

npm install --save-dev copy-webpack-plugin
webpack.config.js
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyPlugin([
      { from: "source", to: "dist" },
    ]),
  ],
};

2.HtmlWebpackPlugin (插件)

HtmlWebpackPlugin 简化了html的创建，以便为你的webpack包提供服务。

安装

npm install --save-dev html-webpack-plugin
webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  plugins: [
    new HtmlWebpackPlugin()
  ],
};

3.CleanWebpackPlugin (插件)

CleanWebpackPlugin 能帮忙每次打包之前先删除dist文件夹。

安装

npm install --save-dev clean-webpack-plugin
webpack.config.js
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  plugins: [
    new CleanWebpackPlugin()
  ]
}

4.ProgressPlugin (插件)

ProgressPlugin 提供了一种自定义编译期间如何报告进度的方法。

webpack.config.js
const { ProgressPlugin } = require("webpack");

module.exports = {
  plugins: [
    new ProgressPlugin()
  ]
}

5.DefinePlugin (插件)

DefinePlugin 能创建环境变量

webpack.config.js
const { DefinePlugin } = require("webpack");

module.exports = {
  plugins: [
    new DefinePlugin()
  ]
}

6.开发与生产时的不同配置

cli 时使用 --config 选项设置不同的配置文件
// 开发

npx webpack --config webpack.config.js

// 生产

npx webpack --config webpack.config.prod.js

"scripts": {
  "dev": "webpack --config webpack.config.js",
  "build": "webpack --config webpac.config.prod.js"
},

7.webpack-dev-server

webpack-dev-server 能够为我们提供一个简单的 web server, 并且具有live reloading(实时重新加载) 功能。

安装
npm install --save-dev webpack-dev-server
使用
开发时，将 webpack 命令修改为 webpack-dev-server 命令。

8.webpack-merge 模块

通过 webpack-merge 可以抽取出开发与生产环境的相同的webapck配置。

安装
npm install --save-dev webpack-merge
写一个 webpack.config.base.js 并在这个文件中写入基本的webpack配置

在 webpack.config.dev.js 与 webpack.config.prod.js 中引入 webpack.config.base.js 然后使用 webpack-merge 进行重写或合并的操作。

9.别名的配置

疼点：
src 下面目录结构庞大且复杂的时候，可能引入模块会出现 ../../../../../../ 这种形式
那一天对文件路径调整了一下。import 的路径也得跟着修改一下。
定义别名规则

module.exports = {
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src")
    }
  }
}

最后，完整配置如下

webpack.config.base.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")
const CopyWebpackPlugin = require("copy-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const { ProgressPlugin } = require("webpack");

module.exports = {
  // 1. 入口
  entry: "./src/index.js",
  // 2. 出口
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js"
  },
  // 3. loader 规则
  module: {
    rules: [
      { test: /.js$/, use: "babel-loader" }
    ]
  },
  // 4. 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./public/index.html")
    }),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, "./public"),
        to: path.resolve(__dirname, "./dist")
      },
    ]),
    new CleanWebpackPlugin(),
    new ProgressPlugin(),
  ]
}

webpack.config.dev.js

   const merge = require("webpack-merge");
    const { DefinePlugin } = require("webpack");
    const baseConfig = require("./webpack.config.base");
    
    module.exports = merge(baseConfig, {
      plugins: [
        new DefinePlugin({
          "process.env": {
            "NODE_ENV": ""development""
          }
        })
      ],

  mode: "development",
  devServer: {
    contentBase: "/dist",
  }
})

webpack.config.prod.js

  const merge = require("webpack-merge");
const { DefinePlugin } = require("webpack");
const baseConfig = require("./webpack.config.base");

module.exports = merge(baseConfig, {
  plugins: [
    new DefinePlugin({
      "process.env": {
        "NODE_ENV": ""production""
      }
    })
  ],
  mode: "production"
})

package.josn script设置

 "scripts": {
    "serve": "webpack-dev-server --open --config webpack.config.dev.js",
    "build": "webpack --config webpack.config.prod.js"
  },

开发运行 npm run sreve

构建上线运行 npm run build

私有云 GPU服务器 webpack常用配置项一之新功能简介 webpack cdn配置 webpack配置cdn

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

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

webpack4配置之分享几个常用插件

摘要：去做想做的事，去爱值得的人去成为自己喜欢的模样，去让自己发光浑身充满力量，充实的日子最美好各位早安，这里是平头哥联盟，我是首席填坑官苏南，用心分享一起成长做有温度的攻城狮。 showImg(https://segmentfault.com/img/bVbjIcs?w=1008&h=298); 前言　　继上一次webpack的基础配置分享之后，本次将分享一些工作中项目常用的配置插件、也...

Jackwoo 2019-08-26 13:24 评论0 收藏0
前端开发之走进Vue.js

摘要：作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。的新版本，的简称。的包管理工具，用于同一管理我们前端项目中需要用到的包插件工具命令等，便于开发和维护。 Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通...

zxhaaa 2019-08-20 15:20 评论0 收藏0
可视化爬虫配置chrome插件开发之搭建vue开发环境

摘要：使用开发插件的好处本次开发的插件是抓取配置插件，有很多的表单以及弹出层，如果纯使用的话会有很多动态创建的操作。使用和的语法以及的加载器相配合，可以减少大量动态创建的代码。使用vue开发chrome插件的好处本次开发的插件是抓取配置插件，有很多的form表单以及弹出层，如果纯使用js的话会有很多动态创建dom的操作。使用vue和ES6的import语法以及webpack的html加载...

impig33 2019-08-16 13:25 评论0 收藏0
webpack系列之plugin及简单的使用

摘要：系列之及简单的使用一有什么用是核心功能，通过插件可以实现所不能完成的复杂功能，使用丰富的自定义，可以控制编译流程的每个环节，实现对的自定义功能扩展。三使用在配置文件中，向属性传入实例即可。 webpack系列之plugin及简单的使用一.plugin有什么用 plugin是webpack核心功能，通过plugin（插件）webpack可以实现loader所不能完成的复杂功能，使用p...

TesterHome 2019-08-22 16:39 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

jsbintask 2019-08-21 12:05 评论0 收藏0