Webpack详细配置，图文教程_JavaScript

Webpack详细配置，图文教程

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:"./" }) ],
    mode:'development' //开发环境
    // mode:'product' //生产环境 (代码压缩) }

代码如下：

<!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%; }