laravel mix 笔记

github地址：
	https://github.com/JeffreyWay/laravel-mix

官网：
	https://laravel-mix.com/

中文文档：
	https://segmentfault.com/a/1190000015049847

对于 laravel-mix，我们只需要知道，它是位于 webpack 顶层的一个配置层，使用它会让我们的操作变得非常简单，大约 80% 的场景下都可以满足我们。

在项目中，我们基本只需要关注：
	package.json
	webpack.mix.js
	webpack.config.js 		// 默认是在 'node_modules/laravel-mix/setup/webpack.config.js'，为了我们不修改包源码，我们可以复制一份放到根目录，然后重新指定 webpack 的配置为该文件

大部分，我们的操作都是修改：webpack.mix.js

使用方式：
	let mix = require('laravel-mix');

	mix.js('src/app.js', 'dist')
	   .sass('src/app.scss', 'dist')
	   .setPublicPath('dist');			// 设置 'mix-manifest.json' 文件的生成路径

API
	1.Javascript
		1>单文件 -> 单文件
			mix.js('src/app.js', 'dist/app.js');	

		2>多文件 -> 单文件
			mix.js(['src/app.js', 'src/extra.js'], 'dist/app.js');	

		3>多文件 -> 多文件(链式调用)
			mix.js('src/app.js', 'dist/app.js')
			   .js('src/extra.js', 'dist/extra.js');

		4>mix.js() 默认支持 vue，对于 react，我们需要使用：
			mix.react() 替代，方法同 mix.js() 应该一致

	2.Library Code Splitting(库代码分离)
		这个是项目的优化，对于很多加载的第三方包，我们轻易不会修改，顶多是版本升级，对于这部分代码，可能还非常大，不需要因为我们业务代码的修改，而重新编译一次，可以持久的缓存下来。

		mix.extract(['vue', 'jquery']);

		使用了 extract() 方法，会生成3个文件：
			app.js
			vendor.js
			manifest.js

		我们在项目中，都需要引入：
			<script src="/js/manifest.js"></script>
			<script src="/js/vendor.js"></script>
			<script src="/js/app.js"></script>	

	3.BrowserSync(浏览器自动刷新)
		BrowserSync 浏览器同步测试工具，一旦检测到更改，会自动刷新页面。可以同时更新 PC、平板、手机等设备的页面，非常便于我们的开发。

		mix.browserSync('域名');
		mix.browserSync({
			proxy: '域名',
		});

	4.Hot Module Replacement(HMR - 热模块替换 - 热加载)
		也是一项非常好的技术，只会更新新修改的地方，并不会改变未修改的地方的状态。

		package.json 中的 scripts 模块里的 hot：
			hot: "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js"

		当我们项目使用的是 https，hot 中添加 --https 选项
			hot: "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --https --config=node_modules/laravel-mix/setup/webpack.config.js"

		使用 HMR，需要明白的一点是，它会在内存中来生成一个打包的 bundle.js 文件，而不是我们之前的打包文件 app.js。而且提供了我们访问该文件的 url。
			http://localhost:8080/js/bundle.js

		我们在开发环境，手动更新 url 是一个负担，而 laralel 提供的 mix() 方法，已经帮我们处理好了：
			mix('js/bundle.js')

	5.Versioning(版本化)
		mix.version();		// 会自动给编译后的文件，添加版本号

		mix.version(['js/extra.js']);		// 还可给其他文件，添加版本号

		重新生成一个版本号，在整个项目中，修改静态文件的版本号，也是一个非常麻烦的问题，laravel 的 mix() 也默认已经支持了

	6.CSS Preprocessors(CSS 预处理器)
		mix.sass('src', 'output', pluginOptions);
		mix.less('src', 'output', pluginOptions);
		mix.stylus('src', 'output', pluginOptions);
		mix.postCss('src', 'output', [ require('precss')() ])
		mix.standaloneSass('src', 'output', pluginOptions); // Isolated from Webpack build.

		1>对于 sass 编译，可以使用 .sass 和 .scss 语法
		2>对于 css 文件中的 url()，默认情况下，会将 '相对 URL' 复制到 'public/images/'，然后重写 url() 路径，会添加上 '版本号'。
		3>独立 Sass 构建(standaloneSass())，看文档

	7.Copying Files(复制文件)
		mix.copy()

		mix.copy(from, to);								// 文件复制
		mix.copy('from/regex/**/*.txt', to);			// 正则复制
		mix.copy([path1, path2], to);					// 多个文件复制
		mix.copyDirectory(fromDir, toDir);				// 目录复制

	8.OS Notifications(系统通知)
		默认每次编译，都会显示系统通知，通知会显示一些错误提示。某些情况下，可能不想显示通知，例如：生产环境。

		mix.disableNotifications(); 		// 禁用系统通知

	9.Concatenation and Minification(打包和压缩)
		如果使用得到，Laravel Mix 和 webpack 会帮我们处理好所有必要模块的打包和压缩。当我们要处理一些其他代码或第三方类库，可能也需要使用打包和压缩的功能，都给我们提供好了

		// 合并文件
		mix.combine(['one.js', 'two.js'], 'merged.js');		// 生产环境下(export NODE_ENV=production)，combine() 命令还会额外帮我们压缩

		// 使用 Bable 编译来合并文件	
		mix.babel(['one.js', 'two.js'], 'merged.js');		// 同 combine() 基本一致，还会调用 Babel 编译，将所有 ES2015 代码转换成原生 javascript，以便所有浏览器都可以识别。

		// 压缩文件
		mix.minify('js/file.js');
		mix.minify(['js/one.js', 'js/two.js']);

		注意：
			压缩文件，并不会覆盖原文件，会生成一个 '.min.js' 文件 
			只有生产环境才会压缩(export NODE_ENV=production)
			不同同时使用 combine(xxx).minify(xxx)，只需要使用单一个 combine()，因为它在生产环境下会自动压缩文件

	10.Autoloading(自动加载)
		Webpack 提供了一个功能，将一个模块作为一个变量，然后再其他任意模块中使用。

		mix.autoload({
			jquery: ['$', 'Window.jQuery'],
		});

		会将 jquery 模块，作为 $ 或 Window.jquery。所谓的自动加载，就是在凡是使用到 $ 或 window.jQuery 的文件里，webpack 都会在文件头部，给我们追加一个：
			var $ = require('jquery');
			Window.jQuery = require('jquery');

	11.Event Hooks(事件钩子)
		mix.then(function () {});

		每次编译完成后，可能想要处理一些逻辑，可以使用。传递一个回调方法，方法中，会注入一个 'stats' 对象。

		mix.then((stats) => {
			console.log(Object.keys(stats.compilation.assets));
		});

		// stats 参考
		https://github.com/webpack/docs/wiki/node.js-api#stats

	12.Quick Webpack Configuration(快速配置 Webpack)
		mix.webpackConfig({} || cb);

		我们可以通过编辑 webpack.config.js 来配置 webpack，还可以通过 mix.webpackConfig() 来简单配置 webpack，这个适用于简单配置。此外由于 Laravel 默认没有 webpack.config.js 文件，这种方式，更方便我们配置

		为 Laravel Spark 添加一个自定义模块路径：
			mix.webpackConfig({
			    resolve: {
			        modules: [
			            'node_modules',
			            path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js')
			        ]
			    }
			});
		当传递一个回调函数，可以访问 wepack 和它的所有属性
			mix.webpackConfig(webpack => {
			    return {
			        plugins: [
			            new webpack.ProvidePlugin({
			                $: 'jquery',
			                jQuery: 'jquery', 
			                'window.jQuery': 'jquery',
			            })
			        ]
			    };
			});

	13.Extending Mix(扩展 Laravel-Mix)
		比较复杂，看文档，用的也少


