Skip to content
This repository was archived by the owner on Jun 20, 2019. It is now read-only.

Commit f11c133

Browse files
joshuaclaytonjoshuaclayton
committed
Initial
0 parents  commit f11c133

13 files changed

+3865
-0
lines changed

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
elm-stuff/
2+
node_modules/
3+
tmp/
4+
dist/
5+
*.log

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Drug Wars

‎elm-package.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"version": "1.0.0",
3+
"summary": "Example using `elm-webpack-loader`.",
4+
"repository": "https://github.com/moarwick/elm-webpack-starter.git",
5+
"license": "MIT",
6+
"source-directories": [
7+
"src/elm"
8+
],
9+
"exposed-modules": [],
10+
"dependencies": {
11+
"elm-lang/core": "5.0.0 <= v < 6.0.0",
12+
"elm-lang/html": "2.0.0 <= v < 3.0.0",
13+
"elm-lang/http": "1.0.0 <= v < 2.0.0",
14+
"evancz/elm-markdown": "3.0.1 <= v < 4.0.0"
15+
},
16+
"elm-version": "0.18.0 <= v < 0.19.0"
17+
}

‎package.json

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "drug-wars",
3+
"description": "",
4+
"version": "0.0.1",
5+
"license": "MIT",
6+
"author": "thoughtbot, inc",
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/thoughtbot/drug-wars"
10+
},
11+
"scripts": {
12+
"start": "webpack-dev-server --hot --inline --content-base src/",
13+
"build": "rimraf dist && webpack",
14+
"reinstall": "npm i rimraf && rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install"
15+
},
16+
"devDependencies": {
17+
"autoprefixer": "^6.3.6",
18+
"bootstrap-sass": "^3.3.6",
19+
"copy-webpack-plugin": "^4.0.1",
20+
"css-loader": "^0.25.0",
21+
"elm": "^0.18.0",
22+
"elm-hot-loader": "^0.5.2",
23+
"elm-webpack-loader": "^3.0.6",
24+
"extract-text-webpack-plugin": "^1.0.1",
25+
"file-loader": "^0.9.0",
26+
"html-webpack-plugin": "^2.17.0",
27+
"jquery": "^3.1.0",
28+
"node-sass": "^3.7.0",
29+
"postcss-loader": "^1.1.1",
30+
"rimraf": "^2.5.2",
31+
"sass-loader": "^4.0.0",
32+
"style-loader": "^0.13.1",
33+
"url-loader": "^0.5.7",
34+
"webpack": "^1.13.1",
35+
"webpack-dev-server": "^1.14.1",
36+
"webpack-merge": "^0.16.0"
37+
}
38+
}

‎src/elm/Components/Hello.elm

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module Components.Hello exposing (..)
2+
3+
import Html exposing (..)
4+
import Html.Attributes exposing (..)
5+
import String
6+
7+
-- hello component
8+
hello : Int -> Html a
9+
hello model =
10+
div
11+
[ class "h1" ]
12+
[ text ( "Hello, Elm" ++ ( "!" |> String.repeat model ) ) ]

‎src/elm/Main.elm

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import Html exposing (..)
2+
import Html.Attributes exposing (..)
3+
import Html.Events exposing ( onClick )
4+
5+
-- component import example
6+
import Components.Hello exposing ( hello )
7+
8+
9+
-- APP
10+
main : Program Never Int Msg
11+
main =
12+
Html.beginnerProgram { model = model, view = view, update = update }
13+
14+
15+
-- MODEL
16+
type alias Model = Int
17+
18+
model : number
19+
model = 0
20+
21+
22+
-- UPDATE
23+
type Msg = NoOp | Increment
24+
25+
update : Msg -> Model -> Model
26+
update msg model =
27+
case msg of
28+
NoOp -> model
29+
Increment -> model + 1
30+
31+
32+
-- VIEW
33+
-- Html is defined as: elem [ attribs ][ children ]
34+
-- CSS can be applied via class names or inline style attrib
35+
view : Model -> Html Msg
36+
view model =
37+
div [ class "container", style [("margin-top", "30px"), ( "text-align", "center" )] ][ -- inline CSS (literal)
38+
div [ class "row" ][
39+
div [ class "col-xs-12" ][
40+
div [ class "jumbotron" ][
41+
img [ src "static/img/elm.jpg", style styles.img ] [] -- inline CSS (via var)
42+
, hello model -- ext 'hello' component (takes 'model' as arg)
43+
, p [] [ text ( "Elm Webpack Starter" ) ]
44+
, button [ class "btn btn-primary btn-lg", onClick Increment ] [ -- click handler
45+
span[ class "glyphicon glyphicon-star" ][] -- glyphicon
46+
, span[][ text "FTW!" ]
47+
]
48+
]
49+
]
50+
]
51+
]
52+
53+
54+
-- CSS STYLES
55+
styles : { img : List ( String, String ) }
56+
styles =
57+
{
58+
img =
59+
[ ( "width", "33%" )
60+
, ( "border", "4px solid #337AB7")
61+
]
62+
}

‎src/favicon.ico

1.12 KB
Binary file not shown.

‎src/static/img/elm.jpg

69.2 KB
Loading

