webpack入门基础

 1. 什么是webpack

WebPack可以理解为模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（vue，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
前端模块化开发，使用第三方的文件往往需要进行额外的处理才能让浏览器识别，所以需要前端打包工具。

2. Webpack工作原理及优点

工作原理：把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的文件。Webpack比其他打包工具的处理速度更快更直接，能打包更多不同类型的文件。

3. Hello webpack例子

                                                    

 

  demo结构                                                webpack.config.js                                                                                       bar.js                                                                      index.js                                                      运行后的结果

• 安装webpack ’npm install –save-dev webpack‘
• package.json定义启动脚本"build": "node build.js"
• build.js执行webpack的打包流程
• webpack.config.js定义打包细节
• index.js为打包的入口文件
• dist目录中的bundle.js为打包结果

4. config文件基本配置

                对应的打包目录结构

                                                                                                                        

5. loader

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。
以css和vue文件为例。说白了，webpack本身自能处理js文件，编译其他文件需要使用不同的loader。

同上面的示例运行情况

 6. plugins

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），插件用来完成编译构建中loader完成不了的其他任务，如清理构建环境、动态生成html等。

7.调试

Webpack提供devtool配置属性

本示例使用cheap-module-eval-source-map调试如下图

 

 这只是最简单的webpack基础内容

最终的使用还需要在项目中使用后，不断学习新的配置优化前端打包效率