webpack配置_webpack —— 基础配置

最新推荐文章于 2023-03-04 22:05:10 发布
最新推荐文章于 2023-03-04 22:05:10 发布
阅读量108 收藏
点赞数
文章标签： webpack配置

4c9fac17a4204ab4f68f0dc742e7b974.png

简介

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

背景

版本

  • webpack 4.x
  • webpack-cli 3.x
  • webpack-dev-server 3.x

主要参考网站

  • webpack中文网
  • npm
  • babel

基础配置

添加依赖

yarn add -D webpack webpack-cli webpack-dev-server

配置代码

const config = {
  mode: 'development', // development or production
  entry: './src/entry.js',
  output: {
    filename: 'bundle.[hash:8].js',
    path: path.resolve(__dirname, 'dist'),
    // publicPath: 'xxx.xx.com', // 公共前缀
  },
}
module.exports = config
````

## 配置说明
- [mode](https://www.webpackjs.com/concepts/mode/) 编译模式，暂时只有 development 和 production
- [entry](https://www.webpackjs.com/concepts/entry-points/) 入口文件，添加需要打包的模块。支持多入口，本地模块和第三方模块分离等操作。
- [output](https://www.webpackjs.com/concepts/output/) 出口文件，控制webpack如何向硬盘写入编译文件（有且只有一个出口）

# Html插入

### 添加依赖

```bash
yarn add -D html-webpack-plugin

配置声明

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成html插件

配置代码

plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 模板html路径
      filename: 'index.html', // 输出文件名字
      minfiy: { // 优化
        removeAttributeQuotes: true, // 去除双引号
      },
      hash: true, // 文件hash
    }),
]

配置说明

  • plugins
  • HtmlWebpackPlugin

样式处理

css基础处理

添加依赖

基础

yarn add -D style-loader css-loader

配置代码

说明： rules、use中规则从下到上，从右到左依次执行 先后顺序不当会报错

module: {
  rules: [
    {
      test: /.css$/,  // 匹配css文件
      use: [
        'style-loader', // 将文件插入到 html 的 head 标签内
        'css-loader', // 处理css文件中@import引用其他文件
      ]
    },
  ]
}

配置说明

  • module
  • style-loader
  • css-loader

less/sass/stylus

以less为例

添加依赖

yarn add -D less less-loader

配置代码

module: {
  rules: [
    {
      test: /.less$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader', // postcss-loader 需要在 css-loader之前处理
        'less-loader',
      ]
    },
  ]
}

配置说明

  • less
  • less-loader

优化加强

  • 统一抽离css到单独文件
  • 自动补全适配前缀

添加依赖

yarn add -D postcss-loader autoprefixer
yarn add -D mini-css-extract-plugin

配置声明

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 抽离css样式到统一文件

配置代码

module: {
  rules: [
    {
      test: /.css$/,  // 匹配css文件
      use: [
        MiniCssExtractPlugin.loader, // 使用插件抽离css，也可直接使用 style-loader 将样式插入<head>中
        'css-loader', // 处理css文件中@import引用其他文件
        'postcss-loader', // 转化成postcss 借助此来方便自动补全 注：需要在 css-loader之前处理
      ]
    },
  ]
}

添加配置文件

文件名：postcss.config.js

内容

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

配置说明

  • postcss-loader
  • autoprefixer
  • mini-css-extract-plugin

JS处理

es6 降级处理

添加依赖

yarn add -D babel-loader @babel/core @babel/preset-env
yarn add -D babel-loader babel-preset-env

配置代码

module: {
  rules: [
    {
      test: /.js$/, // 匹配js文件
      include: path.resolve(__dirname, 'src'), // 仅包含src下的文件
      exclude: /node_modules/, // 剔除依赖包
      use: {
        loader: 'babel-loader',
        options: {
          presets: [ // 预设处理
            '@babel/preset-env', // es语法处理
          ],
        }
      },
    },
  ]
}

配置说明

  • babel-loader
  • @babel/preset-env
  • babel-preset-env

es7+ 高版本语法支持

添加依赖

yarn add -D uglifyjs-webpack-plugin
yarn add -D @babel/plugin-proposal-decorators
yarn add -D @babel/plugin-proposal-class-properties
yarn add -D @babel/plugin-proposal-class-properties

配置声明

const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // js 优化压缩

配置代码

{
  test: /.js$/,
  include: path.resolve(__dirname, 'src'),
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        '@babel/preset-env', // es语法处理
      ],
      plugins: [
        ["@babel/plugin-proposal-decorators", { "legacy": true }], //es7 decorators语法
        ["@babel/plugin-proposal-class-properties", { "loose" : true }], // es7 class 属性定义语法处理
        ["@babel/plugin-transform-runtime"], // js 高级语法支持和简单的优化
      ]
    }
  },
},
plugins: [
  new MiniCssExtractPlugin({
    filename: 'css/main.[hash:8].css', // 统一放在css文件夹下
    hash: true,
  }),
]

配置说明

  • @babel/plugin-proposal-decorators
  • @@babel/plugin-proposal-class-properties
  • @babel/plugin-transform-runtime
  • @uglifyjs-webpack-plugin

添加全局变量

这里采用每个模块默认注入的方式，而不使用暴露模块到全局的操作

加载依赖

yarn add -D webpack webpack-cli

配置声明

const webpack = require('webpack');

配置代码

注：以lodash库为例，请自行添加依赖

plugins: [
  new webpack.ProvidePlugin({ // 每个模块中注入 _ 代表 lodash
    _: 'lodash',
  }),
],

配置说明

  • ProvidePlugin

图片处理

这里根据图片大小做了区分处理，大图引用图片静态资源，小图直接转 base64 到文件中

加载依赖

yarn add -D file-loader url-loader

配置代码

{
  test: /.(png|jpg|jpeg|gif)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 10 * 1024, // 设置图片限制，超过的使用 file-loader 加载 未超过的转base加载到
        outputPath: 'img/', // 输出到一个文件夹中
        // publicPath: 'xxx.xx.com.cn', // 公共前缀 用于cdn引用等
      }
    }
  ]
},

配置说明

  • file-loader
  • url-loader
weixin_39972996
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack使用
weixin_44679078的博客
06-25 138
官网：https://webpack.docschina.org/ webpack的作用 如官网上的图片所示，就是通过webpack可以将左边的这些文件转换成浏览器识别的右边的这种类型的文件，文件的依赖关系可以保留。还可以将预编译的语言进行编译 入口（entry） 入口起点就是从那个文件开始，从这个文件可以逐渐找到其他文件的依赖关系，可以有多个不同的入口 输出 将输入的内容打包输出出来，上图中右边的文件就是输出的文件 loader 可以想象成是可以加载其他扩展语言的功能，比如说webpack本来只支持Ja
webpack中module的rules中use的执行顺序
Machangzhi_1115的博客
04-26 2128
// ./webpack.config.js module.exports = { entry: './src/main.js', output: { filename: 'bundle.js', }, module: { rules: [ { test: /\.md$/, use: [ 'html-loader', './markdown-loader' ] }
webpack简单配置
提笔书几行
05-22 503
1、下载相关依赖包'use strict';var webpack = require('webpack'); var path = require('path'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var dts = require('dts-bundle'); var rimraf = require
上手webpack4并进阶？来看这里~
fengmin_w的博客
08-23 745
webpack作为一个模块打包器，主要用于前端工程中的依赖梳理和模块打包，将我们开发的具有高可读性和可维护性的代码文件打包成浏览器可以识别并正常运行的压缩代码，主要包括样式文件处理成css，各种新式的JavaScript转换成浏览器认识的写法等，也是前端工程师进阶的不二法门，本文借鉴了部分vue-cli对webpack的配置思路，还有一些网上比较好的解决方案，在此对这些作者一并表示感谢。 w...
Vue2+ Webpack 3 配置不同环境下打包后不同域名
Zihuatanjo
04-20 1500
项目需求 生产环境正式版线上地址为：www.xxxx.com 生产环境测试版线上地址为：www.test.com 本地开发环境环境：localhost:8080 公司采用的是Jenkins自动化打包部署系统，在实际开发或者/生产环境时，我们需要打包后的文件配置到不同的域名。我一开始的做法是在main.js中每次打包前修改这个地址，比较繁琐，参阅了相关文章之后，可以通过代码实现，不同的打包命...
webpack4_config:配置演示
04-27
webpack4升级 主要针对生产环境进行了优化升级。 插件升级 commonChunkPlugin -> optimization.splitChunks and runtimeChunk 或者 splitChunksPlugin and runtimeChunkPlugin插件形式， 分包插件优化升级 // ...
Vue+webpack项目基础配置教程
08-28
主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下
前端路由&webpack基础配置详解
10-16
主要介绍了前端路由&webpack基础配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Webpack配置.docx
05-15
Webpack打包配置，帮助前端程序实现模块的依赖打包，压缩代码，优化代码；主要运用于前端框架，比如vue，react等。
webpack配置文件.zip
04-15
自动构建vue脚手架的webpack配置文件，包括三个文件package.json、package-lock.json、webpack.config.js，使用说明在文件里面的webpack.config.js里面，
1.3.Module中的Loader配置：以css为案例
official business
06-10 283
之前的webpack打包，只涉及到js文件本身，如果涉及到了使用其他语法的文件的话。比如说，css文件、使用了ES6语法的jsx（react）等，webpack就无法打包了。 可以试着用原来方法尝试对涉及css文件的文件进行打包。 文件如下： index.css body{ background-color: #333333; } hello.js export default function(){ document.write('hello'); } index.js im
webpack基本使用
凉茶铺的博客
01-09 1977
介绍了webpack的下载和安装，和如何打包css与less文件，最后介绍了postcss-loader的作用和用法
使用yarn进行webpack配置及简单使用
Nikki_u的博客
03-02 2979
一、项目准备 1、webpack的配置 准备好文件夹并在vscode中打开 终端执行 yarn init -y yarn add webpack@5.31.2 webpack-cli@4.9.0 -D 根目录下新建src文件夹 ---index.js 在package.json下建立命令 "scripts": { "build": "webpack" }, 最后终端执行 调试效果 yarn build/npm run build 二、项目...
webpack指南（基础篇）——手把手教你配置webpack
前端成长之路
03-04 751
今天我们来从零开始搭建一个项目,并实现用webpack打包和优化。
yarn add webpack webpack-cli 报错
ChanYeol666的博客
06-30 477
error human-signals@2.1.0: The engine "node" is incompatible with this module. Expected version ">=10.17.0". Got "10.13.0" error Found incompatible module. 使用：yarn config set ignore-engines true 参考：yarn错误The engine "node" is incompatible with this m
webpack从零搭建一个项目
大灰狼的小绵羊哥哥的博客
11-14 1700
前言 最近在做一个关于webpack5手动搭建项目的测试练习，网上找了很多文章，发现很多文章按照他们的步骤搭建，都会有各种各样的报错，于是自己参考网上各类文章，加上自己的实际搭建，完成了这篇文章。如果有错误，欢迎在评论区指出。 时间 2021/09/28 初始化环境 生成package.json yarn init -y 复制代码 安装webpack 和webpack-cli yarn add -D webpack webpack-cli webpack-cli是webpack的命令行工
webpack的构建流程是什么?
愚公的博客
11-23 292
Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程： 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数； 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译； 确定入口：根据配置中的 entry 找出所有的入口文件； 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理； 完成模块编译：
webpack中的常见loader用法及配置
m0_74086230的博客
11-29 2978
webpack中的常见loader
webpack打包方法总结
weixin_39855431的博客
05-14 6919
第一次使用webpack进行打包，遇到了很多的坑，老是报错，经过这个查查查，终于打包成功，这里的打包就是单纯打包js，没有和任何的框架配合使用，但是在执行过程中出现了很多的问题，现在已经逐步解决，大概流程了解了，但是还没有和深刻的理解，这里就是先做个笔记，以免以后遇到相同的情况，浪费时间。1.webpack打包基于node先下载node，下载地址：https://nodejs.org/en/dow...
解释这行代码__webpack_require__.r(__webpack_exports__);
最新发布
05-28
4. __webpack_require__.r(__webpack_exports__)表示调用Webpack的设置导出方式的函数，将__webpack_exports__对象设置为ES6模块的默认导出对象。 总之，这行代码是Webpack打包工具生成的模块加载代码之一，用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值