Webpack使用案例

一、什么是Webpack

        Webpack是一个前端资源加载/打包工具（因为js、css文件太多），可以将多个静态资源（js、css、less）转换成一个静态文件，减少了页面的请求，降低服务器压力，提高访问效率。

二、具体步骤

1、使用VScode 新建工作区在VC中打开终端 安装webpack工具

npm install -g webpack webpack-cli                //-g全局安装 

2、查看安装是否成功，查看版本号

 webpack -v

 3、创建两个js文件用于打包

工程目录

//common.js
exports.info = function(str){
    document.write(str)
}

// utils代码
exports.add = function(x,y){
    return x+y;
}

4、创建第三个文件 main.js 并将前面两个文件引入

（模块化引入方法     ---->    前端模块化引入）

// main代码
const common = require('./common') 
const utils = require('./utils')

common.info('hello' + utils.add(1,1))

5、需要使用webpack，需要提前书写一个配置类 -> webpack.config.js   固定写法，使用时修改几处就可以了

var path = require('path'); //引入node的核心模块path，来处理路径
module.exports = {
    mode: 'development',//设置当前的开发环境为production，这个选项可以不写，但是不写的话终端里会有一个警告，
                       //当这个值为production时，默认打包出来的文件会帮我们进行压缩，而当设置为development时，
                       //打包出来的代码默认是不会进行压缩的
    entry: './src/main.js', //入口文件为当前目录下的src下的index.js文件
    output: {//打包文件的输出路径
        filename: 'bundle.js', //打包后的文件名
        path: path.resolve(__dirname, './dist') //__dirname:表示当前文件所在的文件目录，也就是项目根目录
    }
}

6、在根目录下打开集成终端 输入命令 webpack

webpack

 7、命令运行结果如下

 在我们的dist文件夹下也生成了新的打包后的文件

// bundle.js
/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

/***/ "./src/common.js":
/*!***********************!*\
  !*** ./src/common.js ***!
  \***********************/
/***/ ((__unused_webpack_module, exports) => {

eval("exports.info = function(str){\r\n    document.write(str)\r\n}\n\n//# sourceURL=webpack://webpackdemo/./src/common.js?");

/***/ }),

/***/ "./src/main.js":
/*!*********************!*\
  !*** ./src/main.js ***!
  \*********************/
/***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {

eval("const common = __webpack_require__(/*! ./common */ \"./src/common.js\") \r\nconst utils = __webpack_require__(/*! ./utils */ \"./src/utils.js\")\r\n\r\ncommon.info('hello' + utils.add(1,1))\n\n//# sourceURL=webpack://webpackdemo/./src/main.js?");

/***/ }),

/***/ "./src/utils.js":
/*!**********************!*\
  !*** ./src/utils.js ***!
  \**********************/
/***/ ((__unused_webpack_module, exports) => {

eval("exports.add = function(x,y){\r\n    return x+y;\r\n}\n\n//# sourceURL=webpack://webpackdemo/./src/utils.js?");

/***/ })

/******/ 	});
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/ 		// Check if module is in cache
/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
/******/ 		if (cachedModule !== undefined) {
/******/ 			return cachedModule.exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			// no module.id needed
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// Execute the module function
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/ 	
/************************************************************************/
/******/ 	
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	// This entry module can't be inlined because the eval devtool is used.
/******/ 	var __webpack_exports__ = __webpack_require__("./src/main.js");
/******/ 	
/******/ })()
;

 三、最终测试

        创建html文件，引入bundle.js文件，使用浏览器查看效果

<!--    //01.html    -->
<script src="./dist/bundle.js"></script>

 

结果正确！

下面测试一下css文件

 1、新建style.css文件

body {
    background-color: chartreuse;
}

2、在main.js文件中引入style.css文件

//在main.js中引入
require('./style.css')

3、安装css加载器

npm install --save-dev style-loader css-loader

 4、修改webpack.config.js文件   新增 - module代码块

var path = require('path'); //引入node的核心模块path，来处理路径
module.exports = {
    mode: 'development',//设置当前的开发环境为production，这个选项可以不写，但是不写的话终端里会有一个警告，
                       //当这个值为production时，默认打包出来的文件会帮我们进行压缩，而当设置为development时，
                       //打包出来的代码默认是不会进行压缩的
    entry: './src/main.js', //入口文件为当前目录下的src下的index.js文件
    output: {//打包文件的输出路径
        filename: 'bundle.js', //打包后的文件名
        path: path.resolve(__dirname, './dist') //__dirname:表示当前文件所在的文件目录，也就是项目根目录
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    }
}

5、执行命令 webpack

webpack

执行结果

 最终测试

css样式引入成功！🙆‍♂️