静态资源打包工具Webpack入门与实战

一、Webpack简介

  webpack是一种打包工具,把前端项目中多个静态资源(js、css、less)文件生成一个静态文件,减少了页面请求。
在这里插入图片描述

二、Webpack安装

#全局安装
npm install -g webpack webpack-cli 
#查看版本号
webpack -v

三、打包操作

(1)新建文件夹,进行项目初始化
npm init -y
(2)创建测试js文件

测试文件a.js

exports.info = function (str) {
    document.write(str);
}

测试文件b.js

exports.add = function (a, b) {
    return a + b;
}

主文件main.js

//引入打包的多个文件
const a= require('./a');
const b = require('./b');

a.info('Hello world!' + b.add(6, 6));
(3)创建配置文件,使用命令打包

webpack目录下创建配置文件webpack.config.js

webpack目录下创建dist输出文件夹。

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径,__dirname:当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}
(4)终端执行webpack命令(不推荐)

打包成功,webpack目录中dist文件会生成bundle.js文件!
在这里插入图片描述

(5)查看bundle.js文件
!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n,t){const r=t(1),o=t(2);r.info("Hello world!"+o.add(6,6))},function(e,n){n.info=function(e){document.write(e)}},function(e,n){n.add=function(e,n){return e+n}}]);
(6)终端执行webpack命令(推荐)
webpack #有黄色警告
webpack --mode=development #没有警告
#执行后查看bundle.js 里面包含了上面两个js文件的内容并提醒了代码压缩

在这里插入图片描述

(7)浏览器执行
在webpack文件夹下新建test.html文件,右键选择“open with live server”

<script src="./dist/bundle.js"></script>

在这里插入图片描述

♚学习、实战、总结、分享,让生活变得更美好!
☞林大侠博客:https://coding0110lin.blog.csdn.net/  欢迎转载,一起技术交流探讨!

©️2020 CSDN 皮肤主题: 1024 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值