sourcemap没有webpack:文件夹

关于webpack.config.js文件没有的原因

Vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js。

vue-cli3 之后创建的时候并不会自动创建 vue.config.js，因为这个是个可选项，所以一般都是需要修改 webpack 的时候才会自己创建一个 vue.config.js。

vue-cil3之后创建项目后的目录结构如下

├── README.md # 说明

|-- dist # 打包后文件夹

├── babel.config.js # babel语法编译

├── package-lock.json

├── public # 静态文件夹,这类资源将会直接被拷贝，而不会核闭经过 webpack 的处理。

│ ├改皮裂── favicon.ico

│ └── index.html #入口页面

└── src # 源码目录

├── App.vue - 页面

├── assets - 静态目录,这类引用会被 webpack 处理。

│ └── logo.png

├── components 组件

│ └── HelloWorld.vue

└── main.js # 入口文件，加载公共组件

│—— vue.config.js# 配置文件，需自行配置

│—— .gitignore # git忽略上传的文件格式

│—— babel.config.js # babel语法编译

│—— package.json # 项目基本信息

│—— .env # 环境变量和模式，需自行配置

│—— .eslintrc.js # ES-lint校验

开发者一般不需要再去知道 webpack 做了什么，所以没有暴露 webpack 的配置文件，但你依然可以创建 vue.config.js 去修改默认的 webpack。

Vue-cli3+ 和 Vue-cli2 的最大区别：在于内置了很多配置，没有 build 文件夹和 config 的配置。但是在开发中，避免不了的还是需要个性化的配置，这里讲一下 vue.config.js 的配置。

手动创建一握并个 vue.config.js

module.exports = {

publicPath: './', // 基本路径

outputDir: 'dist', // 构建时的输出目录

assetsDir: 'static', // 放置静态资源的目录

indexPath: 'index.html', // html 的输出路径

filenameHashing: true, // 文件名哈希值

lintOnSave: false, // 是否在保存的时候使用 `eslint-loader` 进行检查。

// 组件是如何被渲染到页面中的？ （ast：抽象语法树；vDom：虚拟DOM）

// template --->ast --->render --->vDom --->真实的Dom --->页面

// runtime-only：将template在打包的时候，就已经编译为render函数

// runtime-compiler：在运行的时候才去编译template

runtimeCompiler: false,

transpileDependencies: [], // babel-loader 默认会跳过 node_modules 依赖。

productionSourceMap: false, // 是否为生产环境构建生成 source map

//调整内部的 webpack 配置

configureWebpack: () =>{ },

chainWebpack: () =>{ },

// 配置 webpack-dev-server 行为。

devServer: {

open: true, // 编译后默认打开浏览器

host: '0.0.0.0', // 域名

port: 8080, // 端口

https: false, // 是否https

// 显示警告和错误

overlay: {

warnings: false,

errors: true

},

}

}

没有配置vue.config.js之前，打包后的文件如下

注意：此时直接打开index.html文件可能页面的图片没有显示

在这里插入图片描述

配置后

注意：此时dist文件底下会创建一个static文件夹，用来存放静态文件，如css、js、font、img,

此时打开index.html文件页面图片可以正常显示

入口：webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。参数定义了打包后的入口文件，可以是个字符串或数组或者是对象；如果是数组，数组中的所有文件会打包生成一个filename文件；如果是对象，可以将不同的文件构建成不同的文件。

可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认败氏值为 ./src。

entry: {

   app: './src/main.js'

  }

出口：webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。

path: 打包文察茄散件存放的绝对路径

publicPath: 网站运行时的访问路径

filename:打包后的文件名

当我们在entry中定义构建多个文件时，filename可以对应的更改为[name].js用于定义不同文件构建后的名字。

output: {

    path: config.build.assetsRoot,

    filename: '[name].js',

    publicPath: process.env.NODE_ENV ==='production'

      ? config.build.assetsPublicPath

      : config.dev.assetsPublicPath

  }

Loader：webpack 能够去处理那些非JavaScript 文件（webpack 自身只理解JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

在webpack中JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，图片等静态文件都是模块，不同模块的加载是通过模块加载器（webpack-loader）来统一管理的。loaders之间是可以串联的，一个加载器的输出可以作为下一个加载器的输入，最终返回到JavaScript上。

loader：loader的名称（必须）

include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；

query：为loaders提供额外的设置选项（可选）

{

        test: /\.vue$/,

        loader: 'vue-loader',

        options: vueLoaderConfig

      },

      {

        test: /\.js$/,

        loader: 'babel-loader',

        include: [resolve('src'),resolve('test'), resolve('node_modules/webpack-dev-server/client')]

      }

插件：插件目的在于解决 loader 无法实现的其他事。插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

plugins: [

    new webpack.DefinePlugin({

      'process.env':require('../config/dev.env')

    }),

    new webpack.HotModuleReplacementPlugin(),

  纳兆  new webpack.NamedModulesPlugin(), // HMRshows correct file names in console on update.

    new webpack.NoEmitOnErrorsPlugin(),

    //https://github.com/ampedandwired/html-webpack-plugin

    new HtmlWebpackPlugin({

      filename: 'index.html',

      template: 'index.html',

      inject: true

    }),

    // copy custom static assets

    new CopyWebpackPlugin([

      {

        from: path.resolve(__dirname,'../static'),

        to: config.dev.assetsSubDirectory,

        ignore: ['.*']

      }

    ])

  ]

一、需求

要实现webpack打包后，一旁源个全局配置文件不被打包。最终目的是我们可以在打包后的文件中修改这个文件（比如配置全局请求url前缀等等）。

要实现这个功能需要两步 *** 作。

1、 复制不打包文件

2、 引入文件

二、复制文件

这里的复制文件指将无需打包的文陪启返件复制至打包后的静态文件

三、引入文件

在html中引入不打包的配置文件，一般不打包文件都放在根目录下的static文件夹中，打包后放在dist文件夹。在html文件中使用script标签引用即可。

注意

不要使用require或者import的方式引入文件，否则该文件芦饥就会参与打包，从而使打包后修改配置的 *** 作失效。

有什么问题欢迎留言~

END

---