webpack 模块加载兼打包工具——入门或进阶

一、 说点废话

1.webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
2.能被模块化的不仅仅是 JS 了。
3.开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等

二、 安装（首先你得知道npm包管理器？）

npm install webpack -g    //全局安装

安装到项目目录（比如我的项目目录是e:\develop，命令行切换到该项目下）

npm init
npm install webpack --save-dev

webpack基础安装完成

---

三、开始管理我们的项目

首先需要在项目目录里创建一个配置文件，说白了就是运行任务文件！webpack.config.js，所有打包，模块化管理都必须基于这个文件配置

在使用中会用到并需要安装的一丢丢 Loader，什么是 Loader？就是比如说我们项目中用了sass这种编译文件，那么我们怎么使用webpack实现编译？那就要用到loader了！
我的理解就是：本身在安装webpack的时候除了内置的一丢丢工具，其实我们还需要好多其他工具，那么就是Loader了！！

如下总结了一些Loader：

//**用于独立打包css文件**
npm install --save-dev extract-text-webpack-plugin  

//**babel es2015编译到es5 (babel-loader,babel-core,babel-preset-es2015)**
npm install --save-dev babel-loader 
npm install --save-dev babel-core 
npm install --save-dev babel-preset-es2015

//**es6安全使用脚架**
npm install --save-dev babel-polyfill   

//**项目安装webpack-dev-server服务**
npm install --save-dev webpack-dev-server  

//**全局安装webpack-dev-server服务**
npm install webpack-dev-server -g  

//**项目安装html-webpack-plugin@2r服务**
npm install html-webpack-plugin@2 --save-dev

//
css-loader 处理css中路径引用等问题
style-loader 动态把样式写入css
sass-loader scss编译器
less-loader less编译器
postcss-loader scss再处理
url-loader 图片处理
file-loader  文件处理
ejs-loader  ejs模版处理

webpack.config.js配置如下：

var webpack = require('webpack');
var path = require("path");
module.exports = {

    //页面入口文件配置
    //左边的为目标位置，右边为源文件位置
    entry: {
   
        "dev/build":__dirname+'/src/index.js',
    },

    //入口文件输出配置