安装webpack需要安装node环境，因此需要在电脑中安装node。node官网https://nodejs.org/，安装LTS版本即可。
webpck基本概念
- entry：分析依赖模块的入口
- output：输出配置
- loaders：资源模块的处理器
- plugins：实现更复杂更丰富功能的插件
下边做一个简单的小案例
1、全局安装webpack
windows用户直接执行
$ npm install webpack -g
mac用户需要在命令前加入sudo命令
$ sudo npm install webpack -g
然后mac用户输入电脑开机密码等待安装完毕
2、新建文件夹webpackStudy，然后在终端中定位到此目录，执行
$ npm init
一直按回车即可，执行完毕后会创建一个package.json文件
3、安装webpack
$ npm install webpack --save-dev
因为是开发环境所以要在最后加上--save-dev
4、新建以下文件
其中123.jpg为大于8k的文件，text.png为小于8k的文件
common.css中为
body{ ???background-color: skyblue; ???font-size: 20px;}index.html中为
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title></head><body> ???</body></html>
main.js中为
// alert(‘hello world‘)const commonCss = require(‘./common.css‘);const tutu = require(‘./img/123.jpg‘);console.log(tutu)const text = require(‘./img/text.png‘);console.log(text);var img = new Image();img.src = ‘dist/‘+ tutu;img.onload = function(){ ???document.body.appendChild(img)}5、在webpack.config.js文件中输入以下内容
// 处理路径相关const path = require(‘path‘);// 压缩模块const Uglifyjs = require(‘uglifyjs-webpack-plugin‘);module.exports = { ???// 入口文件 ???entry:‘./src/main.js‘, ???output:{ ???????// path.resolve把路径解析为绝对路径 __dirname是当前js的目录 ???????path:path.resolve(__dirname,‘dist‘), ???????filename:‘bundle.js‘ ???}, ???// webpack4需要制定是否为开发环境 ???mode:"development", ???// module配置loader等信息 ???module : { ???????// rules配置loader信息 ???????rules:[{ ???????????// 判断如果文件是.css结尾的那么就用css-loader在处理。并不是打包所有的css而是从入口中搜集依赖 ???????????test:/\.css$/, ???????????use:‘css-loader‘ ???????},{ ???????????//打包图片文件 ???????????test:/\.(png|jpg|gif)$/, ???????????use:[{ ???????????????loader:‘url-loader‘, ???????????????// 配置项 ???????????????options:{ ???????????????????// 当图片小于8k的时候会把图片转为base64格式 ???????????????????limit:8192 ???????????????} ???????????}] ???????}] ???}, ???plugins:[ ???????// 使用压缩插件 ???????new Uglifyjs() ???]}6、安装所需依赖
$ npm install webpack-cli css-loader url-loader file-loader uglifyjs-webpack-plugin --save-dev
安装完毕后执行webpack命令
$ webpack
打包完毕后在index.html中引入bundle.js
在浏览器打开index.html即可看到大于8k的按个img文件。
至于body为什么没有边颜色，我也在摸索中。。。
webpack4简单入门
原文地址：https://www.cnblogs.com/-liujia/p/9351304.html