首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJanuary 28, 2019

一直使用webpack,上次也分享过webpack配置es6~9的语法参考链接,但是对于一些小白童鞋来说,最基本的配置都不太知道,刚好利用春节休假期间对webpack4的知识点梳理一次。方便一些刚刚入行的人学习,也是对自己的一种总结与提高

一、几个盲点的解释

1、全局安装与局部安装

  • 对于一般的新手都有一个疑惑我是全局安装还是本项目中安装(局部安装),个人建议,现在前端发展那么快,我们使用局部安装的方式更好(使用最新的技术栈)。
  • 我们知道javascript是弱语言,有局部变量和全局变量,其实全局安装与局部安装的性质与函数的全局变量与局部变量有点类似。

2、安装包的时候--save与-D的区别

一般我们仅仅是在开发环境依赖的包直接使用-D就可以,这样就会在项目的package.json文件中的devDependencies新增相关的配置信息

npm install webpack webpack-cli -D

--save是会放在package.json文件的dependencies中

记住仅仅是开发环境需要使用的包就使用-D

二、webpack所谓的0配置使用

webpack是基于配置的前端脚手架,在实际项目中开发需要配置你需要的插件与加载器。

1、webpack最基本的基重要的是:

  • plugins:配置插件的
  • module:主要配置一些加载器

2、初始化项目

创建一个文件夹webpack-demo

初始化生成package.json文件

npm init --yes

3、安装webpack最基本的依赖包

npm install webpack webpack-cli -D

4、创建一个文件夹src并在里面创建一个index.js的文件

5、在命令行中运行(先忽视警告信息)

npx webpack

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

6、在生成的dist文件夹下会生成一个大包好的main.js文件,在该文件夹下创建一个index.html文件引入main.js,在浏览器中查看控制台是否输出信息。

二、webpack的配置

1、在项目下创建一个webpack.config.js文件

2、可以配置的有

const path = require('path');

module.exports = {
 entry: '', // 打包文件的入口
 output: {}, // 打包后的出口文件配置
 devServer: {}, // 开发服务器
 module: {}, // 模块配置
 plugins: {}, // 插件的配置
 mode: 'development', // ['development', 'production']模式
 resolve: {}, // 配置解析
}

三、配置开发环境(在内存中打包)

1、安装包

npm install webpack-dev-server -D

2、在webpack.config.js中配置入口文件与出口文件

module.exports = {
 entry: './src/index.js', // 打包文件的入口
 output: {
  filename: 'build.js',
  // 注意这个位置必须是绝对路径
  path: path.join(__dirname, 'dist')
 },
 ...
}

3、配置开发devServer

module.exports = {
 ...
 devServer: {
  contentBase: path.join(__dirname, 'dist'),
  port: 8000,
  compress: true, // 自动压缩
  open: true, // 自动打开浏览器
 },
}

4、在package.json中配置命令

...
"scripts": {
 "dev": "webpack-dev-server",
},
...

5、调试性的运行命令(会自动打开浏览器,但是里面没任何信息展示)

npm run dev

6、使用html-webpack-plugin自动生成html页面的插件

1.安装包

npm install html-webpack-plugin -D

2.在webpack.config.js中引入

const HtmlWebpackPlugin = require('html-webpack-plugin');

3.在plugins中配置

plugins: [
 new HtmlWebpackPlugin({
 template: './src/index.html',
 title: 'webpack测试',
 })
],

4.关于index.html的内容

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title><%=htmlWebpackPlugin.options.title%></title>
</head>

<body>

</body>

</html>

5.关于html-webpack-plugin的配置请查看

6、运行npm run dev直接打开浏览器,打开控制台可以查看到打印信息

7、创建打包命令(在package.json中添加命令)

"scripts": {
 "dev": "webpack-dev-server",
 "build": "webpack"
},

8、使用哈希值的方式创建随机生成数字,解决缓存的问题

1、对生成的js文件生成随机数

output: {
 filename: 'build.[hash].js', // 默认生成20位的哈希值
 // filename: 'build.[hash:8].js' 可以定制生成多少位的随机数
 // 注意这个位置必须是绝对路径
 path: path.join(__dirname, 'dist')
},

2、对html里面引入的js生成哈希值(会生成?哈希值)

plugins: [
 new HtmlWebpackPlugin({
 template: './src/index.html',
 title: 'webpack测试',
 hash: true,
 })
],

3、运行命令npm run build可以查看dist文件夹下的文件是否带了尾巴(注意点:要更新文件打包会生成新的,如果没改动文件,仅仅是多次打包是一样的)

4、运行后的效果

<script type="text/javascript" src="build.1ac0ed4b.js?1ac0ed4bfca95df7576e"></script>

9、关于html-webpack-plugin其它常用的配置

