序言
- wabpack的确强大但过于复杂,不易使用
- laravel-mix是轻量级的webpack,使之八成用例变得简单易用
- laravel-mix重写了webpack的默认配置,使之应用简单,可以用在任何项目
简介
- ES2017 + 模块编辑
- 创建并且编译 .vue 组件 (通过 vue-loader)
- 模块热替换
- Tree-shaking 打包技术, webpack 2 里新增的 (移除未使用的库代码)
- 提取和拆分 vendor 库 (通过 mix.extract()), 让长期缓存变的容易
- 自动版本化(文件哈希),通过 mix.version()
laravel-mix工作流
- 安装
npm init -y
npm install laravel-mix --save-dev
cp node_modules/laravel-mix/setup/webpack.mix.js ./
- 添加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”
},
- 查看
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'
);
- 编译
npm run dev
常见的坑
- css 文件里使用的图片在 node_modules 里找不到?
当引用相对路径的时候,会根据当前文件的路径来搜索,同样的, webpack 会首先搜索 resources/assets/img/example.jpg ,如果找不到,会继续搜索文件位置,包括 node_modules ,如果还找不到,就报错:
- 解决办法
- 让 resources/assets/img/example.jpg 存在这个文件。
- 编译 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
});