将Laravel Mix与webpack一起用于所有资产

最新推荐文章于 2024-08-09 07:49:32 发布

culiu9261

最新推荐文章于 2024-08-09 07:49:32 发布

阅读量1k

点赞数

文章标签： java vue python js react ViewUI

原文链接：https://scotch.io/tutorials/using-laravel-mix-with-webpack-for-all-your-assets

版权

Laravel Mix provides a fluent API for defining webpack build steps for your application using several common CSS and JavaScript pre-processors.

Laravel Mix提供了一种流畅的API，可使用几种常见CSS和JavaScript预处理程序为您的应用程序定义Webpack构建步骤。

That is the definition taken straight from the documentation. But what does it all mean?

这就是直接从文档中获得的定义。但这意味着什么？

The lovely creators of Laravel Mix, put in the common webpack configurations and you can add more custom configurations if you wish.

Laravel Mix的可爱创造者加入了常见的Webpack配置，并且您可以根据需要添加更多自定义配置。

This is especially wonderful for people that want to use webpack, but feel like configuring webpack is too difficult. Or maybe they wanted to use ES2016 but saw some complicated article about loaders and modules.

对于想使用webpack的人来说，这尤其棒，但是感觉配置webpack太困难了。或者，也许他们想使用ES2016，但看到了一些关于加载器和模块的复杂文章。

Laravel Mix allows you to use a single line to describe what you want and it'll use it's preconfigured settings to process it properly.

Laravel Mix允许您使用一行描述您想要的内容，并将使用它的预配置设置来正确处理它。

安装Laravel Mix ( Installing Laravel Mix )

与Laravel (With Laravel)

If you're using Laravel 5.4 and above, then mix is already installed. All you have to do is run npm install.

如果您使用的是Laravel 5.4及更高版本，则说明已经安装了mix。您所要做的就是运行npm install 。

单机版 (Standalone)

From the root of your application, run the following commands

在应用程序的根目录中，运行以下命令

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

Now in the package.json file, add this.

现在在package.json文件中添加它。

"scripts": {
        "dev": "NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "production": "NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    }

Now the installation is complete.

至此安装完成。

配置Laravel Mix ( Configuring Laravel Mix )

Most of our time will be spent in the webpack.mix.js file. In the file, you should see this.

我们大部分时间都将花费在webpack.mix.js文件中。在文件中，您应该看到此信息。

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

    /*
     |--------------------------------------------------------------------------
     | Mix Asset Management
     |--------------------------------------------------------------------------
     |
     | Mix provides a clean, fluent API for defining some Webpack build steps
     | for your Laravel application. By default, we are compiling the Sass
     | file for your application, as well as bundling up your JS files.
     |
     */

    mix.js('src/app.js', 'dist/')
       .sass('src/app.scss', 'dist/');

It is already preconfigured to compile a file at src/app.js to dist/app.js file and src/app.scss to dist/app.css.

它已经预先配置为将src/app.js上的文件编译为dist/app.js文件，并将src/app.scss为dist/app.css 。

There are several more Mix methods and you can see all of them in the default webpack.mix.js file.

还有其他几种Mix方法，您可以在默认的webpack.mix.js文件中看到所有这些方法。

// Full API
    // mix.js(src, output);
    // mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation.
    // mix.extract(vendorLibs);
    // mix.sass(src, output);
    // mix.standaloneSass('src', output); <-- Faster, but isolated from Webpack.
    // mix.fastSass('src', output); <-- Alias for mix.standaloneSass().
    // mix.less(src, output);
    // mix.stylus(src, output);
    // mix.postCss(src, output, [require('postcss-some-plugin')()]);
    // mix.browserSync('my-site.dev');
    // mix.combine(files, destination);
    // mix.babel(files, destination); <-- Identical to mix.combine(), but also includes Babel compilation.
    // mix.copy(from, to);
    // mix.copyDirectory(fromDir, toDir);
    // mix.minify(file);
    // mix.sourceMaps(); // Enable sourcemaps
    // mix.version(); // Enable versioning.
    // mix.disableNotifications();
    // mix.setPublicPath('path/to/public');
    // mix.setResourceRoot('prefix/for/resource/locators');
    // mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin.
    // mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.
    // mix.then(function () {}) <-- Will be triggered each time Webpack finishes building.
    // mix.options({
    //   extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
    //   processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
    //   purifyCss: false, // Remove unused CSS selectors.
    //   uglify: {}, // Uglify-specific options. https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
    //   postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
    // });

