阮一峰教程webpack demo 练习合集 – webpack demo05

本文从零开始,逐步开始学习阮一峰老师的webpack demo教程。实现从0开始新建项目,到跑通整个demo小项目。逐渐加深对webpack的理解。

今天练习的是webpack demo05,主要是对url-loader的认识。

url-loader:url-loader 功能类似于 file-loader,但是在文件大小(单位 byte)低于指定的限制时,可以返回一个 DataURL。

想要了解更多关于url-loader的信息,请移步webpack官网。想要下载阮一峰老师的整个webpack demo项目,请移步阮一峰gitHub仓库。

1、新建webpack-demo05项目文件夹
打开cmd切换到该目录下

2、执行初始化操作
npm init -y

3、安装webpack
npm install webpack webpack-cli –save-dev

4、修改package.json配置
添加”build”: “webpack -p

{
  "name": "demo05",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7"
  }
}

5、新建webpack.config.js文件

const path = require('path')

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js',
        //更改bundle.js最终生成的路径,我这里选择让它生成在根目录下,默认会在dist文件中
        path: path.resolve(__dirname, './')
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    }
}

6、新建index.html

<html>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

7、新建main.js文件,准备好两张图片资源

var img1 = document.createElement("img");
img1.src = require("./small.png");
document.body.appendChild(img1);

var img2 = document.createElement("img");
img2.src = require("./big.png");
document.body.appendChild(img2);

8、安装url-loader
npm install url-loader –save-dev

9、执行编译,运行npm run build命令,npm报错,

提示缺少file-loader模块,根据提示安装相关模块:
npm install file-loader –save-dev
运行npm run build命令,npm无报错,生成bundle.js文件
打开浏览器看效果,正常显示。

至此阮一峰老师的webpack demo04小例子已经成功跑通。

相关文章:
阮一峰教程webpack demo 练习合集 – webpack demo03
阮一峰教程webpack demo 练习合集 – webpack demo04

标签: