start integration with webpack 2

This commit is contained in:
Marcos Moura 2017-02-07 19:24:29 -02:00
parent acc97d6c6c
commit 31ec207bd1
9 changed files with 1298 additions and 1095 deletions

View file

@ -13,15 +13,14 @@ const app = express();
const compiler = webpack(webpackConfig);
const rootPath = path.join(__dirname, '..', '..');
const devMiddlewareInstance = devMiddleware(compiler, {
quiet: true,
publicPath: config.publicPath,
index: config.indexPath,
stats: {
colors: true,
chunks: false
}
index: config.indexPath
});
const hotMiddlewareInstance = hotMiddleware(compiler);
const hotMiddlewareInstance = hotMiddleware(compiler, {
log() { }
});
compiler.plugin('compilation', (compilation) => {
compilation.plugin('html-webpack-plugin-after-emit', (data, done) => {
@ -36,14 +35,16 @@ app.use(hotMiddlewareInstance);
app.use('/', express.static(path.join(rootPath, config.docsPath)));
app.use('/assets', express.static(path.join(rootPath, config.assetsPath)));
export default app.listen(config.server.port, (error) => {
devMiddlewareInstance.waitUntilValid(() => {
let uri = 'http://localhost:' + config.server.port;
console.log(chalk.blue('> Listening at ' + uri + '\n'));
});
export default app.listen(config.server.port, (error) => {
if (error) {
console.log(chalk.red(error));
return;
}
console.log(chalk.blue('Listening at ' + uri + '\n'));
});

View file

@ -3,6 +3,10 @@ import webpack from 'webpack';
import eslintFormatter from 'eslint-friendly-formatter';
import config from '../config';
const resolvePath = (dir) => {
return path.resolve(__dirname, '..', '..', dir);
};
export default {
entry: {
docs: './docs/src/index.js'
@ -13,81 +17,68 @@ export default {
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [config.nodePath],
extensions: ['.js', '.vue', '.json'],
alias: {
assets: path.resolve(__dirname, '../../docs/src/assets')
assets: resolvePath('docs/src/assets')
}
},
resolveLoader: {
fallback: [config.nodePath]
},
module: {
preLoaders: [
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [
resolvePath('build'),
resolvePath('src'),
resolvePath('docs')
],
options: {
fix: true,
formatter: eslintFormatter
}
},
{
test: /\.vue$/,
loader: 'eslint',
include: config.projectRoot,
exclude: /node_modules/
loader: 'vue-loader',
options: {
loaders: {
css: 'vue-style-loader!css-loader',
scss: 'vue-style-loader!css-loader!sass-loader'
}
}
},
{
test: /\.js$/,
loader: 'eslint',
include: config.projectRoot,
exclude: /node_modules/
}
],
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
include: config.projectRoot,
exclude: /node_modules/
loader: 'babel-loader',
include: [
resolvePath('build'),
resolvePath('src'),
resolvePath('docs')
]
},
{
test: /\.css$/,
loader: 'vue-style-loader!css-loader'
use: ['vue-style-loader', 'css-loader']
},
{
test: /\.scss$/,
loader: 'vue-style-loader!css-loader!sass-loader'
use: ['vue-style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.theme$/,
loaders: ['raw', 'sass-loader']
use: ['raw-loader', 'sass-loader']
},
{
test: /\.json$/,
loaders: ['json-loader']
},
{
test: /\.(png|jpg|gif|svg)(\?.*)?$/,
loader: 'url',
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: '/assets/[name].[hash:8].[ext]'
}
},
{
test: /\.html$/,
loader: 'vue-html'
}
]
},
eslint: {
fix: true,
formatter: eslintFormatter
},
vue: {
loaders: {
css: 'vue-style-loader!css-loader',
scss: 'vue-style-loader!css-loader!sass-loader'
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': config.env

View file

@ -1,4 +1,3 @@
import webpack from 'webpack';
import merge from 'webpack-merge';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import OptimizeJsPlugin from 'optimize-js-plugin';
@ -12,11 +11,7 @@ const devConfig = merge(prodConfig, {
});
devConfig.plugins = [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new OptimizeJsPlugin({
sourceMap: false
}),
new OptimizeJsPlugin(),
new ExtractTextPlugin('[name].css')
];

View file

@ -1,23 +1,25 @@
import webpack from 'webpack';
import merge from 'webpack-merge';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin';
import baseWebpackConfig from './base';
import config from '../config';
Object.keys(baseWebpackConfig.entry).forEach((name) => {
baseWebpackConfig.entry[name] = ['./build/server/client'].concat(baseWebpackConfig.entry[name]);
baseWebpackConfig.entry[name] = ['./build/server/client', ...[baseWebpackConfig.entry[name]]];
});
export default merge(baseWebpackConfig, {
devtool: 'source-map',
devtool: '#eval-source-map',
plugins: [
new webpack.WatchIgnorePlugin([config.nodePath]),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'docs/index.html',
inject: true
})
}),
new FriendlyErrorsPlugin()
]
});

View file

@ -18,29 +18,45 @@ export default merge(baseConfig, {
filename: '[name].[chunkhash:8].js',
chunkFilename: '[name].[chunkhash:8].js'
},
vue: {
loaders: {
css: ExtractTextPlugin.extract('css'),
scss: ExtractTextPlugin.extract('css!sass')
},
postcss: [
autoprefixer({
browsers: ['last 3 versions']
})
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract('css'),
scss: ExtractTextPlugin.extract('css!sass')
},
postcss: [
autoprefixer({
browsers: ['last 3 versions']
})
]
}
}
]
},
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
comments: false
output: {
comments: false
},
sourceMap: false
}),
new OptimizeJsPlugin({
sourceMap: false
}),
new ExtractTextPlugin('[name].[contenthash:8].css'),
new ExtractTextPlugin({
filename: path.join(docsPath, '[name].[contenthash:8].css')
}),
new CopyWebpackPlugin([
{
context: config.assetsPath,
@ -96,7 +112,6 @@ export default merge(baseConfig, {
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
}),
new webpack.optimize.OccurenceOrderPlugin()
})
]
});

