分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置：首页 > 教程案例

webpack4

发布时间：2023-09-06 02:11责任编辑：熊小新关键词：webpack

webpack4

2018年04月28日 10:06:09阅读数：646更多
个人分类：【Webpack点滴知识 】

众所周知，webpack进入第4个大版本已经有2个月的时间了，而且webpack团队升级更新的速度也是非常的惊人

在写下如下内容的时候webpack已经出到了4.6的版本了，剑指5.0应该是指日可待了，当然这些都是个人的臆想，并不代表任何意见

既然我们已经迎接了webpack4的到来了，那么就一起来使用一下，即使你没用过之前的版本，没关系，我们重新出发，将工作中常用到的配置写给大家来看

非友情提示：由于webpack使用起来并不能仅看代码就方便理解，所以有图有真相的才是正解，于是乎本文配图很多，真的是很多

首先，既来之，则安之

安装webpack

  • 需要先在项目中npm init初始化一下，生成package.json
  • 建议node版本安装到8.2以上
  1. // webpack4中除了正常安装webpack之外，需要再单独安一个webpack-cli
  3. npm i webpack webpack-cli -D

★ npm i -D 是 npm install --save-dev 的简写，是指安装模块并保存到 package.json 的 devDependencies中，主要在开发环境中的依赖包

0配置了什么

webpack4可以支持0配置打包，这里所说的0配置又是什么呢？当然在开发者眼中0配置的东西，那根本是无法用的，因为不够智能，那么我们就来看看做到了哪些0配置

在使用webpack进行打包的时候，默认情况下会将src下的入口文件(index.js)进行打包

  1. // node v8.2版本以后都会有一个npx
  2. // npx会执行bin里的文件
  4. npx webpack // 不设置mode的情况下 打包出来的文件自动压缩
  6. npx webpack --mode development // 设置mode为开发模式，打包后的文件不被压缩

当执行npx webpack命令的时候，webpack会自动查找项目中src目录下的index.js文件，然后进行打包，生成一个dist目录并存在一个打包好的main.js文件

这些算是0配置的操作了，名字都是定义好的，不能变，想想也很鸡肋

webpack的使用还是在我们的配置方面，下面就进入我们的常规操作环节

webpack是基于Node的

在项目下创建一个webpack.config.js(默认，可修改)文件来配置webpack

  1. module.exports = {
  2. entry: ‘‘, // 入口文件
  3. output: {}, // 出口文件
  4. module: {}, // 处理对应模块
  5. plugins: [], // 对应的插件
  6. devServer: {}, // 开发服务器配置
  7. mode: ‘development‘ // 模式配置
  8. }

以上就是webpack的正常配置模块

★ 启动devServer需要安装一下webpack-dev-server

npm i webpack-dev-server -D
按照项目的结构，我们就从0开始去写一下配置吧
  1. // webpack.config.js
  3. const path = require(‘path‘);
  5. module.exports = {
  6. entry: ‘./src/index.js‘, // 入口文件
  7. output: {
  8. filename: ‘bundle.js‘, // 打包后的文件名称
  9. path: path.resolve(‘dist‘) // 打包后的目录，必须是绝对路径
  10. }
  11. }

上面就可以说是实现了最简单的webpack配置了，那接下来就打包一下看看

配置执行文件

工作当中我们打包编译的时候一般都执行npm run dev这样的命令，既然是通过npm执行的命令，我们就应该找到package.json里的执行脚本去配置一下命令，这里如下图所示

npm run build就是我们打包后的文件，这是生产环境下，上线需要的文件

npm run dev是我们开发环境下打包的文件，当然由于devServer帮我们把文件放到内存中了，所以并不会输出打包后的dist文件夹

通过npm run build之后会生成一个dist目录文件夹，就和上面打包后的样子一样了

多入口文件

多个入口可以有两种实现方式进行打包

  • 一种是没有关系的但是要打包到一起去的，可以写一个数组，实现多个文件打包
  • 另一种就是每一个文件都单独打包成一个文件的
  • 下面就来看看这两种方式的写法
  1. let path = require(‘path‘);
  3. module.exports = {
  4. // 1.写成数组的方式就可以打出多入口文件，不过这里打包后的文件都合成了一个
  5. // entry: [‘./src/index.js‘, ‘./src/login.js‘],
  6. // 2.真正实现多入口和多出口需要写成对象的方式
  7. entry: {
  8. index: ‘./src/index.js‘,
  9. login: ‘./src/login.js‘
  10. },
  11. output: {
  12. // 1. filename: ‘bundle.js‘,
  13. // 2. [name]就可以将出口文件名和入口文件名一一对应
  14. filename: ‘[name].js‘, // 打包后会生成index.js和login.js文件
  15. path: path.resolve(‘dist‘)
  16. }
  17. }