The beauty of this is that we can chain as many of these as we want and not worry about the underlying webpack build.

这样做的好处是，我们可以根据需要链接任意数量的链接，而不必担心底层的webpack构建。

Supports SASS, LESS, Stylus, PostCSS, PlainCss and much more. And all you have to write is a single line.

支持SASS，LESS，Stylus，PostCSS，PlainCss等。您只需要写一行。

编译中 ( Compiling )

After configuring your app, there are several commands we can run.

配置完您的应用程序后，我们可以运行几个命令。

npm run dev (npm run dev)

This builds our assets but does not minify or produce a production-ready build.

这将构建我们的资产，但不会减少或生成可用于生产的构建。

npm run手表 (npm run watch)

Similar to npm run dev but will watch for changes to our assets and automatically re-compile any changed asset

与npm run dev类似，但将监视我们的资产更改并自动重新编译任何更改的资产

npm运行热 (npm run hot)

Will not just refresh the page when a piece of JavaScript is changed, but it will also maintain the current state of the component in the browser.

当更改了一段JavaScript时，不仅会刷新页面，而且还会保持浏览器中组件的当前状态。

npm运行生产 (npm run production)

Will compile all our assets and produce a production-ready build. It will run all Mix tasks, and it will minify the output.

将编译我们所有的资产并生成可用于生产的版本。它将运行所有Mix任务，并将输出最小化。

基本演示 ( Basic Demo )

Let's create a simple HTML "fictional" interface with some little CSS and JS. We want our folder structure to be something like this:

让我们用一些小CSS和JS创建一个简单HTML“虚构”界面。我们希望我们的文件夹结构是这样的：

app/
    |__public/ #webroot
    |    |__js/  #folder for JS files
    |    |__css/  #folder for CSS files
    |    |__media/  #folder for images and other files
    |
    |__resorces/
    |    |__scripts/ #folder for our source JS files 
    |    |__styles/ #folder for our source SASS files 
    |
    |__src/ #folder we want copied "as is" to the public directory.
    |
    package.json
    webpack.mix.js

So our webpack.mix.js file looks like this.

所以我们的webpack.mix.js文件看起来像这样。

let mix = require('laravel-mix');
    mix .js('resources/scripts/app.js', 'public/js/app.js')
       .sass('resources/styles/app.scss', 'public/css/app.css')
       .copyDirectory('src', 'public');

In the above example, we have a public directory which serves as our root. We also have an index.html file which will be the app's homepage.

在上面的示例中，我们有一个public目录作为我们的根目录。我们还有一个index.html文件，它将作为应用程序的主页。

We want to keep all our CSS files in public/css folder. For now, there is just one file there, the app.css file. Since we are using SASS, we will use Laravel Mix's sass() method to compile the app.scss file to app.css. We will do the same to compile our resources/scripts/app.js to public/js/app.js.

我们希望将所有CSS文件保留在public/css文件夹中。目前，那里只有一个文件，即app.css文件。由于我们正在使用SASS，因此我们将使用Laravel Mix的sass()方法将app.scss文件编译为app.css 。我们将执行同样的操作以将我们的resources/scripts/app.js编译为public/js/app.js

The source code is available here and a demo is shown here.

源代码在这里，演示在这里。

一个更高级的例子 ( A More Advanced Example )

For another project, we will build several static sites with the same codebase. But the source files compile to different directories. The desired folder structure is like this.

对于另一个项目，我们将使用相同的代码库构建多个静态站点。但是源文件会编译到不同的目录。所需的文件夹结构是这样的。

app/
    |__public/ #webroot
    |    |__site1/
    |    |    |__js/  #folder for JS files
    |    |    |__css/  #folder for CSS files
    |    |    |__media/  #folder for images and other files
    |    |    |__index.html 
    |    |
    |    |__site2/
    |         |__js/  #folder for JS files
    |         |__css/  #folder for CSS files
    |         |__media/  #folder for images and other files
    |    |    |__index.html 
    |
    |__site1/
    |   |__scripts/ #folder for our source JS files 
    |   |__styles/ #folder for our source SASS files 
    |   |__src/ #folder we want copied "as is" to the webroot
    |        |__media/ #folder for images and other files
    |        |__index.html 
    |
    |__site2/
    |   |__scripts/ #folder for our source JS files 
    |   |__styles/ #folder for our source SASS files 
    |   |__src/ #folder we want copied "as is" to the webroot
    |        |__media/ #folder for images and other files
    |        |__index.html 
    |
    |__package.json
    |__webpack.mix.js