new HtmlWebpackPlugin({
 ...
 minify: {
  removeAttributeQuotes: true, // 去除双引号
  collapseWhitespace: true, // 合并代码到一行
 }
})

四、清除之前的plugin的插件的使用

我们对每次打包后的缓存文件进行删除确保每次都是最新的

1、安装

npm install clean-webpack-plugin -D

2、在webpack.config.js中使用

const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
 new CleanWebpackPlugin(['./dist']),
 ...
],

五、关于webpack入口文件的几种方式

1、单一入口文件(参考上面)

2、多入口文件(可以写成一个数组),共同打包带一个出口文件中

module.exports = {
 mode: 'development',
 entry: [
  './src/index.js',
  './src/a.js'
 ],
 output: {
  filename: 'build.[hash:8].js',
  // 注意这个位置必须是绝对路径
  path: path.join(__dirname, 'dist')
 }
}

3、多入口多出口多模板的模式

1.入口文件与出口文件的配置

module.exports = {
 mode: 'development',
 entry: {
  index: './src/index.js',
  a: './src/a.js'
 },
 output: {
  filename: '[name].[hash:8].js',
  path: path.join(__dirname, 'dist')
 }
}

2.模板的配置(需要注明输出文件的名字)

...
plugins: [
  new CleanWebpackPlugin(['./dist']),
  new HtmlWebpackPlugin({
   filename: 'index.html', // 注明打包后的文件名
   template: './src/index.html',
   title: 'webpack测试1',
   hash: true,
   chunks: ['index'] // 注明选择哪个js文件
  }),
  new HtmlWebpackPlugin({
   filename: 'a.html',
   template: './src/index.html',
   title: 'webpack测试2',
   hash: true,
   chunks: ['a']
  })
 ],
}
...

六、webpack热更新的使用

1、根据上面的方式我们可以实现,修改js代码浏览器会刷新,但是是类似我们人工的刷新(如果是有状态机的数据的时候会丢失数据)

2、我们可以使用webpack自带的一个热更新的插件

3、使用方式

1.在webpack.config.js中配置

const webpack = require('webpack');
...
plugins: [
  new webpack.HotModuleReplacementPlugin(),
  ...
]
...

2.在主要的入口index.js文件中加上

if (module.hot) {
 module.hot.accept();
}

七、配置加载css样式的

webpack默认是支持js的,对于别的css或者typescript必须要安装加载器

1、安装包

npm install style-loader css-loader less less-loader -D

2、在webpack.config.js中的module配置规则(use中是一个数组,从后面解析到前面)

...
module: {
  rules: [
   {
    test: /\.css$/,
    use: [
     { loader: 'style-loader' },
     { loader: 'css-loader' }
    ]
   },
   {
    test: /\.less$/,
    use: [
     { loader: 'style-loader' },
     { loader: 'css-loader' },
     { loader: 'less-loader' },
    ]
   }
  ]
 },
...

3、在src中创建一个css的文件夹,里面创建a.css和b.less文件

4、在index.js中引入样式文件

import './css/a.css';
import './css/b.less';

5、启动服务,查看浏览器Elements栏

八、抽取成单独的一个样式文件

上面的方式虽然可以加载样式文件,但是加载出来的全部的以<style type="text/css">....</style>的方式到页面中,增加了js文件的体积,如果项目大,可能会造成js文件过大加载慢,甚至加载不出的弊端。

1、抽取单独的css目前主要有2个包可以选择

  • 使用插件extract-text-webpack-plugin@next
  • 使用插件mini-css-extract-plugin(今后取代上面那个插件的包)

2、安装包

npm install extract-text-webpack-plugin@next mini-css-extract-plugin -D

3、使用extract-text-webpack-plugin@next插件的方式

1.引包

const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');

2.修改module中的加载器

module: {
  rules: [
   {
    test: /\.css$/,
    use: ExtractTextWebpackPligin.extract({
     use: [
      { loader: 'css-loader' }
     ]
    })
   },
   {
    test: /\.less$/,
    use: ExtractTextWebpackPligin.extract({
     use: [
      { loader: 'css-loader' }, 
      { loader: 'less-loader' }
     ]
    })
   }
  ]
},
...

3.使用插件

plugins: [
 ...
 new ExtractTextWebpackPligin({
  filename: 'css/index.css',
 }),
 new HtmlWebpackPlugin({
  template: './src/index.html',
  title: 'webpack测试',
  hash: true,
  // 先注释下面的代码,更好看结果
  // minify: {
  //  removeAttributeQuotes: true, // 去除双引号
  //  collapseWhitespace: true, // 合并代码到一行
  // }
 })
],

4、在index.js中依然是导入css文件

import './css/a.css';
import './css/b.less';

4、使用mini-css-extract-plugin插件方式

1.导包

const MiniCssTractPlugin = require('mini-css-extract-plugin');

