webpack学习

webpack简介：

webpack的作用：通过commonjs的语法把所有浏览器需要发布的静态资源做相应的准备，比如资源的合并和打包。

//app.js
var module = require('./module.js');
... module.dosth()..     // 调用module依赖模块中的方法

// module.js
exports.dosth = function(){
    ....
}
// 通过webpack app.js bundle.js命令，将app.js和module.js打包在一起，并压缩道bundle.js文件输出

webpack提供了强大的loader机制和plugin机制，loader机制支持载入各种各样的静态资源，不只是js脚本，连html，css，images等各种资源都有相应的loader来做相应的依赖管理和打包；而plugin对webpack的整个流程进行一定的控制。

如： 在安装并配置了css-loader和style-loader之后，就可以通过require('./reset.css')这样的方式给网页载入一份样式表，非常方便。

---

webpack的使用

webpack的配置项主要包括一下几个部分

var config = {
    entry:[],     // 入口，定义要打包的文件
    output: {},     //出口，定义打包输出的文件；包括路径，文件名，还可能有运行时的访问路径（publicPath）参数
    resolve: {},    // 定义能够被打包的文件，文件后缀名
    module:{},      // 模块加载器loaders，定义那些后缀名的文件应该使用哪些loader；test：正则表达式，检测哪些文件需要此loader；exclude：忽略哪些文件
    plugins: []    //定义一些额外的插件
};
module.exports = config;

• 常使用的loaders

  • 处理样式：sass-loader、style-loader、css-loader；将sass转为css
  • 图片处理：url-loader、file-loader、image-webpack-loader；将图片转为base64或进行压缩
  • js处理： babel-loader、babel-preset-es2015、babel-preset-react；将es6或更高级的代码转位es5代码

• 常用到的plugins：

  • 代码热替换：HotModuleReplacementPlugin
  • 生成html文件：HtmlWebpackPlugin
  • 报错但不退出webpack进程：NoErrorsPlugin
  • 代码压缩：UglifyJsPlugin
  • 自动打开浏览器： OpenBrowserPlugin
  • 设置环境变量： DefinePlugin