关于webpack的基本配置

这篇具有很好参考价值的文章主要介绍了关于webpack的基本配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

为什么要有webpack构建和打包?

  • 更好的模块化管理。webpack支持模块化规范:代码分割成独立模块,并管理模块之间的依赖关系。
  • 资源打包。将js文件、css文件、图片等多个资源打包成单个或多个文件,减少请求,提高加载性能性能,且webpack支持资源压缩、优化、缓存等处理。
  • 转换和编译。如用Bable将ES6+代码转为向后兼容版本如ES5,将sass、less、stylus转为浏览器能识别的css代码,将ts转为js等。
  • 代码拆分和懒加载。当应用程序变得复杂时,打包文件体积也会变大,导致初始加载时间太长。因此可以对代码进行拆分,按需加载。
  • 插件系统和扩展性。Webpack具有强大的插件系统,提供了许多插件和工具,以满足不同项目的需求。

一、webpack基本配置

1.配置拆分和merge

mode表示以什么模式打包;
使用development模式,打包后的代码可阅读,没被压缩;
使用production模式,代码会被压缩。

const path = require('path');
module.exports = {
	mode:'development', // production 生产环境
	entry:{
		app: './src/main.js',
		list: './src/main.js'
	},
	output:{
		path.resolve(__dirname, 'dist');
		filename: '[name].js'
	}
}

开发环境和生产环境是不一样的,为了解决手动改更改mode带来的不便,所以将这些打包配置拆分到不同文件中:

  • 通用配置:webpack.common.js
  • dev配置: webpack.dev.js
  • prod配置:webpack.prod.js
// webpack.common.js
const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__dirname,'..'.'dist')
module.exports={
 entry:{
  path:path.join(srcPath,'index')
 }
}

由于我们拆分了配置,公共的一些配置项不需要在dev和prod里面再去重新写,所以我们需要把webpack.common.js分别和dev,prod建立连接。
这时需要安装webpack-merge这个插件

npm i webpack-merge -D

安装完成后需要在dev和prod里面分别引入:

// webpack.dev.js
const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__direname,'..','dist')
const {merge}=require('webpack-merge')
const webpackCommonConf=require('./webpack.common')

module.exports=merge(webpackCommonConf,{ // 合并
 mode:'development'
})

// webpack.prod.js
const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__direname,'..','dist')
const {merge}=require('webpack-merge')
const webpackCommonConf=require('./webpack.common')

module.exports=merge(webpackCommonConf,{ // 合并
  mode:'production'
  output:{
    filename:'bundle.[contentHash:8].js',
    path:path.join(distPath)
  }
})

然后修改package.json中的build命令:

"scripts":{
  "build":"webpack --config build/webpack.prod.js",
  "devBuild": "webpack --config build/webpack.dev.js",
 }

生产模式打包:npm run build
开发模式打包:npm run devBuild

2. 启动服务

1)

// webpack.common.js
//首先使用 npm i html-webpack-plugin -D 安装 html-webpack-plugin
// 然后配置入口文件,启动服务后会打包生成html文件
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
 plugins:[
   new HtmlWebpackPlugin({
     template:path.join(srcPath,'index.html'),
     filename:'index.html'//打完包以后的文件名称
     chunks:["index"] //这里的chunks代表的意思是引入的是哪一个入口文件,我引入的就是src下建立的index.js文件
  })
 ]
}

2)安装 npm i webpack-dev-server -D

// webpack.dev.js 版本4.x
module.exports=merge(webpackCommonConf,{
 devServer:{
  port:3000,
  static:distPath,//根目录
  open:true,//自动打开浏览器
  compress:true,//启动压缩
  //如果需要跨域请求接口
  proxy:{
   '/api':{
        target:'http://localhost:3000'
      }
  }
 }
})
  1. 配置dev命令,在package.json文件中
"script":{
  "dev":"webpack-dev-server --config build/webpack.dev.js"
}

npm run dev启动服务。

