实例详解vue-cli中的webpack配置

本文主要介绍了vue-cli中的webpack配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

版本号

• vue-cli 2.8.1 (终端通过vue -V 可查看)

• vue 2.2.2

• webpack 2.2.1

目录结构

├── README.md
├── build
│  ├── build.js
│  ├── check-versions.js
│  ├── dev-client.js
│  ├── dev-server.js
│  ├── utils.js
│  ├── vue-loader.conf.js
│  ├── webpack.base.conf.js
│  ├── webpack.dev.conf.js
│  └── webpack.prod.conf.js
├── config
│  ├── dev.env.js
│  ├── index.js
│  └── prod.env.js
├── index.html
├── package.json
├── src
│  ├── App.vue
│  ├── assets
│  │  └── logo.png
│  ├── components
│  │  └── Hello.vue
│  └── main.js
└── static

webpack配置

主要对build目录下的webpack配置做详细分析

webpack.base.conf.js

入口文件entry

输出文件output

config的配置在config/index.js文件中

文件解析resolve

主要设置模块如何被解析。

模块解析module

如何处理项目不同类型的模块。

注: 关于query 仅由于兼容性原因而存在。请使用 options 代替。

webpack.dev.conf.js

开发环境下的webpack配置，通过merge方法合并webpack.base.conf.js基础配置

模块配置

在util.styleLoaders中的配置如下

上面的代码中调用了exports.cssLoaders(options),用来返回针对各类型的样式文件的处理方式,具体实现如下

插件配置

webpack.prod.conf.js

生产环境下的webpack配置，通过merge方法合并webpack.base.conf.js基础配置

module的处理,主要是针对css的处理

同样的此处调用了utils.styleLoaders

输出文件output

插件plugins

额外配置

npm run dev

有了上面的配置之后，下面看看运行命令npm run dev发生了什么

在package.json文件中定义了dev运行的脚本

当运行npm run dev命令时，实际上会运行dev-server.js文件

该文件以express作为后端框架

npm run build

由于package.json中的配置，运行此命令后会执行build.js文件

输出编译的文件 process.stdout.write(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + '\n\n') }) })

相关推荐：

webpack配置方法小结

node.js中的npm和webpack配置方法详解

webpack配置之后端渲染详解

以上就是实例详解vue-cli中的webpack配置的详细内容，更多请关注Gxl网其它相关文章！