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


Posted in Javascript onMay 11, 2020

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构建工具配置和常用插件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery textarea的长度进行验证
May 06 Javascript
jQuery与其它库冲突的解决方法
Jun 25 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
JScript中的条件注释详解
Apr 24 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 Javascript
jQuery实现查看图片功能
Dec 01 jQuery
只有 20 行的 JavaScript 模板引擎实例详解
May 11 #Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 #Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 #Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 #Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 #Javascript
vue总线机制(bus)知识点详解
May 10 #Javascript
vue路由跳转传递参数的方式总结
May 10 #Javascript
You might like
PHP 和 MySQL 基础教程(四)
2006/10/09 PHP
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
vue实现购物车选择功能
2020/01/10 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
python清除字符串里非数字字符的方法
2015/07/02 Python
Python Socket传输文件示例
2017/01/16 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
wxPython多个窗口的基本结构
2019/11/19 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
局部内部类是否可以访问非final变量?
2013/04/20 面试题
学期研究性学习个人的自我评价
2014/01/09 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
工程进度款催款函
2015/06/24 职场文书
SQL中的三种去重方法小结
2021/11/01 SQL Server
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android