这时候执行npm run build后，会生成打包好的两个js文件，如图所示

配置Html模板

文件都打包好了，但是我们在使用的时候不能在dist目录下去创建一个html文件，然后去引用打包后的js吧，这不合理，实际开发中也不会这样

我们需要实现html打包功能，可以通过一个模板实现打包出引用好路径的html来

这就需要用到一个常用的插件了，html-webpack-plugin，用之前我们来安一下它

npm i html-webpack-plugin -D

因为是个插件，所以需要在config.js里引用一下的

  1. let path = require(‘path‘);
  2. // 插件都是一个类，所以我们命名的时候尽量用大写开头
  3. let HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
  5. module.exports = {
  6. entry: ‘./src/index.js‘,
  7. output: {
  8. // 添加hash可以防止文件缓存，每次都会生成4位的hash串
  9. filename: ‘bundle.[hash:4].js‘,
  10. path: path.resolve(‘dist‘)
  11. },
  12. plugins: [
  13. // 通过new一下这个类来使用插件
  14. new HtmlWebpackPlugin({
  15. // 用哪个html作为模板
  16. // 在src目录下创建一个index.html页面当做模板来用
  17. template: ‘./src/index.html‘,
  18. hash: true, // 会在打包好的bundle.js后面加上hash串
  19. })
  20. ]
  21. }

通过上面的配置后，我们再npm run build打包看一下现在是个什么样子了

多页面开发，怎么配置多页面

如果开发的时候不只一个页面，我们需要配置多页面，那么需要怎么来搞呢？不用担心，html-webpack-plugin插件自有办法，我们来观望一下

  1. let path = require(‘path‘);
  2. let HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
  4. module.exports = {
  5. // 多页面开发，怎么配置多页面
  6. entry: {
  7. index: ‘./src/index.js‘,
  8. login: ‘./src/login.js‘
  9. },
  10. // 出口文件
  11. output: {
  12. filename: ‘[name].js‘,
  13. path: path.resolve(‘dist‘)
  14. },
  15. plugins: [
  16. new HtmlWebpackPlugin({
  17. template: ‘./src/index.html‘,
  18. filename: ‘index.html‘,
  19. chunks: [‘index‘] // 对应关系,index.js对应的是index.html
  20. }),
  21. new HtmlWebpackPlugin({
  22. template: ‘./src/login.html‘,
  23. filename: ‘login.html‘,
  24. chunks: [‘login‘] // 对应关系,login.js对应的是login.html
  25. })
  26. ]
  27. }

继续npm run build看打包后的样子

上面基本介绍完了html和js的打包配置了，现在我们还缺一个好兄弟css，webpack对css的解析需要用到loader，所以我们先提前安装好，待会好方便使用

引用CSS文件

可以在src/index.js里引入css文件，到时候直接打包到生产目录下

需要下载一些解析css样式的loader

  1. npm i style-loader css-loader -D
  2. // 引入less文件的话，也需要安装对应的loader
  3. npm i less less-loader -D

下面我们来看一下如何配置css文件的解析

  1. // index.js
  2. import ‘./css/style.css‘; // 引入css
  3. import ‘./less/style.less‘; // 引入less
  5. console.log(‘这里是打包文件入口-index.js‘);
  7. // webpack.config.js
  8. module.exports = {
  9. entry: {
  10. index: ‘./src/index.js‘
  11. },
  12. output: {
  13. filename: ‘bundle.js‘,
  14. path: path.resolve(‘dist‘)
  15. },
  16. module: {
  17. rules: [
  18. {
  19. test: /\.css$/, // 解析css
  20. use: [‘style-loader‘, ‘css-loader‘] // 从右向左解析
  21. /*
  22. 也可以这样写，这种方式方便写一些配置参数
  23. use: [
  24. {loader: ‘style-loader‘},
  25. {loader: ‘css-loader‘}
  26. ]
  27. */
  28. }
  29. ]
  30. }
  31. }
  • 此时打包后的css文件是以行内样式style的标签写进打包后的html页面中，如果样式很多的话，我们更希望直接用link的方式引入进去，这时候需要把css拆分出来
  • extract-text-webpack-plugin插件相信用过的人都知道它是干什么的，它的功效就在于会将打包到js里的css文件进行一个拆分

