• webpack：两小时极速入门

    目录

    webpack

    webpack简介

    webpack起步

    webpack：管理静态资源

    webpack：加载CSS资源

    webpack：加载图片资源

    webpack：加载字体资源

    webpack：加载各种文件

    webpack资源管理的优势

    webpack：管理输出

    webpack：自动构建dist目录

    webpack：自动清理dist目录

    webpack：打包进度条

    webpack开发配置

    webpack：错误追踪

    webpack：启用观察者模式

     webpack：webpack-dev-server本地服务器

    webpack

           Webpack官网号称“打包所有的样式、资源、脚本、图片”，接下来将基于Webpack搭建前端项目模块化开发的基本骨架。

    webpack简介

            webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler），主要用于编译JavaScript模块，基于webpack的cli脚手架或者API可实现前端应用的模块化开发。

            当webapck处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将这些模块打包成一个或者多个bundle。

    webpack起步

            （1）初始化项目。创建webpack项目，需要使用npm init命令初始化一个项目，然后使用如下命令在本地安装webpack依赖、webpack-cli脚手架，其中：后者webpack-cli脚手架工具用于在命令行中运行webpack。

    1. npm init -y
    2. npm install webpack webpack-cli --save-dev

            （2）创建入口文件。创建index.html文件、src/index.js，其中：后者src目录下的index.js我们称之为“入口文件（entry point）”，index.js通常需要在webpack.config.js配置文件中指定，并将其作为webpack应用构建的入口脚本文件。

             （3）配置文件编写。编写一个最简单的配置文件如下，

    1. /**
    2.  * webpack项目的配置文件
    3.  */
    4. const path = require("path");
    5.  
    6. module.exports = {
    7.   //提供 mode 配置选项，告知 webpack 使用相应模式的内置优化-[也可以从cli中传递模式参数]
    8.   mode:"production",
    9.   //入口文件配置
    10.   entry:"./src/index.js",
    11.   //出口文件
    12.   output:{
    13.     filename: '[name].js',//占位符[name],保证文件名唯一
    14.     path: path.resolve(__dirname,"dist"),//指定输出文件保存在根目录下的dist文件夹中
    15.   }
    16. };

             （4）配置package.json，添加npm命令，用于替换npx webpack的运行方式。

             （5）安装lodash.js第三方依赖模块（该模块提供了一系列用于处理数组、字符串、数学运算相关的JavaScript 实用工具库），并编写入口文件src/index.js、入口页面index.html。

    #安装lodash第三方依赖

    npm install --save lodash

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Cesium-Webpacktitle>
    8.   
    9. head>
    10. <body>
    11.   <script src="./src/index.js">script>
    12. body>
    13. html>
    1. import _ from 'lodash';//使用webpack管理JavaScript资源
    2. /**
    3.  * 创建一个子组件
    4.  */
    5. function component(){
    6.   const element = document.createElement("div");
    7.   element.innerHTML = _.join(["hello","webpack"],' ');
    8.   return element;
    9. }
    10.  
    11. document.body.appendChild(component());

            （7）执行如下命令，打包资源，可以看到项目根目录下出现了一个main.js——JavaScript脚本文件，这文件就是之前我们编写好的代码和依赖库中的脚本合并压缩之后的、可以在浏览器端直接运行的JS脚本文件。

    npm run build

            

             （8）注意到：webpack默认打包时，不会生成index.html主页面，那么，此处我们可以手动提供一个，并使用script标签引入main.js脚本库。

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Cesium-Webpacktitle>
    8. head>
    9. <body>
    10.   <script src="main.js">script>
    11. body>
    12. html>

            （9） 此时，双击打开dist输出目录下的index.html文件，就可以看到显示效果。 

    webpack：管理静态资源

            那么，webpack如何管理资源，例如图片、字体呢？以下部分进行详细介绍。

            webpack通过loader引入除了JavaScript以外任何类型的文件，即：Webpack除了用于管理相互之间具有依赖关系的JavaSript模块，同样可以用来构建网站或者web应用程序中的所有非JavaScript内容。

    webpack：加载CSS资源

            我们尝试编写一个global.css，来执行全局样式——DOM元素边界的清零操作。注意：webpack可以将所有资源视为一个模块化应用的子模块，也就是说，我们将使用import命令导入一个global.css全局样式文件。

            （1）安装style-loader和css-loader，命令如下，

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

            （2）通过modules属性，配置loader，修改webpack.config.js文件的内容如下，

    1. /**
    2.  * webpack项目的配置文件
    3.  */
    4. const path = require("path");
    5.  
    6. module.exports = {
    7.   //提供 mode 配置选项，告知 webpack 使用相应模式的内置优化-[也可以从cli中传递模式参数]
    8.   mode:"production",
    9.   //入口文件配置
    10.   entry:"./src/index.js",
    11.   //出口文件
    12.   output:{
    13.     filename: '[name].js',//占位符[name],保证文件名唯一
    14.     path: path.resolve(__dirname,"dist"),//指定输出文件保存在根目录下的dist文件夹中
    15.   },
    16.   //模块配置
    17.   module:{
    18.     rules:[
    19.       {
    20.         test:/\.css$/,//正则表达式-匹配css样式文件
    21.         use:['style-loader','css-loader'],//配置样式加载器
    22.       }
    23.     ]
    24.   }
    25. };

            （3）尝试通过如下命令，导入src/global.css样式文件。

    import './global.css' //导入全局样式文件

             （4）运行构建/打包命令：npm run build，重新打开dist文件夹下的index.html文件，查看网页样式。如下图所示，使用import命令导入的样式文件已经生效了。

     webpack：加载图片资源

            现在，我们在src目录下新建一个assets子文件夹，用来存放一张照片，并尝试在webpack项目中，使用import命令引入，并通过原生JavaScript编程，将其插入index.html页面中展示。

             （1）安装file-loader。安装命令如下，

    npm install --save-dev file-loader

            （2）修改webpack.config.js配置文件内容，如下所示，

    1. /**
    2.  * webpack项目的配置文件
    3.  */
    4. const path = require("path");
    5.  
    6. module.exports = {
    7.   //提供 mode 配置选项，告知 webpack 使用相应模式的内置优化-[也可以从cli中传递模式参数]
    8.   mode:"production",
    9.   //入口文件配置
    10.   entry:"./src/index.js",
    11.   //出口文件
    12.   output:{
    13.     filename: '[name].js',//占位符[name],保证文件名唯一
    14.     path: path.resolve(__dirname,"dist"),//指定输出文件保存在根目录下的dist文件夹中
    15.   },
    16.   //模块配置
    17.   module:{
    18.     rules:[
    19.       //css加载器
    20.       {
    21.         test:/\.css$/,//正则表达式-匹配css样式文件
    22.         use:['style-loader','css-loader'],//配置样式加载器
    23.       },
    24.       //图片加载器
    25.       {
    26.         test:/\.(png|svg|jpg|gif)$/,//正则表达式-匹配图片文件
    27.         use:['file-loader'],//配置图片文件加载器
    28.       }
    29.     ]
    30.   }
    31. };

            （3）修改index.js入口文件的代码如下，并使用import命令导入image图片资源，将其添加到index.html页面中，代码如下，

    1. import _ from 'lodash' //使用webpack管理JavaScript资源
    2. import './global.css' //导入全局样式文件
    3. import img_hg from './assets/xjqxz.jpg' //导入图片资源
    4. /**
    5.  * 创建一个子组件
    6.  */
    7. function component() {
    8.   const documentFrags = document.createDocumentFragment();
    9.   //创建DOM元素
    10.   const div = document.createElement('div')
    11.   div.innerHTML = _.join(['hello', 'webpack'], ' ')
    12.   //创建img元素
    13.   const image = document.createElement("img");
    14.   image.src = img_hg;
    15.   //添加到文档片段容器中
    16.   documentFrags.appendChild(div);
    17.   documentFrags.appendChild(image);
    18.   //返回文档片段
    19.   return documentFrags;
    20. }
    21.  
    22. document.body.appendChild(component())

            （4）重新执行打包命令：npm run build，可以看到dist目录下出现了刚才使用的图片文件，然后打开dist/index.html页面，查看执行效果如下，图片资源引入成功。

      webpack：加载字体资源

            现在，我们尝试引入一种电子表和其它样式的字体资源。在webapck项目中，仍然可以使用file-laoder文件加载器在加载字体资源（实际上，file-loader加载器可以用于加载任何类型的文件）。

            （1）首先，我们需要更新webpack.config.js配置文件，将file-loader加载器应用于字体资源。

    1. /**
    2.  * webpack项目的配置文件
    3.  */
    4. const path = require("path");
    5.  
    6. module.exports = {
    7.   //提供 mode 配置选项，告知 webpack 使用相应模式的内置优化-[也可以从cli中传递模式参数]
    8.   mode:"production",
    9.   //入口文件配置
    10.   entry:"./src/index.js",
    11.   //出口文件
    12.   output:{
    13.     filename: '[name].js',//占位符[name],保证文件名唯一
    14.     path: path.resolve(__dirname,"dist"),//指定输出文件保存在根目录下的dist文件夹中
    15.   },
    16.   //模块配置
    17.   module:{
    18.     rules:[
    19.       //css加载器
    20.       {
    21.         test:/\.css$/,//正则表达式-匹配css样式文件
    22.         use:['style-loader','css-loader'],//配置样式加载器
    23.       },
    24.       //图片加载器
    25.       {
    26.         test:/\.(png|svg|jpg|gif)$/,//正则表达式-匹配图片文件
    27.         use:['file-loader'],//配置图片文件加载器
    28.       },
    29.       //字体资源加载器
    30.       {
    31.         test:/\.(woff|woff2|eot|ttf|otf)$/,//正则表达式-匹配字体资源
    32.         use:['file-loader'],//配置字体资源加载器
    33.       }
    34.     ]
    35.   }
    36. };

            （2）其次，我们在src/assets文件夹下新建一个fonts子文件夹，用来存放字体资源。

             （3）接下来，我们尝试在global.css全局样式文件中，使用@font-face来注册字体，使用这两种字体。

    1. /* 注册字体 */
    2. /* 电子表字体 */
    3. @font-face {
    4.   font-family: DS_DIGIT;
    5.   src: url('./assets/fonts/DS-DIGIT.TTF');
    6.   font-weight:400 ;
    7.   font-style: normal;
    8. }
    9. /* 站酷高端黑字体 */
    10. @font-face {
    11.   font-family: ZK_BLACK;
    12.   src: url('./assets/fonts/zk_black.woff') format('woff'),url('./assets/fonts/zk_black.woff2') format('woff2');
    13.   font-weight:400 ;
    14.   font-style: normal;
    15. }
    16.  
    17. *,html,body{
    18.   margin: 0;
    19.   padding: 0;
    20.   box-sizing: border-box;
    21.   background-color: skyblue;
    22. }

            （4）重新打包，打开dist文件夹下的index.html，可以看到，两种字体文件引入成功。

     webpack：加载各种文件

             除了图片和字体资源，webpack还可以用于加载各种数据文件，例如：JSON 文件，CSV、TSV 和 XML。类似于NodeJS，webpack对JSON格式天然支持，可以直接使用import命令导入JSON文件，默认运行正常。但是，要导入CSV、TSV和XML文件，就要使用csv-loader和xml-loader，以下其进行配置。

            （1）使用如下命令，安装对应的加载器，

    npm install --save-dev csv-loader xml-loader

            （2）修改webpack.config.js配置文件，为CSV、TSV、XML文件提供对应的加载器。

    1. /**
    2.  * webpack项目的配置文件
    3.  */
    4. const path = require("path");
    5.  
    6. module.exports = {
    7.   //提供 mode 配置选项，告知 webpack 使用相应模式的内置优化-[也可以从cli中传递模式参数]
    8.   mode:"production",
    9.   //入口文件配置
    10.   entry:"./src/index.js",
    11.   //出口文件
    12.   output:{
    13.     filename: '[name].js',//占位符[name],保证文件名唯一
    14.     path: path.resolve(__dirname,"dist"),//指定输出文件保存在根目录下的dist文件夹中
    15.   },
    16.   //模块配置
    17.   module:{
    18.     rules:[
    19.       //css加载器
    20.       {
    21.         test:/\.css$/,//正则表达式-匹配css样式文件
    22.         use:['style-loader','css-loader'],//配置样式加载器
    23.       },
    24.       //图片加载器
    25.       {
    26.         test:/\.(png|svg|jpg|gif)$/,//正则表达式-匹配图片文件
    27.         use:['file-loader'],//配置图片文件加载器
    28.       },
    29.       //字体资源加载器
    30.       {
    31.         test:/\.(woff|woff2|eot|ttf|otf)$/,//正则表达式-匹配字体资源
    32.         use:['file-loader'],//配置字体资源加载器
    33.       },
    34.       //配置CSV、TSV加载器
    35.       {
    36.         test:/\.(csv|tsv)$/,
    37.         use:"csv-loader",
    38.       },
    39.       //配置XML加载器
    40.       {
    41.         test:/\.xml$/,
    42.         use:"xml-loader",
    43.       }
    44.     ]
    45.   }
    46. };

            （3）然后我们在src/assets文件夹下创建data子文件夹，并放入几个文件，包括：json、csv、xml格式的，

             （4）尝试在index.js入口文件中引入三个文件，并打印内容。

    1. import grid_json from './assets/data/grid.json' //导入json文件
    2. import result_csv from './assets/data/result.csv' //导入csv文件
    3. import test_xml from './assets/data/test.xml' //导入xml文件
    4. console.log(grid_json)
    5. console.log(result_csv)
    6. console.log(test_xml)

            （5）重新打包，并打开dist/index.hml文件，查看控制台的内容。可发现：经过webapck的处理，导入的数据资源，已经被转换为JavaScript的Object对象或者Array对象数组。

    webpack资源管理的优势

            以上我们的项目结构是：将全部的静态资源放在src/assets文件夹中，尽管在前端开发中这是一种经常性的做法，但是，webpakc的这种模块化资源的管理能力，可以使我们将模块和各自的资源文件放在一起，从而减少维护/开发压力。

    webpack：管理输出

    webpack：自动构建dist目录

            到目前为止，我们的dist目录下的index.html文件，仍然是手动编写，然后拷贝过去的。这种做法未免有些low，并且，如果是真正的大型项目开发，随着应用程序增长，并且一旦开始对文件名使用哈希(hash)]并输出多个 bundle，手动地对 index.html 文件进行管理，一切就会变得困难起来。

           接下来，我们尝试在webpack中配置插件，使dist目录下的index.html文件可以自动生成。

            （1）先清空dist目录中的所有文件；

            （2）安装HtmlWebpackPlugin插件，该插件简化了HTML文件的创建，可以为webpack包提供服务，这对于上述情况（经常性发生变化的、包含hash哈希字符的webpack资源十分有用），因为这个插件可以自动为我们生成一个HTML文件。

    npm install --save-dev html-webpack-plugin

            （3）修改webpack.congfig.js配置文件的内容，使得HtmlWebpackPlugin插件生效。

    1. /**
    2.  * webpack项目的配置文件
    3.  */
    4. const HtmlWebpackPlugin = require('html-webpack-plugin');
    5. const path = require("path");
    6.  
    7. module.exports = {
    8.   //提供 mode 配置选项，告知 webpack 使用相应模式的内置优化-[也可以从cli中传递模式参数]
    9.   mode:"production",
    10.   //入口文件配置
    11.   entry:"./src/index.js",
    12.   //出口文件
    13.   output:{
    14.     filename: '[name].js',//占位符[name],保证文件名唯一
    15.     path: path.resolve(__dirname,"dist"),//指定输出文件保存在根目录下的dist文件夹中
    16.   },
    17.   //模块配置
    18.   module:{
    19.     rules:[
    20.       //css加载器
    21.       {
    22.         test:/\.css$/,//正则表达式-匹配css样式文件
    23.         use:['style-loader','css-loader'],//配置样式加载器
    24.       },
    25.       //图片加载器
    26.       {
    27.         test:/\.(png|svg|jpg|gif)$/,//正则表达式-匹配图片文件
    28.         use:['file-loader'],//配置图片文件加载器
    29.       },
    30.       //字体资源加载器
    31.       {
    32.         test:/\.(woff|woff2|eot|ttf|otf)$/,//正则表达式-匹配字体资源
    33.         use:['file-loader'],//配置字体资源加载器
    34.       },
    35.       //配置CSV、TSV加载器
    36.       {
    37.         test:/\.(csv|tsv)$/,
    38.         use:"csv-loader",
    39.       },
    40.       //配置XML加载器
    41.       {
    42.         test:/\.xml$/,
    43.         use:"xml-loader",
    44.       }
    45.     ]
    46.   },
    47.   //插件配置
    48.   plugins:[
    49.     new HtmlWebpackPlugin(),
    50.   ]
    51. };

            （4）重新运行打包命令：npm run build，dist输出目录内容和index.html自动构建的内容如下，

    1. html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>Webpack Apptitle>
    7.   <meta name="viewport" content="width=device-width,initial-scale=1">
    8.   <script defer="defer" src="main.js">script>
    9. head>
    10.  
    11. <body>body>
    12.  
    13. html>

    webpack：自动清理dist目录

            通常地，按照以上的方式去打包项目，生成在dist目录中的文件只会执行覆盖操作，而不会执行清理操作，时间一长，这对于项目的打包发布是十分不友好的。

            因此，可以使用webpack官网推荐的clean-webpack-plugin管理插件，它会自动帮我们在每次执行npx webapck或者npm run build命令之前，先去清理dist目录，然后再生成新的内容。

            （1）安装命令如下，

    npm install clean-webpack-plugin --save-dev

            （2）修改webpack.config.js，在plugins节点中为其配置，

    1. /**
    2.  * webpack项目的配置文件
    3.  */
    4. const HtmlWebpackPlugin = require('html-webpack-plugin');
    5. const {CleanWebpackPlugin} = require('clean-webpack-plugin');
    6. const path = require("path");
    7.  
    8. module.exports = {
    9.   //提供 mode 配置选项，告知 webpack 使用相应模式的内置优化-[也可以从cli中传递模式参数]
    10.   mode:"production",
    11.   //入口文件配置
    12.   entry:"./src/index.js",
    13.   //出口文件
    14.   output:{
    15.     filename: '[name].js',//占位符[name],保证文件名唯一
    16.     path: path.resolve(__dirname,"dist"),//指定输出文件保存在根目录下的dist文件夹中
    17.   },
    18.   //模块配置
    19.   module:{
    20.     rules:[
    21.       //css加载器
    22.       {
    23.         test:/\.css$/,//正则表达式-匹配css样式文件
    24.         use:['style-loader','css-loader'],//配置样式加载器
    25.       },
    26.       //图片加载器
    27.       {
    28.         test:/\.(png|svg|jpg|gif)$/,//正则表达式-匹配图片文件
    29.         use:['file-loader'],//配置图片文件加载器
    30.       },
    31.       //字体资源加载器
    32.       {
    33.         test:/\.(woff|woff2|eot|ttf|otf)$/,//正则表达式-匹配字体资源
    34.         use:['file-loader'],//配置字体资源加载器
    35.       },
    36.       //配置CSV、TSV加载器
    37.       {
    38.         test:/\.(csv|tsv)$/,
    39.         use:"csv-loader",
    40.       },
    41.       //配置XML加载器
    42.       {
    43.         test:/\.xml$/,
    44.         use:"xml-loader",
    45.       }
    46.     ]
    47.   },
    48.   //插件配置
    49.   plugins:[
    50.     new HtmlWebpackPlugin({
    51.       title: 'Output Management'
    52.     }),
    53.     new CleanWebpackPlugin(),//指定要清理的目录
    54.   ]
    55. };

        

    webpack：打包进度条

            除了第三方插件，webapck也提供了一些内置插件，其中之一就是ProgressPlugin——用于在打包前端项目时显示打包进度条，只需要修改webpack.cionfig.js配置文件的内容为如下即可。

    1. /**
    2.  * webpack项目的配置文件
    3.  */
    4. const HtmlWebpackPlugin = require('html-webpack-plugin');
    5. const {CleanWebpackPlugin} = require('clean-webpack-plugin');
    6. const webpack = require('webpack'); //获取webpack内置插件
    7. const path = require("path");
    8.  
    9. module.exports = {
    10.   //提供 mode 配置选项，告知 webpack 使用相应模式的内置优化-[也可以从cli中传递模式参数]
    11.   mode:"production",
    12.   //入口文件配置
    13.   entry:"./src/index.js",
    14.   //出口文件
    15.   output:{
    16.     filename: '[name].js',//占位符[name],保证文件名唯一
    17.     path: path.resolve(__dirname,"dist"),//指定输出文件保存在根目录下的dist文件夹中
    18.   },
    19.   //模块配置
    20.   module:{
    21.     rules:[
    22.       //css加载器
    23.       {
    24.         test:/\.css$/,//正则表达式-匹配css样式文件
    25.         use:['style-loader','css-loader'],//配置样式加载器
    26.       },
    27.       //图片加载器
    28.       {
    29.         test:/\.(png|svg|jpg|gif)$/,//正则表达式-匹配图片文件
    30.         use:['file-loader'],//配置图片文件加载器
    31.       },
    32.       //字体资源加载器
    33.       {
    34.         test:/\.(woff|woff2|eot|ttf|otf)$/,//正则表达式-匹配字体资源
    35.         use:['file-loader'],//配置字体资源加载器
    36.       },
    37.       //配置CSV、TSV加载器
    38.       {
    39.         test:/\.(csv|tsv)$/,
    40.         use:"csv-loader",
    41.       },
    42.       //配置XML加载器
    43.       {
    44.         test:/\.xml$/,
    45.         use:"xml-loader",
    46.       }
    47.     ]
    48.   },
    49.   //插件配置
    50.   plugins:[
    51.     new webpack.ProgressPlugin(),//打包进度条
    52.     new HtmlWebpackPlugin({
    53.       title: 'Output Management'
    54.     }),
    55.     new CleanWebpackPlugin(),//指定要清理的目录
    56.   ]
    57. };

    webpack开发配置

    webpack：错误追踪

            通常的，我们在开发时，非常乐于看到开发工具能够直接提示我们：代码报错的文件、位置信息，而不是泛泛的告诉你一声：代码运行错误，这样的错误提示是没有意义的。

            为了追踪代码中的出错位置，我们可以使用source map配置项，在启用此配置项时，JavaScript内部就会通过一中反映射，将打包后的代码中错处的问题，映射到打包之前的文件之中，并进行提示。

            （1）修改webapck.config.js配置文件中的配置项，

    1. /**
    2.  * webpack项目的配置文件
    3.  */
    4. const HtmlWebpackPlugin = require('html-webpack-plugin');
    5. const {CleanWebpackPlugin} = require('clean-webpack-plugin');
    6. const webpack = require('webpack'); //获取webpack内置插件
    7. const path = require("path");
    8.  
    9. module.exports = {
    10.   //提供 mode 配置选项，告知 webpack 使用相应模式的内置优化-[也可以从cli中传递模式参数]
    11.   mode:"production",
    12.   //入口文件配置
    13.   entry:"./src/index.js",
    14.   //出口文件
    15.   output:{
    16.     filename: '[name].js',//占位符[name],保证文件名唯一
    17.     path: path.resolve(__dirname,"dist"),//指定输出文件保存在根目录下的dist文件夹中
    18.   },
    19.   devtool: 'inline-source-map',//source-map配置
    20.   //模块配置
    21.   module:{
    22.     rules:[
    23.       //css加载器
    24.       {
    25.         test:/\.css$/,//正则表达式-匹配css样式文件
    26.         use:['style-loader','css-loader'],//配置样式加载器
    27.       },
    28.       //图片加载器
    29.       {
    30.         test:/\.(png|svg|jpg|gif)$/,//正则表达式-匹配图片文件
    31.         use:['file-loader'],//配置图片文件加载器
    32.       },
    33.       //字体资源加载器
    34.       {
    35.         test:/\.(woff|woff2|eot|ttf|otf)$/,//正则表达式-匹配字体资源
    36.         use:['file-loader'],//配置字体资源加载器
    37.       },
    38.       //配置CSV、TSV加载器
    39.       {
    40.         test:/\.(csv|tsv)$/,
    41.         use:"csv-loader",
    42.       },
    43.       //配置XML加载器
    44.       {
    45.         test:/\.xml$/,
    46.         use:"xml-loader",
    47.       }
    48.     ]
    49.   },
    50.   //插件配置
    51.   plugins:[
    52.     new webpack.ProgressPlugin(),//打包进度条
    53.     new HtmlWebpackPlugin({
    54.       title: 'Output Management'
    55.     }),
    56.     new CleanWebpackPlugin(),//指定要清理的目录
    57.   ]
    58. };

            （2）我们故意在index.js中加入一句代码如下，

             （3）重新打包，并运行程序，看到如下的出错提示，这样，根据错误提示信息，我们看可以直接追踪到index.js文件的38行，这正是我们刚才故意抛出Error错误的地方。

    webpack：启用观察者模式

            webpack当前搭建的项目，每次修改之后，都需要重新打包，然后找到dist/index.html重新打开，才能看到修改之后的效果，这种重复性的操作在实际开发中显得异常繁琐。我们需要一种插件/配置，可以在修改代码之后，实时更新看到index.html视图中修改之后的内容。

            要实现此种效果，只需要在package.json文件中的scripts标签中，添加如下脚本即可，

    "watch": "webpack --watch",

            然后，我们使用命令：npm run watch，启动项目，然而却不会退出命令行。这是因为 script 脚本还在观察文件。现在，webpack 观察文件的同时，我们先移除我们之前引入的错误：

             此时，我们注释掉刚才的throw new Error()抛出错误的语句，然后刷新浏览器，即可看到最新的效果。

             从此种行为可以得到：观察者模式下，如果其中一个文件被更新，代码将被重新编译，所以你不必手动运行整个构建。

     webpack：webpack-dev-server本地服务器

           webpack的观察者模式帮我们解决了自动编译/构建的问题，但是，在每次修改代码之后，我们仍然需要手动刷新浏览器，才可以看到最新的内容，这显然也不是十分友好。

            因此，我们可以通过使用 webpack-dev-server搭建一个本地服务器，使其能够实时重新加载(live reloading)，实现类似于java后端的热部署操作。

            （1）安装webpack-dev-server依赖包，

    npm install --save-dev webpack-dev-server

            （2）修改webpack.config.js配置文件，使得webpack-dev-server可以起作用，

    1. /**
    2.  * webpack项目的配置文件
    3.  */
    4. const HtmlWebpackPlugin = require('html-webpack-plugin');
    5. const {CleanWebpackPlugin} = require('clean-webpack-plugin');
    6. const webpack = require('webpack'); //获取webpack内置插件
    7. const path = require("path");
    8.  
    9. module.exports = {
    10.   //提供 mode 配置选项，告知 webpack 使用相应模式的内置优化-[也可以从cli中传递模式参数]
    11.   mode:"production",
    12.   //入口文件配置
    13.   entry:"./src/index.js",
    14.   //出口文件
    15.   output:{
    16.     filename: '[name].js',//占位符[name],保证文件名唯一
    17.     path: path.resolve(__dirname,"dist"),//指定输出文件保存在根目录下的dist文件夹中
    18.   },
    19.   devtool: 'inline-source-map',//source-map配置
    20.   //devserver配置
    21.   devServer:{
    22.     static: './dist',//指定dist目录下的内容为devServer实时监视的目录
    23.   },
    24.   //模块配置
    25.   module:{
    26.     rules:[
    27.       //css加载器
    28.       {
    29.         test:/\.css$/,//正则表达式-匹配css样式文件
    30.         use:['style-loader','css-loader'],//配置样式加载器
    31.       },
    32.       //图片加载器
    33.       {
    34.         test:/\.(png|svg|jpg|gif)$/,//正则表达式-匹配图片文件
    35.         use:['file-loader'],//配置图片文件加载器
    36.       },
    37.       //字体资源加载器
    38.       {
    39.         test:/\.(woff|woff2|eot|ttf|otf)$/,//正则表达式-匹配字体资源
    40.         use:['file-loader'],//配置字体资源加载器
    41.       },
    42.       //配置CSV、TSV加载器
    43.       {
    44.         test:/\.(csv|tsv)$/,
    45.         use:"csv-loader",
    46.       },
    47.       //配置XML加载器
    48.       {
    49.         test:/\.xml$/,
    50.         use:"xml-loader",
    51.       }
    52.     ]
    53.   },
    54.   //插件配置
    55.   plugins:[
    56.     new webpack.ProgressPlugin(),//打包进度条
    57.     new HtmlWebpackPlugin({
    58.       title: 'Output Management'
    59.     }),
    60.     new CleanWebpackPlugin(),//指定要清理的目录
    61.   ]
    62. };

            （3）修改package.json的scripts命令脚本，添加一个 新的script 脚本，可以直接运行开发服务器(dev server)："start": "webpack-dev-server --open"，

             （4）现在，在命令行中运行 npm start，就会看到浏览器自动加载页面。如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码。

             （5）此时，浏览器中显示警告信息，尽管这不是Error错误，但是，在webpack程序中，这仍然会阻断程序的运行，我们可以对其进行抑制即可，

     截止到目前，我们的package.json文件结构如下，

    1. {
    2.   "name": "cesium-webpack",
    3.   "version": "1.0.0",
    4.   "description": "webpack-Cesium",
    5.   "private": true,
    6.   "main": "index.js",
    7.   "scripts": {
    8.     "test": "echo \"Error: no test specified\" && exit 1",
    9.     "build": "webpack",
    10.     "watch": "webpack --watch",
    11.     "start": "webpack-dev-server --open"
    12.   },
    13.   "author": "Xwd",
    14.   "license": "ISC",
    15.   "devDependencies": {
    16.     "clean-webpack-plugin": "^4.0.0",
    17.     "css-loader": "^6.7.1",
    18.     "csv-loader": "^3.0.5",
    19.     "file-loader": "^6.2.0",
    20.     "html-webpack-plugin": "^5.5.0",
    21.     "style-loader": "^3.3.1",
    22.     "webpack": "^5.74.0",
    23.     "webpack-cli": "^4.10.0",
    24.     "webpack-dev-server": "^4.11.1",
    25.     "xml-loader": "^1.2.1"
    26.   },
    27.   "dependencies": {
    28.     "lodash": "^4.17.21"
    29.   }
    30. }

  • 相关阅读:
    C++Prime Plus(6)
    网络安全（黑客）技术——自学2024
    【美羊羊拿金币问题】
    C++从入门到起飞之——缺省参数/函数重载/引用全方位剖析！
    LeetCode【240】搜索二维矩阵
    看完年薪 30W~120W 程序员分别需要掌握的技能栈，我彻底悟了
    ffmpeg.autogen使用问题
    MySQL索引
    经典论文阅读densenet(Densely Connected Convolutional Networks)
    mysql基本操作1
  • 原文地址：https://blog.csdn.net/weixin_43524214/article/details/127435578