├── .gitignore ├── .npmignore ├── package.json ├── readme.md └── src ├── WebpackTask.js └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | project.sublime-project 3 | project.sublime-workspace -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | project.sublime-project -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "laravel-elixir-webpack-official", 3 | "version": "1.0.10", 4 | "description": "Laravel Elixir Webpack integration", 5 | "main": "dist/index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/JeffreyWay/laravel-elixir-webpack-official.git" 9 | }, 10 | "homepage": "https://github.com/JeffreyWay/laravel-elixir-webpack-official", 11 | "scripts": { 12 | "compile": "babel --presets=es2015 -d dist src", 13 | "prepublish": "npm run compile" 14 | }, 15 | "keywords": [ 16 | "laravel", 17 | "elixir", 18 | "webpack", 19 | "gulp" 20 | ], 21 | "author": "Jeffrey Way", 22 | "license": "MIT", 23 | "dependencies": { 24 | "buble": "^0.12.3", 25 | "buble-loader": "^0.2.2", 26 | "gulp-filter": "^4.0.0", 27 | "lodash": "^4.15.0", 28 | "webpack": "2.1.0-beta.15 - 2.1.0-beta.22", 29 | "webpack-stream-fixed": "3.2.2" 30 | }, 31 | "devDependencies": { 32 | "babel-cli": "^6.10.1", 33 | "babel-preset-es2015": "^6.9.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Laravel Elixir Webpack Integration 2 | 3 | This extension brings Webpack support to Laravel Elixir, version 6 and up. 4 | 5 | ## Step 1: Install 6 | 7 | ```js 8 | npm install laravel-elixir-webpack-official --save-dev 9 | ``` 10 | 11 | ## Step 2: Usage 12 | 13 | Similar to Browserify, the `webpack` method may be used to compile and bundle [ECMAScript 2015](https://babeljs.io/docs/learn-es2015/) into plain JavaScript. 14 | This function accepts a file, relative to the `resources/assets/js` directory, and generates a single bundled file in the `public/js` directory: 15 | 16 | ```javascript 17 | elixir(function(mix) { 18 | mix.webpack('app.js'); 19 | }); 20 | ``` 21 | 22 | To choose a different output or base directory, simply specify your desired paths as the second and third arguments, respectively. 23 | 24 | ```javascript 25 | elixir(function(mix) { 26 | mix.webpack('app.js', 'public/dist', 'app/assets/js'); 27 | }); 28 | ``` 29 | 30 | This will compile `app/assets/js/app.js` to `public/dist/app.js`. 31 | 32 | If you'd like to leverage more of Webpack's functionality, Elixir will read any `webpack.config.js` file in your project root, and [factor its configuration](https://webpack.github.io/docs/configuration.html) into the build process. Alternatively, you may pass your Webpack-specific configuration as the fourth argument to `mix.webpack()`. 33 | 34 | ## Step 3: Plugins 35 | 36 | If you've created a plugin, and need to hook your own Webpack config into Elixir's defaults, add the following to your script: 37 | 38 | ```js 39 | Elixir.webpack.mergeConfig({ 40 | babel: { 41 | presets: ['es2015'], 42 | plugins: ['transform-runtime'], 43 | }, 44 | module: { 45 | loaders: [{ 46 | test: /\.vue$/, 47 | loader: 'vue' 48 | }] 49 | } 50 | }); 51 | ``` 52 | 53 | `Elixir.webpack.mergeConfig(newConfig)` will recursively merge your provided configuration with ours. It also properly merges any nested arrays, so as not to override important default configuration. For example, in the code snippet above, the addition of the Vue loader will not overwrite the default loaders that we provide. -------------------------------------------------------------------------------- /src/WebpackTask.js: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | import {mergeWith, isArray} from 'lodash'; 3 | import filter from 'gulp-filter'; 4 | 5 | let gulpWebpack; 6 | 7 | class WebpackTask extends Elixir.Task { 8 | 9 | /** 10 | * Create a new JavaScriptTask instance. 11 | * 12 | * @param {string} name 13 | * @param {GulpPaths} paths 14 | * @param {object|null} options 15 | */ 16 | constructor(name, paths, options) { 17 | super(name, null, paths); 18 | 19 | this.options = options; 20 | 21 | if (fs.existsSync('webpack.config.js')) { 22 | this.userWebpackConfig = require(process.cwd()+'/webpack.config.js'); 23 | } 24 | } 25 | 26 | 27 | /** 28 | * Lazy load the task dependencies. 29 | */ 30 | loadDependencies() { 31 | gulpWebpack = require('webpack-stream'); 32 | } 33 | 34 | 35 | /** 36 | * Build up the Gulp task. 37 | */ 38 | gulpTask() { 39 | const jsFiles = filter(['**/*.js'], {restore: true}); 40 | return ( 41 | gulp 42 | .src(this.src.path) 43 | .pipe(this.webpack()) 44 | .on('error', this.onError()) 45 | .pipe(jsFiles) 46 | .pipe(this.minify()) 47 | .on('error', this.onError()) 48 | .pipe(jsFiles.restore) 49 | .pipe(this.saveAs(gulp)) 50 | .pipe(this.onSuccess()) 51 | ); 52 | } 53 | 54 | 55 | /** 56 | * Run the files through Webpack. 57 | */ 58 | webpack() { 59 | this.recordStep('Transforming ES2015 to ES5'); 60 | this.recordStep('Writing Source Maps'); 61 | 62 | return gulpWebpack(this.mergeConfig(), require('webpack')); 63 | } 64 | 65 | 66 | /** 67 | * Merge the Webpack config. 68 | * 69 | * @return {object} 70 | */ 71 | mergeConfig() { 72 | let defaultConfig = { 73 | output: { filename: this.output.name } 74 | }; 75 | 76 | return mergeWith( 77 | defaultConfig, 78 | Elixir.webpack.config, 79 | this.userWebpackConfig, 80 | this.options, 81 | (objValue, srcValue) => { 82 | if (isArray(objValue)) { 83 | return objValue.concat(srcValue); 84 | } 85 | } 86 | ); 87 | } 88 | } 89 | 90 | 91 | export default WebpackTask; 92 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { mergeWith, isArray } from 'lodash'; 2 | import WebpackTask from './WebpackTask'; 3 | 4 | /* 5 | |---------------------------------------------------------------- 6 | | Webpack 7 | |---------------------------------------------------------------- 8 | | 9 | | This task will allow you to use ES2015 code in any browser. 10 | | It leverages Webpack and Buble to transform and compile 11 | | your code into a single entry point for the browser. 12 | | 13 | */ 14 | 15 | Elixir.webpack = { 16 | config: { 17 | watch: Elixir.isWatching(), 18 | watchOptions: { 19 | poll: true, 20 | aggregateTimeout: 500, 21 | ignored: /node_modules/ 22 | }, 23 | devtool: Elixir.config.sourcemaps ? 'eval-cheap-module-source-map' : '', 24 | module: { 25 | loaders: [{ test: /\.js$/, loader: 'buble', exclude: /node_modules/ }] 26 | }, 27 | stats: { 28 | assets: false, 29 | version: false 30 | } 31 | }, 32 | 33 | mergeConfig(newConfig) { 34 | return this.config = mergeWith(this.config, newConfig, (objValue, srcValue) => { 35 | if (isArray(objValue)) { 36 | return objValue.concat(srcValue); 37 | } 38 | }); 39 | } 40 | }; 41 | 42 | 43 | Elixir.extend('webpack', function(scripts, output, baseDir, options) { 44 | new WebpackTask( 45 | 'webpack', getPaths(scripts, baseDir, output), options 46 | ); 47 | }); 48 | 49 | 50 | /** 51 | * Prep the Gulp src and output paths. 52 | * 53 | * @param {string|Array} src 54 | * @param {string|null} baseDir 55 | * @param {string|null} output 56 | * @return {GulpPaths} 57 | */ 58 | function getPaths(src, baseDir, output) { 59 | return new Elixir.GulpPaths() 60 | .src(src, baseDir || Elixir.config.get('assets.js.folder')) 61 | .output(output || Elixir.config.get('public.js.outputFolder'), 'all.js'); 62 | } 63 | --------------------------------------------------------------------------------