CUSTOM RECIPES(自定义方法)
	1.LiveReload
		Laravel Mix 默认支持了 BrowserSync，你可能更喜欢使用 LiveReload。

		LiveReload 也是一个检测文件改变，然后重载页面的程序。(和 BrowserSync 的区别，不清楚)

		1>安装 
			npm install webpack-livereload-plugin@1 --save-dev
		2>配置 webpack.mix.js
			var LiveReloadPlugin = require('webpack-livereload-plugin');

			mix.webpackConfig({
			    plugins: [
			        new LiveReloadPlugin()
			    ]
			});
		3>安装 LiveReload.js
			1)可以通过安装 LiveReload Chrome 插件
			2)也可以在</body>前，添加：
				@if(config('app.env') == 'local')
				    <script src="http://localhost:35729/livereload.js"></script>
				@endif
		4>运行开发服务器
			npm run watch

	2.jQuery UI
		jQuery UI 是一个用于渲染常用组件的工具包，例如：datepickers、draggables等。无需任何调整，就可以与 Laravel Mix 一起使用。

		1>构建 webpack.mix.js 配置
			mix.js('resources/js/app.js', 'public/js')
			   .sass('resources/sass/app.scss', 'public/css');
		2>安装
			npm install jquery-ui --save-dev
		3>加载你想用的组件
			// resources/js/app.js
			import $ from 'jquery';
			window.$ = window.jQuery = $;
			import 'jquery-ui/ui/widgets/datepicker.js';
		4>加载 CSS
			// resources/css/app.css
			@import '~jquery-ui/themes/base/all.css';
		5>触发 UI 插件
			// resources/js/app.js
			$('#datepicker').datepicker();

ADVANCED CONFIGURATION(高级配置)
	mix.options({
	    extractVueStyles: false,
	    processCssUrls: true,
	    uglify: {},
	    purifyCss: false,
	    //purifyCss: {},
	    postCss: [require('autoprefixer')],
	    clearConsole: false
	});

	extractVueStyles - 提取 .vue 组件样式(CSS在<style>标签内)到一个专用文件，而不是将其嵌入到HTML中。 

	globalVueStyles - 表示一个文件包含在每个组件样式中。这个文件应该只包含变量、函数或mixin，以便在最终的编译文件中防止重复的css。这个选项只有在启用了提取工具时才有效。

	processCssUrls - 进程/优化相对样式表url()。默认情况下，Webpack会自动更新这些url。但是，如果您的文件夹结构已经按照您想要的方式进行组织，那么将此选项设置为false以禁用处理。

	uglify - 使用这个选项来合并你的项目需要的任何定制的uglify选项。

	purifyCss - 如果你想要混合自动读取你的HTML/Blade文件，并删除你的CSS包，你可以将这个选项设置为true。您还可以传递包含purifycss-webpack选项的对象。

	postCss - 合并任何自定义的postCss插件。

	clearConsole - 设置为false，如果您不想在每次构建后清除终端/控制台。

补充：
	laravel 的 '通过 Laravel Mix 编译前端资源' 文档，也提供了几个官方没有提及的地方，这里也记录下
		https://laravelacademy.org/post/9553.html#toc_17

	1.Source Map
		默认被禁用，可以用过下面的方式开启：
			mix.sourceMaps();

		Source Map 会带来编译/性能的开销，但是浏览器的 firebug 调试时，可以将压缩、混淆后的代码，还原回去，方便我们调试。(应该是这个作用，自己查找资料)

	2.原生 CSS
		将多个原生 CSS 文件合并到一个文件中，使用 styles()
			mix.styles(['one.css', 'two.css', 'three.css'], 'all.css');

	3.Vanilla JS
		同 mix.styles() 类似，将多个 javascript 文件合并到一个文件中，使用 scripts()
			mix.scripts(['one.js', 'two.js', 'three.js'], 'all.js');

		同样，和 mix.babel() 类似，mix.babel() 的不同是：会将合并后的文件，经过 Babel 编译，从而将所有 ES2015 代码转换为所有浏览器都支持的原生 javascript。

	4.使用 extract() 进行库代码分离时，3个文件的引入顺序，不可改变！！！这个非常关键！！！官方文档竟然没说！！！
		<script src="/js/manifest.js"></script>
		<script src="/js/vendor.js"></script>
		<script src="/js/app.js"></script>

	5.环境变量
		可以在 laravel 的 .env 文件，定义 'MIX_' 前缀的环境变量，然后注入到 Mix：
			MIX_SENTRY_DSN_PUBLIC=http://example.com
		通过 'process.env' 对象来访问：
			process.env.MIX_SENTRY_DSN_PUBLIC