拆分CSS

  1. // @next表示可以支持webpack4版本的插件
  2. npm i extract-text-webpack-plugin@next -D
  1. let path = require(‘path‘);
  2. let HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
  3. // 拆分css样式的插件
  4. let ExtractTextWebpackPlugin = require(‘extract-text-webpack-plugin‘);
  6. module.exports = {
  7. entry: ‘./src/index.js‘,
  8. output: {
  9. filaneme: ‘bundle.js‘,
  10. path: path.resolve(‘dist‘)
  11. },
  12. module: {
  13. rules: [
  14. {
  15. test: /\.css$/,
  16. use: ExtractTextWebpackPlugin.extract({
  17. // 将css用link的方式引入就不再需要style-loader了
  18. use: ‘css-loader‘
  19. })
  20. }
  21. ]
  22. },
  23. plugins: [
  24. new HtmlWebpackPlugin({
  25. template: ‘./src/index.html‘,
  26. }),
  27. // 拆分后会把css文件放到dist目录下的css/style.css
  28. new ExtractTextWebpackPlugin(‘css/style.css‘)
  29. ]
  30. }

此时拆分完css后，打包的html页面就以link的方式去引入css了，这样很好

引用图片

  • 处理图片方面，也需要loader
npm i file-loader url-loader -D

如果是在css文件里引入的如背景图之类的图片，就需要指定一下相对路径

  1. module.exports = {
  2. module: {
  3. rules: [
  4. {
  5. test: /\.css$/,
  6. use: ExtractTextWebpackPlugin.extract({
  7. use: ‘css-loader‘,
  8. publicPath: ‘../‘
  9. })
  10. },
  11. {
  12. test: /\.(jpe?g|png|gif)$/,
  13. use: [
  14. {
  15. loader: ‘url-loader‘,
  16. options: {
  17. limit: 8192, // 小于8k的图片自动转成base64格式，并且不会存在实体图片
  18. outputPath: ‘images/‘ // 图片打包后存放的目录
  19. }
  20. }
  21. ]
  22. }
  23. ]
  24. }
  25. }

在css中指定了publicPath路径这样就可以根据相对路径引用到图片资源了，如下图所示

页面img引用图片

页面中经常会用到img标签，img引用的图片地址也需要一个loader来帮我们处理好

npm i html-withimg-loader -D
  1. module.exports = {
  2. module: {
  3. rules: [
  4. {
  5. test: /\.(htm|html)$/,
  6. use: ‘html-withimg-loader‘
  7. }
  8. ]
  9. }
  10. }

这样再打包后的html文件下img就可以正常引用图片路径了

引用字体图片和svg图片

字体图标和svg图片都可以通过file-loader来解析

  1. module.exports = {
  2. module: {
  3. rules: [
  4. {
  5. test: /\.(eot|ttf|woff|svg)$/,
  6. use: ‘file-loader‘
  7. }
  8. ]
  9. }
  10. }

这样即使样式中引入了这类格式的图标或者图片都没有问题了，img如果也引用svg格式的话，配合上面写好的html-withimg-loader就都没有问题了

添加CSS3前缀

通过postcss中的autoprefixer可以实现将CSS3中的一些需要兼容写法的属性添加响应的前缀，这样省去我们不少的时间

由于也是一个loader加载器，我们也需要先安装一下

npm i postcss-loader autoprefixer -D

安装后，我们还需要像webpack一样写一个config的配置文件，在项目根目录下创建一个postcss.config.js文件，配置如下：

  1. module.exports = {
  2. plugins: [require(‘autoprefixer‘)] // 引用该插件即可了
  3. }

然后在webpack里配置postcss-loader

  1. module.exports = {
  2. module: {
  3. rules: [
  4. {
  5. test: /\.css$/,
  6. use: [‘style-loader‘, ‘css-loader‘, ‘postcss-loader‘]
  7. }
  8. ]
  9. }
  10. }

转义ES6

在实际开发中，我们在大量的使用着ES6及之后的api去写代码，这样会提高我们写代码的速度，不过由于低版本浏览器的存在，不得不需要转换成兼容的代码，于是就有了常用的Babel

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved