浅谈webpack构建工具配置和常用插件总结

webpack构建工具已经火了好几年,也是当下狠火狠方便的构建工具,我们没有理由不去学习。既然选择webpack就要跟着时代走,我们要追随大牛的步伐,大牛等等我。

一、webpack基础

  1. 在根目录使用npm init 命令创建package.json,创建过程中一路回车。
  2. 本地安装webpack命令:npm install webpack webpack-cli --save-dev 安装成功后写入package.js的devDependencies中,可以通过 npm node_modules/.bin/webpack -v 命令查看它的版本。
  3. 全局安装npm install -g webpack 不推荐全局安装 webpack。它会把你的项目锁定全局安装的版本,也可能导致不同的webpack版本中构建失败。

静态资源文件目录

  • ​ – src [ 项目源文件目录 ]
  • ​ – dist [ 打包文件目录 ]
  • ​ – webpack.config.js [ webpack配置文件 ]
  • ​ – package.json [ NPM包管理配置文件 ]
  • ​ – node_modules [ 项目中的依赖存放目录 ]

二、webpack.config.js

const webpack = require('webpack');
module.exports = {
 mote:"development",//指当前的环境
 /*
 development:开发环境
 production:生产环境
 none:不做任何处理
 */
 //入口文件,如果需求多个入口可改为对象
  entry: './src/index.js',
  /*
  hot配置是否启用模块的热替换功能,devServer的默认行为是在发现代码被改后通过自动刷新整个页面来做到事实预览,然后设置hot后,
  会在不刷新整个页面的情况下用新模块替换老模块来做到实时更新。
  如果选用hot:true方式来达到热更新的效果需要引用webpack.HotModuleReplacementPlugin插件配合达到你需要的效果,另外推荐一
  种简便的方式在package.json中scripts设置如下
  "scripts": {
   "start": "webpack-dev-server --hot --inline",
  },
  */
  // 服务器环境
  devServer: {
   hot: true, //建议使用第二种方案 启动服务使用命令 npm run start
   port:"8080",//端口默认8080,可以自行设置
   host:"192.168.xx.xx",
   /*
   host配置devServer服务监听的地址,也可以使用localhost进行访问 浏览器输入192.168.xx.xx/index.html
   简便方法在package.json中设置如下
   "scripts": {
   "start": "webpack-dev-server --hot --inline ",
   },
   */

  },
  //插件
  plugins: [
   //热加载插件
   new webpack.HotModuleReplacementPlugin(),
  ],
  //输出
  output: {
   //filename:输出的文件名,可以自定义一些规则
   filename: '[name].bundle.js',
   //path,配置输出文件存放在本地的目录
   path: path.resolve(__dirname, 'dist')
  }
 };

三、插件

1、HtmlWebpackPlugin

const HtmlWebpackPlugin = require('html-webpack-plugin')
 plugins: [
  new HtmlWebpackPlugin({ // 打包输出HTML
   title: 'Hello World',//文件的标题
   minify: { //minify 的作用是对 html 文件进行压缩
    removeComments: true, // 移除HTML中的注释
    collapseWhitespace: true, // 删除空白符与换行符
    minifyCSS: true, // //是否压缩html里的css 默认值false;
    caseSensitive: true, //是否对大小写敏感,默认false
    ollapseWhitespace: true, //是否去除空格,默认false
    minifyJS: true, //是否压缩html里的js
    removeAttributeQuotes: true, //是否移除属性的引号 默认false
    removeComments: true, //是否移除注释 默认false
    emoveCommentsFromCDATA: true, //从脚本和样式删除的注释 默认false
    emoveEmptyAttributes: true, //是否删除空属性,默认false
    removeRedundantAttributes: true, //删除多余的属性
    removeScriptTypeAttributes: true, //删除script的类型属性,在h5下面script的type默认值:text/javascript 默认值false
   },
   filename: 'index.html', //输出的html的文件名称
   template: 'index.html', //html模板在的文件路径
   hash: true,//hash作用是给生成的js文件一个独特的hash值,默认值为false 被构建过后的html引用js效果如下
   // <script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>
  }),
 ]

2、CleanWebpackPlugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
  //该插件主要用于自动删除webpack里dist目录中已不需要的文件
  new CleanWebpackPlugin()
]

官方介绍:

By default, this plugin will remove all files inside webpack's output.path directory, as well as all unused webpack assets after every successful rebuild

3、ExtractTextWebpackPlugin

先把我们需要的东西下载好

npm install webpack css-loader style-loader extract-text-webpack-plugin --save-dev

首先配置webpack,先不使用插件完成

module.exports = {
 module : {
    rules: [
      {
        test: /\.css$/,
        use:[
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }
}

配置好之后在js入口文件中引入样式文件,打包查看打包结果bundle.js,会发现css被打包到了js里面,以字符串的形式存在。如果index.html中已引入打包后的bundle.js,使用浏览器打开index.html文件会发现css以style的形式被插到了head当中。

2.使用插件

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 module : {
  rules: [
    {
      test: /\.css$/,
      use : ExtractTextPlugin.extract({
       fallback: "style-loader",
        use: "css-loader"
      })
    }
    /*
  use: 指需要什么样的loader去编译文件
  fallback: 编译后用什么loader来提取css文件
  */
   ]
 },
 plugins: [
   new ExtractTextPlugin("styles.css"),
   new HtmlWebpackPlugin({ // 关于HtmlWebpackPlugin上文有提到
      title: 'extract-text-webpack-plugin',
      filename: 'index.html',
      template: path.resolve(__dirname, 'index.html'),
      inject : 'head'
    })
 ]
}

以上内容配置好之后打包查看,可以发现css文件以link的方式被引在index.html的head中。期间配合HtmlWebpackPlugin插件自动插入index.html中

到此这篇关于浅谈webpack构建工具配置和常用插件总结的文章就介绍到这了,更多相关webpack构建工具配置和常用插件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解webpack模块化管理和打包工具

    本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的时候再异步加载.通过 loader  的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.

  • 详解使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等.对于一个需要长期维护和大型的项目而言,这些工具是必不可少的,但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因,一个简单的构建工具,通过几个默认的步骤帮助你快速的构建Vue.js项目. 1.安装node环境 可以

  • 详解webpack模块加载器兼打包工具

     什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到. 你可以不打算将其用在你的项目上,但没有理由不去掌握它,因为以近

  • 基于打包工具Webpack进行项目开发实例

    一. 常见打包工具的介绍 在打包工具中,常见的有RequireJS,browserify,webpack,其中RequireJS是一个JavaScript模块加载器,基予ADM(async module define)规范实现,browserify是一个以在浏览器中使用Node.js模块为出发点的工具,而webpack则是一个为前端模块打包构建而生的工具. 二. 工具的使用 (1)作为npm包的RequireJS提供了一个可执行的r.js工具,通过命令行执行,使用方式如下: npm instal

  • 新手快速上手webpack4打包工具的使用详解

    一直使用webpack,上次也分享过webpack配置es6~9的语法参考链接,但是对于一些小白童鞋来说,最基本的配置都不太知道,刚好利用春节休假期间对webpack4的知识点梳理一次.方便一些刚刚入行的人学习,也是对自己的一种总结与提高 一.几个盲点的解释 1.全局安装与局部安装 对于一般的新手都有一个疑惑我是全局安装还是本项目中安装(局部安装),个人建议,现在前端发展那么快,我们使用局部安装的方式更好(使用最新的技术栈). 我们知道javascript是弱语言,有局部变量和全局变量,其实全局

  • 使用vue-cli脚手架工具搭建vue-webpack项目

    最近更新了webpack配置详解,可移步vue-cli webpack详解 对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等.对于一个需要长期维护和大型的项目而言,这些工具是必不可少的,但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因,一个简单的构建工具,通过

  • 浅谈webpack构建工具配置和常用插件总结

    webpack构建工具已经火了好几年,也是当下狠火狠方便的构建工具,我们没有理由不去学习.既然选择webpack就要跟着时代走,我们要追随大牛的步伐,大牛等等我. 一.webpack基础 在根目录使用npm init 命令创建package.json,创建过程中一路回车. 本地安装webpack命令:npm install webpack webpack-cli --save-dev 安装成功后写入package.js的devDependencies中,可以通过 npm node_modules

  • 浅谈webpack 构建性能优化策略小结

    背景 如今前端工程化的概念早已经深入人心,选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配,而在诸多的构建工具中,webpack以其丰富的功能和灵活的配置而深受业内吹捧,逐步取代了grunt和gulp成为大多数前端工程实践中的首选,React,Vue,Angular等诸多知名项目也都相继选用其作为官方构建工具,极受业内追捧.但是,随者工程开发的复杂程度和代码规模不断地增加,webpack暴露出来的各种性能问题也愈发明显,极大的影响着开发过程中的体验. 问题归纳 历经了多个web项目

  • 浅谈webpack打包之后的文件过大的解决方法

    以前一直使用 create-react-app 这个脚手架进行 react 开发,后面因为一些自定义的配置,转而使用 webpack 搭建一套自己的脚手架.但是在使用 webpack 打包之后发现,纳尼?怎么文件这么大??? 于是研究了一下如何处理 webpack 打包之后文件太大的情况,简单记录下来. 首先配置全局变量 首先,通过指定环境,告诉 webpack 我们当前处于 production 环境中,要按照 production 的方式去打包. //指定环境,将process.env.NO

  • 浅谈webpack打包过程中因为图片的路径导致的问题

    最近在制作一个自己的个人博客的时候遇到这么一个问题, 在CSS中使用了相对路径来充当背景图片, 如下所示: 然后将整个工程使用webpack打包之后, 在浏览器上运行却报错了, 报错如下: 也就是说, 打包之后这个图片文件找不到了, 那么原因出在哪里呢? 先来看一下我在webpack.config.js文件中的配置: 在这里其实我的loader并没有使用错误的, 图片对应的就是使用url-loader来处理. 那么再来看一下通过webpack打包之后的目录: 发现dist文件夹中出现了我们想要打

  • 浅谈JVM垃圾回收有哪些常用算法

    一.前言: 垃圾回收: 在未来的JDK中可能G1会为ZGC所取代 先问自己几个问题: 什么是垃圾? 垃圾就是堆内存中(范指)没有任何指针指向的对象实体.不具有可达性. 为什么要回收垃圾? 因为我们的内存是有限的,内存长时间不清理就会导致内存溢出,OOM: 只要是程序正在跑,那么就不断生成新的对象,我们需要GC开辟新的空间分配给新的对象. 我们怎么回收垃圾? 依靠Java的自动内存回收机制,机制的优劣由算法决定: 或者说是机制的适配度由算法和应用场景共同决定. 什么时候回收垃圾? 当堆中的实体对象

  • 浅谈c++性能测试工具google benchmark

    一.测试对象 这次测试的对象是标准库的vector,我们将会在vs2019 16.10和Linux + GCC 11.1上进行测试.为了代码写着方便,我还会启用c++17支持. 这次的疑问来自于<A Tour of C++>这本书,最近在重新翻阅本书的时候发现书里第九章给出了一个很有意思的建议:尽量少用reserve方法. 我们都知道reserve会提前分配足够大的内存来容纳元素,这样在push_back时可以减少内存分配和元素移动的次数,从而提高性能.所以习惯上如果我们知道vector中存储

  • 浅谈头文件algorithm中的常用函数

    一.非修改性序列操作(12个) 循环         对序列中的每个元素执行某操作         for_each() 查找         在序列中找出某个值的第一次出现的位置         find() 在序列中找出符合某谓词的第一个元素     find_if() 在序列中找出一子序列的最后一次出现的位置         find_end() 在序列中找出第一次出现指定值集中之值的位置     find_first_of() 在序列中找出相邻的一对值         adjacent_

  • 浅谈webpack下的AOP式无侵入注入

    说起来, 面向切面编程(AOP)自从诞生之日起,一直都是计算机科学领域十分热门的话题,但是很奇怪的是,在前端圈子里,探讨AOP的文章似乎并不是多,而且多数拘泥在给出理论,然后实现个片段的定式)难免陷入了形而上学的尴尬境地,本文列举了两个生产环境的实际例子论述webpack和AOP预编译处理的结合,意在抛砖引玉.当然,笔者能力有限,如果有觉得不妥之处,还请大家积极的反馈出来, 共同进步哈. 重要的概念 AOP: 面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术. Joi

  • 浅谈webpack打包生成的bundle.js文件过大的问题

    问题 使用webpack进行打包时,发现bundle.js竟然有2M多. 解决办法 网上有去除插件.提取第三方库.压缩代码等方法. 还有一个比较容易忽略的原因就是开了sourcemap 在生产环境中,应使用devtool: false 关闭sourcemap后bundle.js的大小从2.46M降到302k 以上这篇浅谈webpack打包生成的bundle.js文件过大的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 彻底解决 webpa

  • 浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法

    1,心血来潮,把ThinkPHP项目部署到了nginx上,以上是在apache上跑的.突然发现nginx不支持pathinfo功能,难怪在TP中调怎么都没管用. 2,开始上文件了,比网上其他一些杂的好多了: server { listen 80; #listen [::]:80; server_name www.tp.com tp.com; index index.html index.htm index.php default.html default.htm default.php; roo

随机推荐