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

巴特西

webpack4简单入门

最新文章

热门文章