首页
所有分类
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 相关文章推荐
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
前端微信支付js代码
Jul 25 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
JS中判断null的方法分析
Nov 21 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 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
Pytesseract(1) 匹配文本(1) 柱状图(1) 文字识别(1) SFTP(3) 图片模糊(1) 追加文本(1) GNN(1) flex-shrink(1) flex(1)
You might like
PHP 常见郁闷问题答解
2006/11/25 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
vue elementUI 表单校验的实现代码（多层嵌套）
2019/11/06 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
Python中的迭代器漫谈
2015/02/03 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
python代码过长的换行方法
2018/07/19 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
英国Zoro工具：手动工具，电动工具和个人防护用品
2016/11/02 全球购物
全球独特生活方式产品和礼品购物网站：AHAlife
2018/09/18 全球购物
英国地毯卖家：The Rug Seller
2019/07/18 全球购物
毕业生自我推荐
2013/11/04 职场文书
食堂员工工作职责
2013/12/18 职场文书
工程售后服务承诺书
2014/05/21 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
小学教师师德整改措施
2014/09/29 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书