Webpack

Webpack定义

从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具
作用：把很多文件打包整合到一起, 缩小项目体积, 提高加载速度

前端模块化

前端模块化的一些方案：AMD、CMD、CommonJS、ES6（浏览器不能识别它们，但是webpack可以做它们的底层支撑，方可进行模块化开发）。webpack，其中一个核心就是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。而不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用。

loader使用

什么是loader

在开发中不仅由基本的js代码处理，也需要加载css、图片、也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等。对于webpack本身的能力来说，对于这些转化是不支持的。此时给webpack扩展对应的loader就可以了

loader的使用

借助loader使js文件中要输出的hello world转换为hello js

(function(module, exports) { eval("console.log(\"hello world\")\n\n//# sourceURL=webpack:///./src/index.js?");  })

module.exports = function (source){
  return source.replace('world','js')
}

修改webpack.config.js

	module: {
		rules: [{
			test: /\.js/,
			use: [
        path.resolve(__dirname,'./loader/replaceLoader')
			]
		}]
	}

设置resolveLoader简化自定义loader的加载路径

	resolveLoader: {
		modules: ['node_modules', './loader']
	}