wepack详细配置

29/build/built.js

@@ -0,0 +1,89 @@
+/*
+ * 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/).
+ */
+/******/ (function() { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./src/add.js":
+/*!********************!*\
+  !*** ./src/add.js ***!
+  \********************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+eval("__webpack_require__.r(__webpack_exports__);\nfunction add(x,y){\r\n    return x + y\r\n}\r\n\r\n/* harmony default export */ __webpack_exports__[\"default\"] = (add);\n\n//# sourceURL=webpack:///./src/add.js?");
+
+/***/ }),
+
+/***/ "./src/count.js":
+/*!**********************!*\
+  !*** ./src/count.js ***!
+  \**********************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+eval("__webpack_require__.r(__webpack_exports__);\nfunction count(x,y){\r\n    return x - y\r\n}\r\n\r\n/* harmony default export */ __webpack_exports__[\"default\"] = (count);\n\n//# sourceURL=webpack:///./src/count.js?");
+
+/***/ }),
+
+/***/ "./src/index.js":
+/*!**********************!*\
+  !*** ./src/index.js ***!
+  \**********************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _add__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./add */ \"./src/add.js\");\n/* harmony import */ var _count__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./count */ \"./src/count.js\");\n\r\n\r\n\r\nconsole.log('index.js')\r\n\r\nconsole.log((0,_add__WEBPACK_IMPORTED_MODULE_0__.default)(1,2))\r\n\r\nconsole.log((0,_count__WEBPACK_IMPORTED_MODULE_1__.default)(4,3))\n\n//# sourceURL=webpack:///./src/index.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;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	!function() {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = function(exports) {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	}();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// 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/index.js");
+/******/ 	
+/******/ })()
+;

29/build/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Webpack App</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="built.js"></script></head>
+  <body>
+  </body>
+</html>

29/src/add.js

@@ -0,0 +1,5 @@
+function add(x,y){
+    return x + y
+}
+
+export default add

29/src/count.js

@@ -0,0 +1,5 @@
+function count(x,y){
+    return x - y
+}
+
+export default count

29/src/index.js

@@ -0,0 +1,8 @@
+import add from './add'
+import count from './count'
+
+console.log('index.js')
+
+console.log(add(1,2))
+
+console.log(count(4,3))

29/webpack.config.js

@@ -0,0 +1,31 @@
+
+const {resolve} = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+/**
+ * entry:
+ * 1 string  --> './src/index.js' -- 单入口
+ *      打包形成一个chunk，输出一个bundle文件
+ *      chunk名称默认是main
+ * 2 array --> ['./src/index.js,'./src/add.js']  -- 多入口
+ *      所有入口文件最终形成一个chunk，输出一个bundle文件
+ *      用途：HMR热更新中，让html热更新生效
+ * 3 object --> {index:'./src/index.js',add:./src/add.js'}
+ *      多入口，形成多个chunk，输出多个bundle文件
+ * 
+ * 4 特殊用法
+ *      object --> {index:['./src/index.js','./src/count.js'],add:'./src/add.js'}
+ *      index 多文件形成一个chunk，输出一个文件
+ *      add 一个文件形成一个chunk，输出一个文件
+ */
+module.exports = {
+    entry: './src/index.js',
+    output: {
+        filename:'[name].js',
+        path:resolve(__dirname,'build')
+    },
+    plugins: [
+        new HtmlWebpackPlugin()
+    ],
+    mode: 'development'
+}

30/src/add.js

@@ -0,0 +1,5 @@
+function add(x,y){
+    return x + y
+}
+
+export default add

30/src/count.js

@@ -0,0 +1,5 @@
+function count(x,y){
+    return x - y
+}
+
+export default count

30/src/index.js

@@ -0,0 +1,8 @@
+import add from './add'
+import count from './count'
+
+console.log('index.js')
+
+console.log(add(1,2))
+
+console.log(count(4,3))

30/webpack.config.js

@@ -0,0 +1,24 @@
+
+const {resolve} = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+/**
+ * output:
+ *   filename:指定名称+目录
+ *   path：指定目录
+ *   publicPath: '/'   所有资源的引入公共路径前缀 例：'imgs/a.jpb' => '/imgs/a.jpg'
+ *   chunkFilename: '[name]_chunk.js'   非入口chunk的名称
+ *   library：'[name]' 向外暴露
+ *   libraryTarget: 'window'  指定向外暴露变量名
+ */
+module.exports = {
+    entry: './src/index.js',
+    output: {
+        filename:'[name].js',
+        path:resolve(__dirname,'build')
+    },
+    plugins: [
+        new HtmlWebpackPlugin()
+    ],
+    mode: 'development'
+}

31/src/add.js

@@ -0,0 +1,5 @@
+function add(x,y){
+    return x + y
+}
+
+export default add

31/src/count.js

@@ -0,0 +1,5 @@
+function count(x,y){
+    return x - y
+}
+
+export default count

31/src/index.js

@@ -0,0 +1,8 @@
+import add from './add'
+import count from './count'
+
+console.log('index.js')
+
+console.log(add(1,2))
+
+console.log(count(4,3))

31/webpack.config.js

