webpack 1 webpack基本介绍

webpack简介

什么是webpack:webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一下浏览器不能直接运行的拓展语言（Scss, TypeScript等），并将其打包为合适的格式以供浏览器使用。 

可以做的事情：代码转换（es6转se5，Less,Scss转Css, TypeScript转JavaScript等）、文件优化（压缩代码体积，合并文件等）、代码分割（公共模块抽离，路由懒加载等）、模块合并、自动更新（热更新），代码校验，自动发布。
webpack基本配置

安装webpack：

npm installl webpack webpack-cli -D

webpack可以进行0配置，但是默认的0配置很弱，我们需要手动配置webpack,默认配置文件的名字是webpack.config.js // webpack是node实现的，需要使用node语法
let path = require('path');
module.exports = {
mode: 'development', //模式 production-生产模式 development-开发模式
entry: './src/index.js', //入口
output: {
filename: 'bundle.js', //打包后的文件名
path: path.resolve(__dirname, 'dist') //打包后文件所在的位置，这里路径必须是一个绝对路径，以当前路径解析出来dist的绝对路径
}
} 运行npx webpack打包（npm是5.2以后开始提供的） 

webpack打包出的文件解析

打包出来的新鲜的bundle.js /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache 先定义一个缓存
/******/ var installedModules = {};
/******/
/******/ // The require function 实现了一个require方法
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache 检查一下这个模块在不在缓存中
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId, //模块的路径
/******/ l: false, //模块是否加载完成
/******/ exports: {} //模块的导出
/******/ };
/******/
/******/ // Execute the module function 执行modules的moduleId这个模块， this指向module.exports， 模块中如果依赖的别的模块，就又会执行__webpack_require__，这样就通过唯一的入口实现了有依赖关系的加载
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ //...此处省略一些内容
/******/ // Load entry module and return exports 默认调用require方法传入的moduleId是入口模块的路径
/******/ return __webpack_require__(__webpack_require__.s = "./src/index.js");
/******/ })
/******/ ({
/***/ "./src/index.js": //key -> 模块的路径
/*! no static exports found */
/***/ (function(module, exports) { //value -> 执行函数
eval("console.log('webpack4 cs');\n\n//# sourceURL=webpack:///./src/index.js?");
/***/ })
/******/ }); 实际开发中，我们会配置多个webpack的配置文件，所以我们不能使用webpack.config.js这个默认的名字。那么怎么自定义webpack配置文件的名字呢？ 

我们需要两个配置文件:开发环境webpack.config.dev.js   生产环境webpack.config.prod.js。 我们可以在执行webpack命令时配置config参数，现在我们通过npm scrpits配置。"scripts": {
"dev": "webpack --config webpack.config.dev.js",
"prod": "webpack --config webpack.config.prod.js"
},

转载于:https://www.cnblogs.com/littlechen/p/11269890.html