使用Laravel Mix时如何包含webpack插件? [英] How to include webpack plugins when using Laravel Mix?
问题描述
如果我使用 WebPack 和 Laravel Mix,我应该如何包含 webpack 插件?我很困惑将插件代码添加到哪个文件中.
How should I include webpack plugins if I use WebPack AND Laravel Mix? I am confused which file I add the plugin code into.
我的下面尝试似乎没有运行我的插件.该插件应该压缩js,css文件,但不能压缩.
My below attempt doesn't seem to be running my plugin. The plugin should be compressing the js, css files but its not.
webpack.config.js
:
require('./node_modules/laravel-mix/src/index');
require(Mix.paths.mix());
// My plugin is here
const CompressionPlugin = require('compression-webpack-plugin');
Mix.dispatch('init', Mix);
let WebpackConfig = require('./node_modules/laravel-mix/src/builder/WebpackConfig');
module.exports = new WebpackConfig({
plugins: [
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$|\.svg$/,
threshold: 10240,
minRatio: 0.8
})
],
}).build();
webpack.mix.js
:
let mix = require('laravel-mix');
mix.setPublicPath('dist')
.js('src/app.js', 'scripts/')
.extract([
'jquery',
'axios',
'babel-polyfill',
'lodash',
'tether',
'vue',
'bootstrap-vue',
'vuex',
'vuex-localstorage',
])
.sass('src/styles/app.scss', 'styles/')
.copyDirectory('src/assets', 'dist/assets')
.options({
processCssUrls: false,
uglify: true
})
.version();
我的NPM命令是:
节点node_modules/cross-env/dist/bin/cross-env.js NODE_ENV =开发node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config = webpack.config.js
node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=webpack.config.js
推荐答案
Mix的API提供了一个有用的 webpackConfig
方法,用于调整Webpack配置.
Mix's API provides a useful webpackConfig
method for adjusting the webpack config.
https://laravel.com/docs/5.6/mix#custom-webpack配置
webpackConfig
方法接受一个对象,该对象应包含您希望应用的任何特定于Webpack的配置.
The
webpackConfig
method accepts an object, which should contain any Webpack-specific configuration that you wish to apply.
我相信以下代码应能工作.
I believe the following code should work.
webpack.mix.js
:
const mix = require('laravel-mix');
const CompressionPlugin = require('compression-webpack-plugin');
mix.setPublicPath('dist')
.js('src/app.js', 'scripts/')
.extract([
'jquery',
'axios',
'babel-polyfill',
'lodash',
'tether',
'vue',
'bootstrap-vue',
'vuex',
'vuex-localstorage',
])
.sass('src/styles/app.scss', 'styles/')
.copyDirectory('src/assets', 'dist/assets')
.options({
processCssUrls: false,
uglify: true,
})
.webpackConfig({
plugins: [
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$|\.svg$/,
threshold: 10240,
minRatio: 0.8,
}),
],
})
.version();
这篇关于使用Laravel Mix时如何包含webpack插件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!