View file

@ -35,15 +35,23 @@ export default merge(baseConfig, {
library: 'VueMaterial',
libraryTarget: 'umd'
},
vue: {
loaders: {
css: ExtractTextPlugin.extract('css'),
scss: ExtractTextPlugin.extract('css!sass')
},
postcss: [
autoprefixer({
browsers: ['last 2 versions']
})
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract('css'),
scss: ExtractTextPlugin.extract('css!sass')
},
postcss: [
autoprefixer({
browsers: ['last 2 versions']
})
]
}
}
]
},
externals: {
@ -56,27 +64,33 @@ export default merge(baseConfig, {
}
},
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
comments: false
output: {
comments: false
},
sourceMap: false
}),
new webpack.optimize.OccurenceOrderPlugin(),
new OptimizeJsPlugin({
sourceMap: false
}),
new webpack.BannerPlugin(
`/*!
* Vue Material v${version}
* Made with love by Marcos Moura
* Released under the MIT License.
*/`
, {
new webpack.BannerPlugin({
banner: `/*!
* Vue Material v${version}
* Made with love by Marcos Moura
* Released under the MIT License.
*/ `,
raw: true,
entryOnly: true
}),
new ExtractTextPlugin('[name].css')
new ExtractTextPlugin({
filename: path.join(config.rootPath, '[name].css')
})
]
});

View file

