静态资源打包工具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/  欢迎转载，一起技术交流探讨！