Migrate to webpack

pull/164/head
jimmay5469 7 years ago
parent 02c3b42ec7
commit 9ee60594bf
  1. 2
      .circleci/config.yml
  2. 3
      .gitignore
  3. 5
      apps/explorer_web/assets/.eslintrc
  4. 5
      apps/explorer_web/assets/babelrc
  5. 118
      apps/explorer_web/assets/brunch-config.js
  6. 1
      apps/explorer_web/assets/css/app.scss
  7. 18
      apps/explorer_web/assets/js/app.js
  8. 2
      apps/explorer_web/assets/js/lib/sidebar.js
  9. 9038
      apps/explorer_web/assets/package-lock.json
  10. 35
      apps/explorer_web/assets/package.json
  11. 9
      apps/explorer_web/assets/postcss.config.js
  12. 56
      apps/explorer_web/assets/webpack.config.js
  13. 9
      apps/explorer_web/config/dev.exs

@ -87,7 +87,7 @@ jobs:
- run:
name: Build assets
command: node node_modules/brunch/bin/brunch build
command: node node_modules/webpack/bin/webpack.js --mode development
working_directory: "apps/explorer_web/assets"
- persist_to_workspace:

3
.gitignore vendored

@ -13,9 +13,6 @@ erl_crash.dump
# Generated on crash by NPM
npm-debug.log
# Generated on crash by Yarn
yarn-error.log
# Static artifacts
/apps/explorer_web/assets/node_modules

@ -1,6 +1,3 @@
{
"extends": "standard",
"globals": {
"$": false
}
"extends": "standard"
}

@ -0,0 +1,5 @@
{
presets: [
'env'
]
}

@ -1,118 +0,0 @@
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
entryPoints: {
'js/app.js': 'js/app.js'
},
joinTo: {
'js/test.js': [/^spec/, /^js/, /^node_modules/]
}
// To use a separate vendor.js bundle, specify two files path
// http://brunch.io/docs/config#-files-
// joinTo: {
// 'js/app.js': /^js/,
// 'js/vendor.js': /^(?!js)/
// }
//
// To change the order of concatenation of files, explicitly mention here
// order: {
// before: [
// 'vendor/js/jquery-2.1.1.js',
// 'vendor/js/bootstrap.min.js'
// ]
// }
},
stylesheets: {
joinTo: {
'css/app.css': 'css/app.scss'
}
},
templates: {
joinTo: 'js/app.js'
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to '/assets/static'. Files in this directory
// will be copied to `paths.public`, which is 'priv/static' by default.
assets: /^(static)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: ['static', 'css', 'css/**', 'js', 'vendor', 'spec'],
// Where to compile files to
public: '../priv/static'
},
// Configure your plugins
plugins: {
babel: {
presets: ['env'],
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
},
copycat: {
'fonts': ['node_modules/font-awesome/fonts']
},
sass: {
mode: 'native',
precision: 8,
allowCache: true,
options: {
includePaths: [
'node_modules/bootstrap/scss',
'node_modules/font-awesome/scss'
]
}
},
postcss: {
processors: [
require('autoprefixer')(['last 4 versions']),
require('csswring')()
]
}
},
modules: {
autoRequire: {
'js/app.js': ['js/app'],
'js/test.js': ['spec/spec_helper']
}
},
overrides: {
production: {
optimize: true,
sourceMaps: false,
plugins: {
autoReload: {enabled: false},
},
modules: {autoRequire: {'js/app.js': ['js/app']}},
paths: {watched: ['static', 'css', 'css/**', 'js', 'vendor']},
files: {
javascripts: {joinTo: 'js/app.js'},
stylesheets: {joinTo: 'css/app.css'},
}
}
},
npm: {
enabled: true,
globals: {
$: 'jquery',
jQuery: 'jquery',
Popper: 'popper.js',
bootstrap: 'bootstrap'
}
}
}

@ -7,6 +7,7 @@
/* This file is for your main application css. */
// Font Awesome
$fa-font-path: "~font-awesome/fonts";
@import "font-awesome";
// Bootstrap Core CSS

@ -1,16 +1,14 @@
// Brunch automatically concatenates all files in your
// watched paths. Those paths can be configured at
// config.paths.watched in "brunch-config.js".
//
// However, those files will only be executed if
// explicitly imported. The only exception are files
// in vendor, which are never wrapped in imports and
// therefore are always executed.
// We need to import the CSS so that webpack will load it.
// The ExtractTextPlugin is used to separate it out into
// its own CSS file.
import '../css/app.scss'
// webpack automatically concatenates all files in your
// watched paths. Those paths can be configured as
// endpoints in "webpack.config.js".
//
// Import dependencies
//
// If you no longer want to use a dependency, remember
// to also remove its path from "config.paths.watched".
import '@babel/polyfill'
import 'phoenix_html'
import 'bootstrap'

@ -1,3 +1,5 @@
import $ from 'jquery'
$('#sidebarCollapse').on('click', function () {
$('#sidebar--container').toggleClass('active')
$(this).toggleClass('active')

File diff suppressed because it is too large Load Diff

@ -12,35 +12,40 @@
"npm": "5.x"
},
"scripts": {
"deploy": "brunch build --production",
"watch": "brunch watch --stdin",
"build": "brunch build",
"deploy": "webpack --mode production",
"watch": "webpack --mode development --watch",
"build": "webpack --mode development",
"eslint": "eslint js/**"
},
"dependencies": {
"@babel/polyfill": "^7.0.0-beta.39",
"autoprefixer": "^8.3.0",
"babel-brunch": "6.1.1",
"babel-preset-env": "^1.6.1",
"bootstrap": "^4.1.0",
"brunch": "2.10.9",
"copycat-brunch": "^1.1.0",
"csswring": "^6.0.3",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"phoenix": "file:../../../deps/phoenix",
"phoenix_html": "file:../../../deps/phoenix_html",
"popper.js": "^1.14.3",
"postcss-brunch": "0.5.0",
"sass-brunch": "^2.10.4",
"uglify-js-brunch": "2.10.0"
"popper.js": "^1.14.3"
},
"devDependencies": {
"@babel/polyfill": "^7.0.0-beta.46",
"autoprefixer": "^8.4.1",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"eslint": "^4.15.0",
"eslint-config-standard": "^11.0.0-beta.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1"
"eslint-plugin-standard": "^3.0.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"node-sass": "^4.9.0",
"postcss-loader": "^2.1.4",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.1.2"
}
}

@ -0,0 +1,9 @@
module.exports = {
plugins: [
require('autoprefixer')({
browsers: [
'last 4 versions'
]
})
]
};

@ -0,0 +1,56 @@
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './js/app.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, '../priv/static/js')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "postcss-loader"
}, {
loader: "sass-loader",
options: {
precision: 8,
includePaths: [
'node_modules/bootstrap/scss',
'node_modules/font-awesome/scss'
]
}
}],
fallback: 'style-loader'
})
}, {
test: /\.(svg|ttf|eot|woff|woff2)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '../fonts/',
publicPath: '../fonts/'
}
}
}
]
},
plugins: [
new ExtractTextPlugin('../css/app.css'),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
]
};

@ -5,7 +5,7 @@ use Mix.Config
#
# The watchers configuration can be used to run external
# watchers to your application. For example, we use it
# with brunch.io to recompile .js and .css sources.
# with webpack to recompile .js and .css sources.
config :explorer_web, ExplorerWeb.Endpoint,
http: [port: 4000],
debug_errors: true,
@ -13,9 +13,10 @@ config :explorer_web, ExplorerWeb.Endpoint,
check_origin: false,
watchers: [
node: [
"node_modules/brunch/bin/brunch",
"watch",
"--stdin",
"node_modules/webpack/bin/webpack.js",
"--mode",
"development",
"--watch",
cd: Path.expand("../assets", __DIR__)
]
]

Loading…
Cancel
Save