Webpack详细配置，图文教程

最新推荐文章于 2022-11-15 12:56:17 发布

风中依旧笑着过

最新推荐文章于 2022-11-15 12:56:17 发布

阅读量316

点赞数 1

分类专栏： ++ Webpack

本文链接：https://blog.csdn.net/qq_42784165/article/details/107877291

版权

++ Webpack 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，随后进行压缩打包。
在这里插入图片描述

1、安装全局webpack

在学习webpack之前是需要安装node环境的，这里默认大家已经安装过node了。
随后创建一个webpackDome文件，通过cmd 运行如下命令：

npm install webpack webpack-cli -g		//全局安装webpack和webpack-cli
npm init -y 							// 初始化获得package.json文件

2、开始配置webpack

由于webpack对css、图片、html打包时都需要引入一些插件，命令如下：

npm install css-loader style-loader url-loader file-loader html-webpack-plugin --save-dev

这句命令是引入css-loader、style-loader、url-loader、file-loader、html-webpack-plugin 这五个依赖将他们记录在package.json文件的devDependencies中，只需要在开发的时候用到在打包完之后就不需要了所以真正的生产环境中并不依赖。

项目完整后目录结构：
在这里插入图片描述

webpack.config.js代码如下：

const { resolve } = require('path');    //引入路径
const HtmlWebpackPlugin = require('html-webpack-plugin');	//打包html使用的插件
module.exports = {
    entry:'./src/main.js',              // 打包入口文件
    output:{                    
        filename:'built.js',            // 打包输出文件名
        path:resolve(__dirname,'dist')  // 输出路径
    },
    module:{
        rules:[                         // 打包规则
            {
                test:/\.css$/,         // 针对css文件
                use:[               
                    // 将js文件样式以style的形式显示页面上
                    'style-loader',
                    // 解析css文件将其转换为js文件
                    'css-loader'
                ]
            },
            {
                test:/\.(jpg|png|gif)$/,
                // 下载url-loader 和 file-loader
                loader:'url-loader',
                options:{
                    // 图片小于8kb
                    limit:8*1024
                }
            }
        ]
    },
    plugins:[                       //使用插件配置
        new HtmlWebpackPlugin({
            template:"./index.html"
        })
    ],
    mode:'development'  //开发环境
    // mode:'product'  //生产环境 (代码压缩)
}

index.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3 id="title">Hello Webpack</h3>
    <div id="box"></div>
</body>
</html>

main.js代码如下：

import './index.css'
import './index.js'

index.js代码如下：

console.log('webpack')

index.css代码如下：

body{
    background: pink;
}
#box{
    width: 100px;
    height: 100px;
    background-image: url('./img/timg.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

3、打包并查看效果

输入以下命令进行打包：

webpack

随后将src/main.js 文件中的所有依赖全部打包，最终打包到dist目录下，运行dist/index.html即可看到打包后的效果。

以上就是我对webpack打包的使用,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。

风中依旧笑着过

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack详细配置，图文教程

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，随后进行压缩打包。1、安装全局webpack在学习webpack之前是需要安装node环境的，这里默认大家已经安装过node了。随后创建一个webpackDome文件，通过cmd 运行如下命令：npm install webpack webpack-cli -g //全局安装webpack和webpack-clinpm init -y // 初始化获得package.json文件2、开始配置we
复制链接

扫一扫