3、处理es6,配置babel

对于现代浏览器而言,有些ES6语法是无法被解析的,因此需要babel将ES6解析ES5,这也解决了浏览器兼容性问题。
1)首先安装babel-loader:

npm i babel-loader -D //我这里是^8.0.6版本的
npm i babel-core -D//babel-core包含了一些babel里面的api
npm i babel-preset-env -D //提供执行环境

2)在根目录新建.babelrc文件

{
  "presets": ["babel-preset-env"],
  "plugins": []
}

3)在webpack.common.js中配置babel

module.exports = {
// ...
	module:{
	 rules:[
	   {
	    test:/\.js$/,
	    loader:['babel-loader'],
	    include:srcPath,
	    exclude:/node_modules/
	   }
	 ]
	}
// ...
}

4、处理样式

一般也是在webpack.common.js中配置,无论在开发模式还是生产模式都需要处理样式。

1)对于css文件
安装:

npm i css-loader -D
npm i style-loader -D

配置如下:

module:{
 rules:[
  {
   test:/\.css$/,
   loader:['style-loader','css-loader']//执行顺序为从后到前
  }
 ]
}

2)对于less等预处理器
安装:

npm i less -D
npm i less-loader -D

配置:

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

3)postcss-loader可以做兼容浏览器,有些css语法不是所有浏览器都兼容,postcss-loader就可以帮我们做这些事情。
postcss-loader是一个比较大的插件,里面可以再引入一些别的功能,如autoprefixer:

安装 : npm install postcss autoprefixer

在公共配置文件中配置postcss:

{
	test: /\.css$/,
	// loader 的执行顺序是:从后往前
	loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
},

配置autoprefixer,新建postcss.config.js,配置如下代码:

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

autoprefixer是一个后处理程序,而可以同sass、stylus或less等预处理器共同使用。它适用于普通的css,无需关心你要为哪些浏览器加前缀,只需关注于实现,并使用w3c最新规范。一般配合postcss一起使用

5、处理图片

对于图片的处理一般分为dev和prod环境下的处理,主要原因是图片一般是在根目录下,打包以后希望全部输出到img文件夹里面,而且需要对图片的大小做一些精细化的配置处理。

对图片的使用有这三种:

  • 在html中的src标签中使用
  • 在js中import中使用
  • 在css中使用,比如背景图片

对于第一种,需要安装html-withimg-loader:

npm i html-withimg-loader -D //^0.1.16
module:{
 rules:[
  {
    test:/\.html$/
    use:'html-withimg-loader'
  }
 ]
}

对于第二种和第三种情况:安装file-loader

npm i file-loader -D
module:{
 rules:[{
   test:/\.(jpg|png|gif)$/,
   use:'file-loader'
 }]
}

webpack.prod.js,在这个文件里对图片做一些精细化配置,需要安装url-loader:文章来源地址https://www.toymoban.com/news/detail-629972.html

npm i url-loader -D
module:{
 rules:[{
  test:/\.(png|jpg|gif)$/,
  use:{
   loader:'url-loader',
   options:{
      limit:1024*5,//小于5kb的图片会被输出为base64格式
      outputPath:"/img/" //全部输出到img文件夹里面
    }
   }
 }]
}

到了这里,关于关于webpack的基本配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【快速搞定Webpack5】基本配置及开发模式介绍(二)

    在开始使用 webpack 之前么,我们需要对 Webpack 的配置有一定的认识。 1. enty(入口) 指示 webpack 从哪个文件开始打包 2. output(输出) 指示 webpack 打包完的文件输出到哪里去,如何命名等 3. loader(加载器) webpack 本身只能处理 js、json 等资源,其他资源需要借助 loader 、 webp

    2024年02月21日
    浏览(39)
  • 【快速搞定Webpack4】基本配置及开发模式介绍(二)

    在开始使用 webpack 之前么,我们需要对 Webpack 的配置有一定的认识。 1. enty(入口) 指示 webpack 从哪个文件开始打包 2. output(输出) 指示 webpack 打包完的文件输出到哪里去,如何命名等 3. loader(加载器) webpack 本身只能处理 js、json 等资源,其他资源需要借助 loader 、 webp

    2024年02月21日
    浏览(43)
  • 关于nginx的linux命令 以及 基本配置文件的配置

    nginx介绍 反向代理,https,动静分离(web 服务),负载均衡 (反向代理),web 缓存 内存少,并发能力强(支持50,000 个并发) 配置文件默认是放在/usr/local/nginx/conf/nginx.conf,配置文件中默认有三大块:全局块、events块、http块。 我们主要修改http块: 反向代理 server { location

    2023年04月23日
    浏览(58)
  • webpack安装和使用及超详细配置一个基本vue项目的全部流程(包括路由、less、引入图片渲染)

    webpack官网: https://webpack.docschina.org/concepts/ 一:搭建一个简单的webpack项目 1:准备工作 需要在node环境才能使用webpack,所以需要先安装node,安装node请自行百度。dddd 如图,我这里使用的是14.17.0版本的 2:初始化项目 首先创建一个文件夹,这里我的命名是myWebpack,然后使用n

    2024年02月02日
    浏览(42)
  • node.js+NPM包管理器+Webpack打包工具+前端项目搭建

    javascript运行环境(无需依赖html文件) BFF,服务于前端的后端 官网下载安装,node -v查看是否安装成功 ①、创建一个01.js文件 ②、通过CMD命令执行(或者通过工具的集成终端) node 01.js 如果出现权限原因,可以通过管理员方式打开工具 ③、通过浏览器访问http://127.0.0.1:8888 如

    2024年02月07日
    浏览(73)
  • 【详细教程】关于如何使用Git&GitHub的基本操作汇总&GitHub的密钥配置 ->(个人学习记录笔记)

    点击 官网链接 后,进入Git官网,下载安装包 然后根据系统类型进行下载,一般为windows 一般选择64位的安装器版本 下载好后开始安装 点击Next 默认即可,Next 默认即可,Next Next Next Next Next Next Next Next Next Next install即可 我们在桌面随便创建一个文件夹例如code 进入code文件夹 鼠

    2024年02月06日
    浏览(57)
  • AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(七)

    实操: server.js utils/lib/index.js utils/package.json 从别处(网上、其他人手中)拿到写好的项目,一般不携带node_modules文件夹(所占存储空间大) 但有package.json文件,里面记载了当前项目下载过的包 还有package-lock.json文件,固定软件包的版本 导入模块/包,除了自己创建的模块、包

    2024年01月22日
    浏览(67)
  • 【Node.JS】初入前端,学习node.js基本操作

    NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: npm可以分为全局安装和本地安装 Node所有API都支持回调函数,回调函数一般作为API的最后一个参数出现 阻塞代码实例 非阻塞代码示例 语法分析 具体示例 事件监听器就是

    2023年04月25日
    浏览(45)
  • 关于vue运行报错:webpack < 5 used to include polyfills for node.js core modules by default.

    在使用vue3开发时安装使用web3等工具,运行报错 解决方案 1.安装 node-polyfill-webpack-plugin 2.vue.config.js中修改配置 再次运用,问题解决~ 原因是由于在webpack5中移除了nodejs核心模块的polyfill自动引入,所以需要手动引入,如果打包过程中有使用到nodejs核心模块,webpack会提示进行相

    2024年02月16日
    浏览(45)
  • AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(五)—— 项目-新闻头条-数据管理平台-ajax综合案例前端

    愿许秋风知我意,解我心中意难平。 推荐使用, 每个程序员都有自己的管理方式。 HTML结构: 1.为什么要提取公共前缀地址(基地址),因为公司业务可能会更换服务器,如果你不想一条一条地修改请求地址的话。 后续使用axios时,url不需要再写前缀。 2.请求成功与失败 成

    2024年01月25日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包