在找一份相对完整的Webpack项目配置指南么？这里有

 

Webpack已经出来很久了，相关的文章也有很多，然而比较完整的例子却不是很多，让很多新手不知如何下脚，下脚了又遍地坑

说实话，官方文档是蛮乱的，而且有些还是错的错的。。很多配置问题只有爬过坑才知道

本文首先介绍Webpack(3)的一些基础知识，然后以一个已经完成的小Demo，逐一介绍如何在项目中进行配置

该Demo主要包含编译Sass/ES6，提取（多个）CSS文件，提取公共文件，模块热更新替换，开发与线上环境区分，使用jQuery插件的方式、页面资源引入路径自动生成（可指定生成位置），热更新编译模版文件自动生成webpack服务器中的资源路径，编写一个简单的插件，异步加载模块 等基础功能

应该能帮助大家更好地在项目中使用Webpack3来管理前端资源

本文比较啰嗦，可以直接看第四部分Webpack3配置在Demo中的应用，或者直接去Fork这个Demo边看边玩

 

Webpack已升级为v4版本，优化之后性能提升好几倍，请移步这个 webpack4项目配置Demo，以及 这篇升级优化点 

 

首先，学习Webpack，还是推荐去看官方文档，还是挺全面的，包括中文的和英文的，以及GitHub上关于webpack的项目issues，还有就是一些完整了例子，最后就是得自己练手配置，才能在过程中掌握好这枯燥的配置。

 

• 1. 为什么要用Webpack
• 2. 什么是Webpack
• 3. Webpack的基础配置
  • 1. webpack的配置方式主要有三种
    • 1. 通过cli命令行传入参数
    • 2. 通过在一个配置文件设置相应配置，导出使用
    • 3. 通过使用NodeJS的API配置
  • 2. 常见的几个配置属性
    • 1. context  绝对路径
    • 2. entry  模块入口文件设置
    • 3. resolve 处理资源的查找引用方式
    • 4. output 设置文件的输出
    • 5. devtool指定sourceMap的配置
    • 6. module指定模块如何被加载
    • 7.  plugins设置webpack配置过程中所用到的插件
• 4. Webpack3配置在Demo中的应用
  • 1. 搭建个服务器
  • 2. 设置基础项目目录
  • 3. 开发和生产环境的Webpack配置文件区分
  • 4. 设置公共模块
  • 5. 编译ES6成ES5
  • 6. 编译Sass成CSS，嵌入到页面