@ -1,48 +1,48 @@
/* Root */
const Introduction = require('./pages/Introduction');
const GettingStarted = require('./pages/GettingStarted');
const About = require('./pages/About');
const Changelog = require('./pages/Changelog');
const Error404 = require('./pages/Error');
const Introduction = (r) => require.ensure([], () => r(require('./pages/Introduction')), 'base');
const GettingStarted = (r) => require.ensure([], () => r(require('./pages/GettingStarted')), 'base');
const About = (r) => require.ensure([], () => r(require('./pages/About')), 'base');
const Changelog = (r) => require.ensure([], () => r(require('./pages/Changelog')), 'base');
const Error404 = (r) => require.ensure([], () => r(require('./pages/Error')), 'base');
/* Components */
const Avatar = (resolve) => require(['./pages/components/Avatar'], resolve);
const BottomBar = (resolve) => require(['./pages/components/BottomBar'], resolve);
const Buttons = (resolve) => require(['./pages/components/Buttons'], resolve);
const ButtonToggle = (resolve) => require(['./pages/components/ButtonToggle'], resolve);
const Card = (resolve) => require(['./pages/components/Card'], resolve);
const Checkbox = (resolve) => require(['./pages/components/Checkbox'], resolve);
const Chips = (resolve) => require(['./pages/components/Chips'], resolve);
const Dialog = (resolve) => require(['./pages/components/Dialog'], resolve);
const File = (resolve) => require(['./pages/components/File'], resolve);
const Icon = (resolve) => require(['./pages/components/Icon'], resolve);
const ImageLoader = (resolve) => require(['./pages/components/ImageLoader'], resolve);
const InkRipple = (resolve) => require(['./pages/components/InkRipple'], resolve);
const Input = (resolve) => require(['./pages/components/Input'], resolve);
const List = (resolve) => require(['./pages/components/List'], resolve);
const Menu = (resolve) => require(['./pages/components/Menu'], resolve);
const Progress = (resolve) => require(['./pages/components/Progress'], resolve);
const Radio = (resolve) => require(['./pages/components/Radio'], resolve);
const Select = (resolve) => require(['./pages/components/Select'], resolve);
const Sidenav = (resolve) => require(['./pages/components/Sidenav'], resolve);
const Snackbar = (resolve) => require(['./pages/components/Snackbar'], resolve);
const SpeedDial = (resolve) => require(['./pages/components/SpeedDial'], resolve);
const Spinner = (resolve) => require(['./pages/components/Spinner'], resolve);
const Subheader = (resolve) => require(['./pages/components/Subheader'], resolve);
const Switch = (resolve) => require(['./pages/components/Switch'], resolve);
const Table = (resolve) => require(['./pages/components/Table'], resolve);
const Tabs = (resolve) => require(['./pages/components/Tabs'], resolve);
const Toolbar = (resolve) => require(['./pages/components/Toolbar'], resolve);
const Tooltip = (resolve) => require(['./pages/components/Tooltip'], resolve);
const Whiteframe = (resolve) => require(['./pages/components/Whiteframe'], resolve);
const Avatar = (r) => require.ensure([], () => r(require('./pages/components/Avatar')), 'components');
const BottomBar = (r) => require.ensure([], () => r(require('./pages/components/BottomBar')), 'components');
const Buttons = (r) => require.ensure([], () => r(require('./pages/components/Buttons')), 'components');
const ButtonToggle = (r) => require.ensure([], () => r(require('./pages/components/ButtonToggle')), 'components');
const Card = (r) => require.ensure([], () => r(require('./pages/components/Card')), 'components');
const Checkbox = (r) => require.ensure([], () => r(require('./pages/components/Checkbox')), 'components');
const Chips = (r) => require.ensure([], () => r(require('./pages/components/Chips')), 'components');
const Dialog = (r) => require.ensure([], () => r(require('./pages/components/Dialog')), 'components');
const FileComponent = (r) => require.ensure([], () => r(require('./pages/components/File')), 'components');
const Icon = (r) => require.ensure([], () => r(require('./pages/components/Icon')), 'components');
const ImageLoader = (r) => require.ensure([], () => r(require('./pages/components/ImageLoader')), 'components');
const InkRipple = (r) => require.ensure([], () => r(require('./pages/components/InkRipple')), 'components');
const Input = (r) => require.ensure([], () => r(require('./pages/components/Input')), 'components');
const List = (r) => require.ensure([], () => r(require('./pages/components/List')), 'components');
const Menu = (r) => require.ensure([], () => r(require('./pages/components/Menu')), 'components');
const Progress = (r) => require.ensure([], () => r(require('./pages/components/Progress')), 'components');
const Radio = (r) => require.ensure([], () => r(require('./pages/components/Radio')), 'components');
const Select = (r) => require.ensure([], () => r(require('./pages/components/Select')), 'components');
const Sidenav = (r) => require.ensure([], () => r(require('./pages/components/Sidenav')), 'components');
const Snackbar = (r) => require.ensure([], () => r(require('./pages/components/Snackbar')), 'components');
const SpeedDial = (r) => require.ensure([], () => r(require('./pages/components/SpeedDial')), 'components');
const Spinner = (r) => require.ensure([], () => r(require('./pages/components/Spinner')), 'components');
const Subheader = (r) => require.ensure([], () => r(require('./pages/components/Subheader')), 'components');
const Switch = (r) => require.ensure([], () => r(require('./pages/components/Switch')), 'components');
const Table = (r) => require.ensure([], () => r(require('./pages/components/Table')), 'components');
const Tabs = (r) => require.ensure([], () => r(require('./pages/components/Tabs')), 'components');
const Toolbar = (r) => require.ensure([], () => r(require('./pages/components/Toolbar')), 'components');
const Tooltip = (r) => require.ensure([], () => r(require('./pages/components/Tooltip')), 'components');
const Whiteframe = (r) => require.ensure([], () => r(require('./pages/components/Whiteframe')), 'components');
/* UI Elements */
const Typography = (resolve) => require(['./pages/ui-elements/Typography'], resolve);
const Layout = (resolve) => require(['./pages/ui-elements/Layout'], resolve);
const Typography = (r) => require.ensure([], () => r(require('./pages/ui-elements/Typography')), 'ui-elements');
const Layout = (r) => require.ensure([], () => r(require('./pages/ui-elements/Layout')), 'ui-elements');
/* Themes */
const Configuration = (resolve) => require(['./pages/themes/Configuration'], resolve);
const DynamicThemes = (resolve) => require(['./pages/themes/DynamicThemes'], resolve);
const Configuration = (r) => require.ensure([], () => r(require('./pages/themes/Configuration')), 'themes');
const DynamicThemes = (r) => require.ensure([], () => r(require('./pages/themes/DynamicThemes')), 'themes');
const main = [
{
@ -116,7 +116,7 @@ const components = [
{
path: '/components/file',
name: 'components:file',
component: File
component: FileComponent
},
{
path: '/components/icon',

View file

@ -40,20 +40,20 @@
"release": "bash build/release.sh"
},
"dependencies": {
"vue": "^2.1.8"
"vue": "^2.1.10"
},
"devDependencies": {
"autoprefixer": "^6.6.1",
"autoprefixer": "^6.7.2",
"autosize": "^3.0.20",
"babel-cli": "^6.18.0",
"babel-core": "^6.21.0",
"babel-cli": "^6.22.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-es2017": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-es2017": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"chalk": "^1.1.3",
"chokidar": "^1.6.1",
"clipboard": "^1.5.16",
@ -61,43 +61,32 @@
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.26.1",
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
"eslint": "^3.13.0",
"eslint": "^3.15.0",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.6.1",
"eslint-plugin-html": "^1.7.0",
"eslint-plugin-html": "^2.0.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"express": "^4.14.1",
"extract-text-webpack-plugin": "beta",
"file-loader": "^0.10.0",
"friendly-errors-webpack-plugin": "^1.1.3",
"highlight.js": "^9.9.0",
"html-webpack-plugin": "^2.26.0",
"json-loader": "^0.5.4",
"node-sass": "^4.1.1",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.0",
"optimize-js-plugin": "^0.0.4",
"ora": "^0.4.0",
"ora": "^1.1.0",
"raw-loader": "^0.5.1",
"sass-loader": "^4.1.1",
"sass-loader": "^5.0.0",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^2.0.7",
"vue-hot-reload-api": "^2.0.8",
"vue-html-loader": "^1.2.3",
"vue-loader": "^10.0.2",
"vue-router": "^2.1.1",
"vue-style-loader": "^1.0.0",
"vue-template-compiler": "^2.1.8",
"webpack": "^1.14.0",
"webpack-dev-middleware": "^1.9.0",
"webpack-hot-middleware": "^2.15.0",
"webpack-merge": "^2.3.1"
},
"hyperlayout": [
[
[
"yarn run dev",
[
"",
"g p"
]
]
]
]
"vue-loader": "^10.3.0",
"vue-router": "^2.2.0",
"vue-style-loader": "^2.0.0",
"vue-template-compiler": "^2.1.10",
"webpack": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.16.1",
"webpack-merge": "^2.6.1"
}
}

2028
yarn.lock

File diff suppressed because it is too large Load diff