‎src/static/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<meta charSet="utf-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>elm-webpack-starter</title>
7+
<meta name="description" content="Elm Webpack Starter"/>
8+
<meta name="author" content="Peter Morawiec"/>
9+
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
10+
</head>
11+
<body>
12+
<div id="main"></div>
13+
</body>
14+
</html>

‎src/static/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// pull in desired CSS/SASS files
2+
require( './styles/main.scss' );
3+
var $ = jQuery = require( '../../node_modules/jquery/dist/jquery.js' ); // <--- remove if jQuery not needed
4+
require( '../../node_modules/bootstrap-sass/assets/javascripts/bootstrap.js' ); // <--- remove if Bootstrap's JS not needed
5+
6+
// inject bundled Elm app into div#main
7+
var Elm = require( '../elm/Main' );
8+
Elm.Main.embed( document.getElementById( 'main' ) );

‎src/static/styles/main.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
2+
@import '~bootstrap-sass/assets/stylesheets/bootstrap/_mixins.scss';
3+
@import '~bootstrap-sass/assets/stylesheets/_bootstrap.scss';
4+
5+
// can add Boostrap overrides, additional Sass/CSS below...

‎webpack.config.js

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
var path = require( 'path' );
2+
var webpack = require( 'webpack' );
3+
var merge = require( 'webpack-merge' );
4+
var HtmlWebpackPlugin = require( 'html-webpack-plugin' );
5+
var autoprefixer = require( 'autoprefixer' );
6+
var ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
7+
var CopyWebpackPlugin = require( 'copy-webpack-plugin' );
8+
9+
console.log( 'WEBPACK GO!');
10+
11+
// detemine build env
12+
var TARGET_ENV = process.env.npm_lifecycle_event === 'build' ? 'production' : 'development';
13+
14+
// common webpack config
15+
var commonConfig = {
16+
17+
output: {
18+
path: path.resolve( __dirname, 'dist/' ),
19+
filename: '[hash].js',
20+
},
21+
22+
resolve: {
23+
modulesDirectories: ['node_modules'],
24+
extensions: ['', '.js', '.elm']
25+
},
26+
27+
module: {
28+
noParse: /\.elm$/,
29+
loaders: [
30+
{
31+
test: /\.(eot|ttf|woff|woff2|svg)$/,
32+
loader: 'file-loader'
33+
}
34+
]
35+
},
36+
37+
plugins: [
38+
new HtmlWebpackPlugin({
39+
template: 'src/static/index.html',
40+
inject: 'body',
41+
filename: 'index.html'
42+
})
43+
],
44+
45+
postcss: [ autoprefixer( { browsers: ['last 2 versions'] } ) ],
46+
47+
}
48+
49+
// additional webpack settings for local env (when invoked by 'npm start')
50+
if ( TARGET_ENV === 'development' ) {
51+
console.log( 'Serving locally...');
52+
53+
module.exports = merge( commonConfig, {
54+
55+
entry: [
56+
'webpack-dev-server/client?http://localhost:8080',
57+
path.join( __dirname, 'src/static/index.js' )
58+
],
59+
60+
devServer: {
61+
inline: true,
62+
progress: true
63+
},
64+
65+
module: {
66+
loaders: [
67+
{
68+
test: /\.elm$/,
69+
exclude: [/elm-stuff/, /node_modules/],
70+
loader: 'elm-hot!elm-webpack?verbose=true&warn=true&debug=true'
71+
},
72+
{
73+
test: /\.(css|scss)$/,
74+
loaders: [
75+
'style-loader',
76+
'css-loader',
77+
'postcss-loader',
78+
'sass-loader'
79+
]
80+
}
81+
]
82+
}
83+
84+
});
85+
}
86+
87+
// additional webpack settings for prod env (when invoked via 'npm run build')
88+
if ( TARGET_ENV === 'production' ) {
89+
console.log( 'Building for prod...');
90+
91+
module.exports = merge( commonConfig, {
92+
93+
entry: path.join( __dirname, 'src/static/index.js' ),
94+
95+
module: {
96+
loaders: [
97+
{
98+
test: /\.elm$/,
99+
exclude: [/elm-stuff/, /node_modules/],
100+
loader: 'elm-webpack'
101+
},
102+
{
103+
test: /\.(css|scss)$/,
104+
loader: ExtractTextPlugin.extract( 'style-loader', [
105+
'css-loader',
106+
'postcss-loader',
107+
'sass-loader'
108+
])
109+
}
110+
]
111+
},
112+
113+
plugins: [
114+
new CopyWebpackPlugin([
115+
{
116+
from: 'src/static/img/',
117+
to: 'static/img/'
118+
},
119+
{
120+
from: 'src/favicon.ico'
121+
},
122+
]),
123+
124+
new webpack.optimize.OccurenceOrderPlugin(),
125+
126+
// extract CSS into a separate file
127+
new ExtractTextPlugin( './[hash].css', { allChunks: true } ),
128+
129+
// minify & mangle JS/CSS
130+
new webpack.optimize.UglifyJsPlugin({
131+
minimize: true,
132+
compressor: { warnings: false }
133+
// mangle: true
134+
})
135+
]
136+
137+
});
138+
}

0 commit comments

Comments
 (0)