@@ -0,0 +1,30 @@
+
+const {resolve} = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+/**
+ * 
+ */
+module.exports = {
+    entry: './src/index.js',
+    output: {
+        filename:'[name].js',
+        path:resolve(__dirname,'build')
+    },
+    module:{
+        rules:[
+            {
+                test:/\.css$/,
+                use:['style-loader','css-loader']
+            },
+            {
+                test:/.\js$/,
+                loader:'eslint-loader'
+            }
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin()
+    ],
+    mode: 'development'
+}

32/build/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Webpack App</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="main.js"></script></head>
+  <body>
+  </body>
+</html>

32/src/add.js

@@ -0,0 +1,5 @@
+function add(x,y){
+    return x + y
+}
+
+export default add

32/src/count.js

@@ -0,0 +1,5 @@
+function count(x,y){
+    return x - y
+}
+
+export default count

32/src/css/index.css

@@ -0,0 +1,3 @@
+body,html{
+    background:red;
+}

32/src/index.js

@@ -0,0 +1,9 @@
+import add from './add'
+import count from './count'
+import '$css/index'
+
+console.log('index.js')
+
+console.log(add(1,2))
+
+console.log(count(4,3))

32/webpack.config.js

@@ -0,0 +1,43 @@
+
+const {resolve} = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+/**
+ * 
+ */
+module.exports = {
+    entry: './src/index.js',
+    output: {
+        filename:'[name].js',
+        path:resolve(__dirname,'build')
+    },
+    module:{
+        rules:[
+            {
+                test:/\.css$/,
+                use:['style-loader','css-loader']
+            }
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin()
+    ],
+    mode: 'development',
+    /**
+     * 解析模块规则
+     */
+    resolve:{
+        //配置解析路径别名 缺点：编辑器无提示
+        alias:{
+            $css: resolve(__dirname,'src/css')
+        },
+        //配置省略文件路径的后缀名
+        extensions:[
+            '.js','.json','.css'
+        ],
+        //告诉webpack解析模块位置
+        modules:[
+            resolve(__dirname,'../node_modules'),'node_modules'
+        ]
+    }
+}

33/build/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Webpack App</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="main.js"></script></head>
+  <body>
+  </body>
+</html>

33/src/add.js

@@ -0,0 +1,5 @@
+function add(x,y){
+    return x + y
+}
+
+export default add

33/src/count.js

@@ -0,0 +1,5 @@
+function count(x,y){
+    return x - y
+}
+
+export default count

33/src/css/index.css

@@ -0,0 +1,3 @@
+body,html{
+    background:red;
+}

33/src/index.js

@@ -0,0 +1,9 @@
+import add from './add'
+import count from './count'
+import '$css/index'
+
+console.log('index.js')
+
+console.log(add(1,2))
+
+console.log(count(4,3))

33/webpack.config.js

@@ -0,0 +1,78 @@
+
+const {resolve} = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+/**
+ * 
+ */
+module.exports = {
+    entry: './src/index.js',
+    output: {
+        filename:'[name].js',
+        path:resolve(__dirname,'build')
+    },
+    module:{
+        rules:[
+            {
+                test:/\.css$/,
+                use:['style-loader','css-loader']
+            }
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin()
+    ],
+    mode: 'development',
+    /**
+     * 解析模块规则
+     */
+    resolve:{
+        //配置解析路径别名 缺点：编辑器无提示
+        alias:{
+            $css: resolve(__dirname,'src/css')
+        },
+        //配置省略文件路径的后缀名
+        extensions:[
+            '.js','.json','.css'
+        ],
+        //告诉webpack解析模块位置
+        modules:[
+            resolve(__dirname,'../node_modules'),'node_modules'
+        ]
+    },
+    devServer:{
+        //运行代码目录
+        contentBase: resolve(__dirname,'build'),
+        //监视build目录下文件，一旦变化就会reload
+        watchContentBase:true,
+        //忽略监视
+        watchOptions:{
+            ignored: /node_modules/
+        },
+        //启动gzip压缩
+        conpress: true,
+        //端口
+        port:3000,
+        host:'localhost',
+        //自动打开浏览器
+        open:true,
+        //开启HMR功能
+        hot:true,
+        //不显示启动服务器日志信息
+        clientLogLevel:'none',
+        // 除了一些基本启动信息，其他内容不显示
+        quiet:true,
+        // 出错时，不全屏提示
+        overlay: false,
+        // 服务器代理 -- 跨域问题
+        proxy:{
+            '/api':{
+                target:'http://localhost:3000',
+                //重写
+                pathRewrite:{
+                    '^/api':''
+                }
+            }
+        }
+    }
+}

README.md

@@ -33,6 +33,14 @@ npx webpack serve
 * 26: 多进程打包
 * 27：externals -- 无需打包，比如cdn引入
 * 28: dll -- 需要打包一次，无需重复打包
+* 29：详细配置 -- entry
+* 30：详细配置 -- output
+* 31: 详细配置 -- module
+* 32: 详细配置 -- resolve
+* 33：详细配置 -- devServer
+* 34: 详细配置 -- optimization
+* 35: webpack5
+* 36：总结
 
 ## 关于
 用于学习webpack配置，包括css、less、图片资源、其他资源、开发环境等配置。