So we will configure our webpack.mix.js this way.

因此，我们将以这种方式配置webpack.mix.js 。

let mix = require('laravel-mix');
    mix .js('site1/scripts/app.js', 'public/site1/js/app.js')
    .sass('site1/styles/app.scss', 'public/site1/css/app.css')
    .copyDirectory('site1/src', 'public/site1')
    .js('site2/scripts/app.js', 'public/site2/js/app.js')
    .sass('site2/styles/app.scss', 'public/site2/css/app.css')
    .copyDirectory('site2/src', 'public/site2');

Since both of the sites are similar and have the same dependencies, then instead of having a separate setup for each of them, we can Laravel Mix to compile them to different folders which we can then set as separate web roots for their respective sites.

由于两个站点都是相似的并且具有相同的依赖关系，因此我们不必为每个站点进行单独的设置，而是可以将Laravel Mix编译为不同的文件夹，然后将其设置为各自站点的单独Web根。

Using this method prevents us from having two separate projects and having to install and maintain the same set of dependencies in both of them.

使用此方法可以防止我们拥有两个单独的项目，并且不必在两个项目中都安装和维护相同的依赖项集。

The structure is very similar to the first demo, but since Laravel Mix allows us to set the compile destination, we can easily compile to different folders which we will then use as the webroot.

该结构与第一个演示非常相似，但是由于Laravel Mix允许我们设置编译目标，因此我们可以轻松地编译到不同的文件夹，然后将其用作webroot。

We will put all the souce code for site1 in the folder app/site1/, and site2 in app/site2/. Inside these folders, we will have the scripts/ folder for the JavaScript files, and the styles/ folder for the SASS files. The src folder is for the files that we simply want copied to the webroot.

我们将把site1所有源代码放在app/site1/文件夹中，并将site2放在app/site2/文件夹中。在这些文件夹中，我们将有JavaScript文件的scripts/文件夹和SASS文件的styles/文件夹。 src文件夹用于我们只想复制到webroot的文件。

The webroot for the sites will be at public/site1/ and public/site2/ respectively.

这些站点的webroot分别位于public/site1/和public/site2/ 。

The source code is available here. In there, the names of the sites are Imperium and JustOfada. They are hosted here(imperium) and here(justofada).

源代码可在此处获得。在那里，这些站点的名称是Imperium和JustOfada。他们托管在这里（帝国）和这里（justofada）。

高级Webpack ( Advanced Webpack )

Laravel Mix actually has a preconfigured webpack.config.js file that it references when it runs. If you need to add some custom config, you can pass your additional webpack configuration to the mix.webpackConfig() method.

Laravel Mix实际上有一个预配置的webpack.config.js文件，在运行时会引用该文件。如果您需要添加一些自定义配置，则可以将其他Webpack配置传递给mix.webpackConfig()方法。

To completely customize your Webpack configuration, copy the node_modules/laravel-mix/setup/webpack.config.js file to your application's root directory. Then edit your package.json file, and point all of the --config references to the newly copied configuration file.

要完全自定义Webpack配置，请将node_modules/laravel-mix/setup/webpack.config.js文件复制到应用程序的根目录中。然后编辑您的package.json文件，并将所有--config引用指向新复制的配置文件。

For example.

例如。

"scripts": {
        "dev": "NODE_ENV=development webpack --progress --hide-modules --config=webpack.config.js",
        "watch": "NODE_ENV=development webpack --watch --progress --hide-modules --config=webpack.config.js",
        "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=webpack.config.js",
        "production": "NODE_ENV=production webpack --progress --hide-modules --config=webpack.config.js"
    }

结论 ( Conclusion )

As you can see in the demos, Laravel Mix saves a lot of time. There is no more need to worry about webpack configurations. If you have not used webpack before, this is a great entry tool. However, if you have used it before, this helps to simplify the entire process.

在演示中可以看到，Laravel Mix节省了大量时间。无需担心Webpack配置。如果您以前从未使用过webpack，那么这是一个很好的输入工具。但是，如果您以前使用过它，则可以帮助简化整个过程。