@@ 1-149 (lines=149) @@ | ||
1 | const path = require( 'path' ); |
|
2 | const webpack = require( 'webpack' ); |
|
3 | const HtmlWebpackPlugin = require( 'html-webpack-plugin' ); |
|
4 | const ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); |
|
5 | const CopyWebpackPlugin = require( 'copy-webpack-plugin' ); |
|
6 | const MinifyPlugin = require( 'babel-minify-webpack-plugin' ); |
|
7 | ||
8 | const srcDir = path.resolve( __dirname, '..', 'src' ); |
|
9 | const distDir = path.resolve( __dirname, '..', 'dist' ); |
|
10 | const nodeModulesDir = path.resolve( require.resolve( '@material/switch/mdc-switch.scss' ), '..', '..', '..' ); |
|
11 | ||
12 | module.exports = { |
|
13 | mode: 'production', |
|
14 | ||
15 | context: srcDir, |
|
16 | ||
17 | devtool: false, |
|
18 | ||
19 | entry: { |
|
20 | application: './index.js', |
|
21 | bundle: './controls/index.js' |
|
22 | }, |
|
23 | ||
24 | output: { |
|
25 | filename: '[name].min.js', |
|
26 | path: distDir, |
|
27 | publicPath: '/', |
|
28 | sourceMapFilename: '[name].map' |
|
29 | }, |
|
30 | ||
31 | module: { |
|
32 | rules: [ |
|
33 | { |
|
34 | test: /\.ejs$/, |
|
35 | loader: 'ejs-loader' |
|
36 | }, |
|
37 | { |
|
38 | test: /\.html$/, |
|
39 | use: [ |
|
40 | { |
|
41 | loader: 'html-loader', |
|
42 | options: { |
|
43 | minimize: true |
|
44 | } |
|
45 | } |
|
46 | ] |
|
47 | }, |
|
48 | { |
|
49 | test: /\.js$/, |
|
50 | loader: 'babel-loader', |
|
51 | include: [ srcDir ], |
|
52 | options: { |
|
53 | presets: [ '@babel/preset-env' ] |
|
54 | } |
|
55 | }, |
|
56 | { |
|
57 | test: /\.svg$/, |
|
58 | loader: 'svg-inline-loader' |
|
59 | }, |
|
60 | { |
|
61 | test: /\.js$/, |
|
62 | enforce: 'pre', |
|
63 | exclude: /node_modules/, |
|
64 | loader: 'eslint-loader', |
|
65 | options: { |
|
66 | emitWarning: true |
|
67 | } |
|
68 | }, |
|
69 | { |
|
70 | test: /\.(scss|css)$/, |
|
71 | use: ExtractTextPlugin.extract( { |
|
72 | fallback: 'style-loader', |
|
73 | use: [ |
|
74 | { |
|
75 | loader: 'css-loader', |
|
76 | options: { |
|
77 | minimize: true |
|
78 | } |
|
79 | }, |
|
80 | { |
|
81 | loader: 'sass-loader', |
|
82 | options: { |
|
83 | includePaths: [ nodeModulesDir ] |
|
84 | } |
|
85 | }, |
|
86 | { |
|
87 | loader: 'postcss-loader', |
|
88 | options: { |
|
89 | plugins: loader => [ require( 'autoprefixer' )() ] |
|
90 | } |
|
91 | } |
|
92 | ] |
|
93 | } ) |
|
94 | }, |
|
95 | { |
|
96 | test: /\.(jpg|jpeg|png|gif|ico)$/, |
|
97 | loader: 'url-loader', |
|
98 | query: { |
|
99 | limit: 10000, // Use data url for assets <= 10KB |
|
100 | name: './[name].[hash].[ext]' |
|
101 | } |
|
102 | } |
|
103 | ] |
|
104 | }, |
|
105 | ||
106 | plugins: [ |
|
107 | new CopyWebpackPlugin( [ |
|
108 | { |
|
109 | from: './../static', |
|
110 | to: '' |
|
111 | }, |
|
112 | { |
|
113 | from: require.resolve( 'Iris/dist/iris.min.js' ), |
|
114 | to: './static' |
|
115 | }, |
|
116 | { |
|
117 | from: require.resolve( 'sass.js/dist/sass.worker.js' ), |
|
118 | to: './static' |
|
119 | }, |
|
120 | { |
|
121 | from: path.resolve( require.resolve( 'Buttons/scss/buttons.scss' ), '..' ), |
|
122 | to: './scss/color-palette-scss/buttons' |
|
123 | }, |
|
124 | { |
|
125 | from: srcDir + '/controls/color/scss/utilities/color-classes.sass', |
|
126 | to: './scss/color-palette-scss/classes/color-classes.scss' |
|
127 | } |
|
128 | ] ), |
|
129 | ||
130 | new MinifyPlugin(), |
|
131 | ||
132 | new webpack.NamedModulesPlugin(), |
|
133 | ||
134 | new HtmlWebpackPlugin( { |
|
135 | template: path.join( srcDir, 'index.ejs' ), |
|
136 | path: distDir, |
|
137 | filename: 'index.html', |
|
138 | hash: true, |
|
139 | minify: { |
|
140 | removeComments: true, |
|
141 | minifyJS: true, |
|
142 | minifyCSS: true, |
|
143 | collapseWhitespace: true |
|
144 | } |
|
145 | } ), |
|
146 | ||
147 | new ExtractTextPlugin( '[name].min.css' ) |
|
148 | ] |
|
149 | }; |
|
150 |
@@ 1-141 (lines=141) @@ | ||
1 | const path = require( 'path' ); |
|
2 | const webpack = require( 'webpack' ); |
|
3 | const HtmlWebpackPlugin = require( 'html-webpack-plugin' ); |
|
4 | const CopyWebpackPlugin = require( 'copy-webpack-plugin' ); |
|
5 | const StyleLintPlugin = require( 'stylelint-webpack-plugin' ); |
|
6 | ||
7 | const srcDir = path.resolve( __dirname, '..', 'src' ); |
|
8 | ||
9 | module.exports = { |
|
10 | mode: 'development', |
|
11 | ||
12 | context: srcDir, |
|
13 | ||
14 | entry: [ './index.js' ], |
|
15 | ||
16 | output: { |
|
17 | filename: 'bundle.js', |
|
18 | path: path.resolve( __dirname, '..', 'dist' ), |
|
19 | publicPath: '/' |
|
20 | }, |
|
21 | ||
22 | devServer: { |
|
23 | contentBase: srcDir, |
|
24 | publicPath: '/', |
|
25 | historyApiFallback: true, |
|
26 | port: 3000, |
|
27 | overlay: { |
|
28 | errors: true, |
|
29 | warnings: true |
|
30 | } |
|
31 | }, |
|
32 | ||
33 | module: { |
|
34 | rules: [ |
|
35 | { |
|
36 | test: /\.ejs$/, |
|
37 | loader: 'ejs-loader' |
|
38 | }, |
|
39 | { |
|
40 | test: /\.html$/, |
|
41 | use: [ |
|
42 | { |
|
43 | loader: 'html-loader', |
|
44 | options: { |
|
45 | minimize: true |
|
46 | } |
|
47 | } |
|
48 | ] |
|
49 | }, |
|
50 | { |
|
51 | test: /\.js$/, |
|
52 | exclude: /node_modules/, |
|
53 | loader: 'babel-loader', |
|
54 | options: { |
|
55 | presets: [ '@babel/preset-env' ] |
|
56 | } |
|
57 | }, |
|
58 | { |
|
59 | test: /\.js$/, |
|
60 | enforce: 'pre', |
|
61 | ||
62 | loader: 'eslint-loader', |
|
63 | options: { |
|
64 | emitWarning: true |
|
65 | } |
|
66 | }, |
|
67 | { |
|
68 | test: /\.svg$/, |
|
69 | loader: 'svg-inline-loader' |
|
70 | }, |
|
71 | { |
|
72 | test: /\.(scss|css)$/, |
|
73 | exclude: [ |
|
74 | srcDir + '/controls/color/scss/utilities/color-classes.scss', |
|
75 | require.resolve( 'Buttons/scss/buttons.scss' ) |
|
76 | ], |
|
77 | use: [ |
|
78 | { |
|
79 | loader: 'style-loader' |
|
80 | }, |
|
81 | { |
|
82 | loader: 'css-loader' |
|
83 | }, |
|
84 | { |
|
85 | loader: 'sass-loader', |
|
86 | options: { |
|
87 | includePaths: [ 'node_modules' ] |
|
88 | } |
|
89 | } |
|
90 | ] |
|
91 | }, |
|
92 | { |
|
93 | test: /\.(jpg|jpeg|png|gif|ico)$/, |
|
94 | loader: 'url-loader', |
|
95 | query: { |
|
96 | limit: 10000, // Use data url for assets <= 10KB |
|
97 | name: 'static/images/[name].[hash].[ext]' |
|
98 | } |
|
99 | } |
|
100 | ] |
|
101 | }, |
|
102 | ||
103 | plugins: [ |
|
104 | new CopyWebpackPlugin( [ |
|
105 | { |
|
106 | from: './../static', |
|
107 | to: '' |
|
108 | }, |
|
109 | { |
|
110 | from: require.resolve( 'Iris/dist/iris.min.js' ), |
|
111 | to: './static' |
|
112 | }, |
|
113 | { |
|
114 | from: require.resolve( 'sass.js/dist/sass.worker.js' ), |
|
115 | to: './static' |
|
116 | }, |
|
117 | { |
|
118 | from: path.resolve( require.resolve( 'Buttons/scss/buttons.scss' ), '..' ), |
|
119 | to: './scss/color-palette-scss/buttons' |
|
120 | }, |
|
121 | { |
|
122 | from: srcDir + '/controls/color/scss/utilities/color-classes.sass', |
|
123 | to: './scss/color-palette-scss/classes/color-classes.scss' |
|
124 | } |
|
125 | ] ), |
|
126 | ||
127 | new webpack.HotModuleReplacementPlugin(), |
|
128 | ||
129 | new webpack.NamedModulesPlugin(), |
|
130 | ||
131 | // new StyleLintPlugin( { |
|
132 | // files: [ '**/*.s?(c)ss' ] |
|
133 | // } ), |
|
134 | ||
135 | new HtmlWebpackPlugin( { |
|
136 | template: path.join( srcDir, 'index.ejs' ), |
|
137 | path: path.resolve( __dirname, '..', 'dist' ), |
|
138 | filename: 'index.html' |
|
139 | } ) |
|
140 | ] |
|
141 | }; |
|
142 |