VUE第一天----初识webpack_webpack devtool 加#-优快云博客

这篇博客介绍了VUE第一天的学习内容，重点是webpack的使用。内容包括自定义打包的入口和出口设置，详细讲解了webpack-dev-server的安装与配置以实现实时监测，以及html-webpack-plugin插件的安装和应用。同时，博主还阐述了webpack中loader的概念，并提供了查询和安装loader的方法。最后，讨论了Source Map的用途和在不同环境下的配置策略。

VUE第一天----初识webpack

1. 自定义打包的入口和出口

在这里插入图片描述

在webpack.config.js里面操作代码：

//导入path
const path = require('path')

//使用node的导出语法向外导出一个webpack配置对象
module.exports = {
    //代表webpack运行模式,development代表开发模式，production代表上线模式
    //开发的时候一定要用development
    mode: 'development',
    // entry:'指定要处理哪个文件'
    entry: path.join(__dirname, './src/index1.js'),
    //指定生成的文件要放到哪里
    output: {
        //存放的目录
        path: path.join(__dirname, 'dist'),
        //生成的文件名
        filename: 'bundle.js'

    }
}

2.webpack插件：

2.1webpack-dev-server（实时监测实现代码）

安装：

在终端输入：

npm install webpack-dev-server@3.11.2 -D

配置：在package.json里面输入：

"scripts": {
    "dev": "webpack serve"
  },

在终端里面重新run一下，如果终端显示如下表示安装配置成功：

在这里插入图片描述
注意：

需要在网址http://localhost:8080/才能看到最新效果
修改引入文件 <script src="/bundle.js"></script>（加载和引用内存里面的bundle.js）

2.2 html-webpack-plugin插件

安装：

npm install html-webpack-plugin@5.3.2 -D

配置：（一定要注意大小写）
在这里插入图片描述

3.webpack中的loader

查询网站：npm.js
处理机制：
在这里插入图片描述
安装loader：

npm i style-loader@3.0.0 css-loader@5.2.6 -D

配置：

module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']}
        ]
    }

4.Source Map

开发环境下默认生成的Source Map,记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。解决：
在这里插入图片描述
添加：devtool: 'eval-source_map',

注意：

在生产环境下，如果省略了devtool选项，则最终生成的文件中不包含Source Map。这能够防止原始代码通过Source Map的形式暴露给别有所图之人。
在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将devtool的值设置为nosources-source-map。

在发布的时候设置为： devtool: 'nosources-source-map',

Source Map最佳实践：

在这里插入图片描述
!!!
实际开发中不需要我们配置webpack:

实际开发中会使命令行工具（俗称CLI一键生成带有webpack的项目
开箱即用,所有webpack配置项都是现成的!
我们只需要知道webpack中的基本概念即可!