2.在module中配置

module: {
 rules: [
  {
   test: /\.css$/,
   use: [
    MiniCssTractPlugin.loader,
    { loader: 'css-loader' }
   ]
  },
  {
   test: /\.less$/,
   use: [
    MiniCssTractPlugin.loader,
    { loader: 'css-loader' }, 
    { loader: 'less-loader' }
   ]
  }
 ]
},

3.配置插件

plugins: [
 ...
 new MiniCssTractPlugin({
  filename: 'css/css.css',
 }),
]

4.一样的在index.js中导包

5.测试

九、抽取成多个单独的样式文件

1、导包

const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');

2、预先实例化两个输出文件的对象

const cssExtract = new ExtractTextWebpackPligin('css/a.css');
const lessExtract = new ExtractTextWebpackPligin('css/b.css');

3、在module中预先实例化的对象

module: {
 rules: [
  {
   test: /\.css$/,
   use: cssExtract.extract({
    use: [
     { loader: 'css-loader' }
    ]
   })
  },
  {
   test: /\.less$/,
   use: lessExtract.extract({
    use: [
     { loader: 'css-loader' }, 
     { loader: 'less-loader' },
    ]
   })
  }
 ]
},

4、配置插件

plugins: [
  cssExtract,
  lessExtract,
  ...
]

5、运行命令npm run build查看

十、关于抽取样式修改后不刷新的问题(开发的时候依然是加上style中)

1.定义disable

const cssExtract = new ExtractTextWebpackPligin({
 filename: 'css/a.css',
});
const lessExtract = new ExtractTextWebpackPligin({
 filename: 'css/b.css',
});

2.在modul中使用

module: {
 rules: [
  {
   test: /\.css$/,
   use: cssExtract.extract({
    fallback: 'style-loader',
    use: [
     { loader: 'css-loader' }
    ]
   })
  },
  {
   test: /\.less$/,
   use: lessExtract.extract({
    fallback: 'style-loader',
    use: [
     { loader: 'css-loader' }, 
     { loader: 'less-loader' },
    ]
   })
  }
 ]
},

十一、关于抽取的时候不引入未使用的样式来简单打包后的体积

1、安装包

npm install purifycss-webpack purify-css glob -D

2、导入

const PurifycssWebpack = require('purifycss-webpack');
const glob = require('glob');

3、使用

...
// 注意必须要在HtmlWebpackPlugin后面使用
new PurifycssWebpack({
 paths: glob.sync(path.resolve('src/*.html'))
})
...

十二、给css3样式加上前缀

1、使用postcss实现该功能

2、安装包

npm install postcss-loader autoprefixer -D

3、配置postcss-loader的加载器

...
{
 test: /\.css$/,
 use: cssExtract.extract({
  fallback: 'style-loader',
  use: [
   { loader: 'css-loader' },
   { loader: 'postcss-loader'},
  ]
 })
},
...

4、项目下新创建一个postcss.config.js的配置文件

module.exports = {
 plugins: [
  require('autoprefixer')
 ]
}

5、在a.css中写上css3的样式

body {
 background: cyan;
 transform:rotate(30deg);
}

6、执行命令npm run build查看生成的文件

十三、关于更多插件的使用请自己搜索,只要你能想到的就能搜索到的

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

水痕001

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
JQuery球队选择实例
May 18 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
Vue.use源码分析
Apr 22 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
使用jQuery实现购物车
Oct 29 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 #jQuery
详解项目升级到vue-cli3的正确姿势
Jan 28 #Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 #jQuery
this在vue和小程序中的使用详解
Jan 28 #Javascript
Vue加载json文件的方法简单示例
Jan 28 #Javascript
Vue项目安装插件并保存
Jan 28 #Javascript
vue 左滑删除功能的示例代码
Jan 28 #Javascript
TECSUN(1) 德生(17) YB217(1) PL-365(1) 再生机(1) 1 Tube Radio(1) 东方红(1) YB235(1) YB400(2) 海燕B411(1)
You might like
PHP4引用文件语句的对比
2006/10/09 PHP
《PHP编程最快明白》第六讲：Mysql数据库操作
2010/11/01 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
JavaScript插件化开发教程 （四）
2015/01/27 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
Python2与Python3的区别实例总结
2019/04/17 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
如何在django中实现分页功能
2020/04/22 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
DVF官方网站：美国时装界尊尚品牌
2017/08/29 全球购物
KENZO官网：高田贤三在法国创立的品牌
2019/05/16 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
初中毕业生的自我评价
2014/03/03 职场文书
医疗纠纷协议书
2014/04/16 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
项目经理任命书范本
2014/06/05 职场文书
岗位职责说明书模板
2014/07/30 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
政协会议宣传标语
2014/10/09 职场文书
书法社团活动总结
2015/05/07 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB