Laravel-Mix工作流

序言

• wabpack的确强大但过于复杂，不易使用
• laravel-mix是轻量级的webpack，使之八成用例变得简单易用
• laravel-mix重写了webpack的默认配置，使之应用简单，可以用在任何项目

简介

• ES2017 + 模块编辑
• 创建并且编译 .vue 组件 (通过 vue-loader)
• 模块热替换
• Tree-shaking 打包技术， webpack 2 里新增的 (移除未使用的库代码)
• 提取和拆分 vendor 库 (通过 mix.extract())， 让长期缓存变的容易
• 自动版本化(文件哈希)，通过 mix.version()

laravel-mix工作流

1. 安装

		npm init -y
        npm install laravel-mix --save-dev
        cp node_modules/laravel-mix/setup/webpack.mix.js ./

2. 添加NPM脚本

“scripts”: {
“dev”: “NODE_ENV=development webpack --progress --hide-modules”,
“watch”: “NODE_ENV=development webpack --watch --progress --hide-modules”,
“hot”: “NODE_ENV=development webpack-dev-server --inline --hot”,
“production”: “NODE_ENV=production webpack --progress --hide-modules”
},

3. 查看webpack.mix.js

该文件是所有前端资源编译的入口，通常你需要编辑下述代码
默认会启用 JavaScript ES2017 + 模块绑定，就行 sass 编译一样

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js').sass(
    'resources/assets/sass/app.scss',
    'public/css'
);

4. 编译

npm run dev

常见的坑

• css 文件里使用的图片在 node_modules 里找不到?

当引用相对路径的时候，会根据当前文件的路径来搜索，同样的， webpack 会首先搜索 resources/assets/img/example.jpg ，如果找不到，会继续搜索文件位置，包括 node_modules ,如果还找不到，就报错：

• 解决办法

1. 让 resources/assets/img/example.jpg 存在这个文件。
2. 编译 css 的时候添加下面的选项，禁用 css 的 url 处理。

mix.sass('resources/assets/sass/app.scss', 'public/css')
   .options({
        processCssUrls: false
   });

• 改变 mix-manifest.json 文件存放位置

调用mix.setPublicPath(‘dist/’)
mix-manifest.json 文件存储映射后的版本，这些版本是前端页面所需要用到

• 如何使用 webpack 自动加载模块?

//webpack方式
new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
});

// mix方式 
mix.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery'], // more than one
    moment: 'moment' // only one
});

laravel-mix api 解析