Webpack

At its core, webpack is a static module bundler for JavaScript applications.

从本质上讲，webpack是一个现代的JavaScript应用的静态模块打包工具。

打包：将webpack中的各种资源模块进行打包合并成一个或多个包（Bundle），在打包过程中，还可以对资源进行处理，比如压缩图片，将scss转为css，将ES6语法转为ES5语法，将TypeScript转为JavaScript等等操作。

src:源码(开发)        dist（distribution发布）

webpack ./src/main.js ./dist/bundle.js

webapck配置

文件：webpack.config.js

const path=require('path')
module.exports={
    entry:'./src/main.js',
    output:{
        path:path.resolve(_dirname,'dist'),    //动态获取路径
        filename:'bundle.js'
    },
}

npm init：配置package.json文件

 "build":"webpack"(优先使用本地安装的webpack)

//本地安装webpack
npm install webpack@3.6.0 --save-dev

---

loader

loader是webpack中的一个核心概念。webpack用来处理js代码，自动处理js之间相关的依赖。但在开发中不仅仅需要js代码处理，也需要加载css、图片，将一些ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转为css，将.jsx、.vue文件转为js文件等。webpack本身不支持这些转化，给webpack扩展对应的loader就可以了。

loader使用过程：

（1）通过npm安装需要的loader

（2）在webpack.config.js中的modules关键字下进行配置