19第7章Vue脚手架第4节webpack基础.pptxVIP

第7章 ：Vue脚手架 《Vue应用程序开发》 目 录 CONTENTS 7.4webpack入门 webpack简介 7.4webpack入门 Vue-cli脚手架中webpack配置基础 一个webpack配置文件的基本结构如下： //配置项 module.exports={ //入口 entry:{......}, //输出配置 output:{......}, //模块 module:{......}, //解析 resolve:{......}, //插件 plugins:[......], //开发服务器 devServer:{......} }; 7.4webpack入门 核心 说明 entry 定义入口文件，默认入口文件：./src/index.js output 定义出口文件，默认出口文件：./dist/main.js resolve 解析路径映射 module 定义不同的loader，让webpack能够处理非JavaScript模块 plugins 扩展webpack功能 devServer 开发服务器，用于配置webpack-dev-server选项 package.json解析 项目作为一个大家庭，每个文件都各司其职。package.json来制定名单，需要哪些npm包来参与到项目中来，npm install命令根据这个配置文件增减来管理本地的安装包。 开发环境配置 webpack.dev.conf.js开发环境配置 webpavk.base.conf.js(webpack基础配置，开发测试生产共用) config/index.js index.js是主要的配置文件，包含静态文件的路径、是否开启sourceMap等。其中，分为两个部分dev（开发环境的配置）和build（生产环境的配置）。 详情见文档：https://Vuejs-templates.github.io/webpack/env.html或/a/1190000014804826。 7.4.3webpack常用的Loaders和插件 由于 Webpack 是运行在 Node.js 之上的，一个 Loader 其实就是一个 Node.js 模块，这个模块需要导出一个函数。 这个导出的函数的工作就是获得处理前的原内容，对原内容执行处理后，返回处理后的内容 Loader 就像是一个翻译员，能把源文件经过转化后输出新的结果，并且一个文件还可以链式的经过多个翻译员翻译。一个 Loader 的职责是单一的，只需要完成一种转换。 如果一个源文件需要经历多步转换才能正常使用，就通过多个 Loader 去转换。 在你开发一个 Loader 时，请保持其职责的单一性，你只需关心输入和输出。 感谢 聆听 THANK YOU FOR LISTENING