首页
所有分类
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 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
js arguments.callee的应用代码
May 07 Javascript
基于jquery的滑动样例代码
Nov 20 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
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
Excel(4) greenlet(1) 正则表达式(3) 分区(2) 乱码(3) 静态压缩(1) 信息校验(1) Coroutine(1) 自动播放(1) 驱动模型(1)
You might like
php 操作调试的方法
2012/07/12 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
JavaScript修改css样式style
2008/04/15 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
Jquery Easyui自定义下拉框组件使用详解（21）
2020/12/31 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
webpack安装配置与常见使用过程详解（结合vue）
2020/06/01 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python机器学习算法之k均值聚类（k-means）
2018/02/23 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
使用Pycharm分段执行代码
2020/04/15 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
自我评价范文
2013/12/22 职场文书
统计学教授推荐信
2014/09/18 职场文书
代领报检证委托书范本
2014/10/11 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android