webpack4简单入门

安装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为什么没有边颜色，我也在摸索中。。。