webpack配置

Heartbroken_man

已于 2022-02-14 11:26:35 修改

阅读量721

点赞数

分类专栏： webpack 文章标签： webpack

于 2021-08-30 16:45:19 首次发布

本文链接：https://blog.csdn.net/Heartbroken_man/article/details/119996324

版权

本文介绍了webpack的基础配置，包括创建项目、模拟项目文件、配置webpack的entry、output、module、mode、plugins和optimization。重点讲解了处理scss、js、html中引入的图片、字体文件的loader配置，并提到了HtmlWebpackPlugin和optimization的设置。最后，通过npm run build执行打包。

摘要由CSDN通过智能技术生成

webpack搭建项目基础篇

一.创建项目

首先在终端cd到你的项目根目录，使用npm init创建package.json文件，

在你创建好的package.json文件里面的scripts字段那里新增这样一行，配置一下webpack执行的文件路径，同时创建一下webpack.config.js文件放在项目根目录下面

我们使用yarn add webpack webpack-cli安装一下webpack和webpack-cli两个依赖（没有安装yarn的话可以使用npm或者cnpm，当然建议使用yarn会快一点）

二.模拟项目需要的文件

在src文件下面创建文件如下：

1.模拟接口请求事件

2.创建入口文件

3.创建一个scss文件

样式可以随便写，这边只是模拟一下

4.创建一个html文件

三.配置webpack

我们在webpack.config.js文件里面配置webpack的内容，需要配置entry、output、module、mode、plugins、optimization（分别对应的是：入口、输出、模块、模式、插件、优化）

其中require引进去的，基本都需要用yarn下载下来。path除外

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const webpack = require('webpack'); // 访问内置的插件

这里配置一下入口文件和输出的配置，入口的路径为src里面的index文件，输出文件这里用了文件名拼接哈希值，主要是避免文件打包发布服务器之后用户任然读取到旧文件的情况。output里面设置arrowFunction: false，主要是让打包完的函数不要返回箭头函数，否则部分浏览器不兼容。

    entry: {
        index: './src/index.js'
    },
    output: {
        filename: '[name]_[hash].js',
        path: path.resolve(__dirname, 'dist'),
        environment: {
            arrowFunction: