From 9f4338af95308d76487e5d8dfbd1c25422b588a7 Mon Sep 17 00:00:00 2001 From: Guillaume Vincent Date: Fri, 7 Oct 2016 19:42:37 +0200 Subject: [PATCH] extract css to fix error with fontawesome --- index.html | 1 + package.json | 39 +++++++++-------- webpack.config.js | 124 ++++++++++++++++++------------------------------------ 3 files changed, 64 insertions(+), 100 deletions(-) diff --git a/index.html b/index.html index f23f419..e982189 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ LessPass +
diff --git a/package.json b/package.json index 7783a36..5f81417 100644 --- a/package.json +++ b/package.json @@ -1,42 +1,45 @@ { "name": "lesspass-frontend", - "description": "vuejs implementation of the LessPass password manager", + "description": "frontend for LessPass with vuejs", "author": "Guillaume Vincent ", "private": true, "scripts": { "dev": "webpack-dev-server --hot --host 0.0.0.0", - "build": "NODE_ENV=production webpack --progress --hide-modules", + "build": "NODE_ENV=production webpack --display-error-details --progress --hide-modules", "test": "ava test --compilers js:babel-register" }, - "devDependencies": { - "ava": "^0.16.0", + "dependencies": { "axios": "^0.14.0", - "babel-core": "^6.17.0", - "babel-loader": "^6.2.5", "babel-polyfill": "^6.16.0", - "babel-preset-es2015": "^6.16.0", - "babel-register": "^6.16.3", "bootstrap": "^4.0.0-alpha.4", "clipboard": "^1.5.12", - "css-loader": "^0.25.0", - "file-loader": "^0.9.0", "font-awesome": "^4.6.3", "hint.css": "^2.3.2", - "json-loader": "^0.5.4", "jwt-decode": "^2.1.0", - "lesspass": "^4.0.0", + "lesspass": "^4.0.4", "lodash.debounce": "^4.0.8", "moment": "^2.15.0", - "nock": "^8.0.0", "pilou": "^0.1.4", - "style-loader": "^0.13.1", "tether": "^1.3.7", - "url-loader": "^0.5.7", "vue": "^2.0.1", + "vuex": "^2.0.0" + }, + "devDependencies": { + "ava": "^0.16.0", + "babel-core": "^6.17.0", + "babel-loader": "^6.2.5", + "babel-preset-es2015": "^6.16.0", + "babel-register": "^6.16.3", + "css-loader": "^0.25.0", + "extract-text-webpack-plugin": "^1.0.1", + "file-loader": "^0.9.0", + "json-loader": "^0.5.4", + "nock": "^8.0.0", + "style-loader": "^0.13.1", + "url-loader": "^0.5.7", "vue-loader": "^9.5.1", - "vuex": "^2.0.0", - "webpack": "^2.1.0-beta.25", - "webpack-dev-server": "^2.1.0-beta.8" + "webpack": "^1.13.2", + "webpack-dev-server": "^1.16.2" }, "babel": { "presets": [ diff --git a/webpack.config.js b/webpack.config.js index f2920a0..44d2431 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,17 +1,23 @@ var webpack = require('webpack'); var path = require('path'); +var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { - entry: { - app: path.resolve(__dirname, './src/main.js') - }, + entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), - filename: 'bundle.js', publicPath: '/dist/', + filename: 'bundle.js' }, resolve: { - extensions: ['.js', '.vue'] + extensions: ['', '.js', '.vue'], + fallback: [path.join(__dirname, 'node_modules')], + alias: { + src: path.resolve(__dirname, './src') + } + }, + resolveLoader: { + root: path.join(__dirname, 'node_modules') }, module: { loaders: [ @@ -19,15 +25,12 @@ module.exports = { {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, {test: /\.json$/, loader: "json-loader"}, {test: /\.(png|jpg|jpeg|gif)$/, loader: 'url?limit=10000&name=images/[name].[ext]',}, - {test: /\.css$/, loader: 'style!css?sourceMap'}, - {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"}, - {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"}, - {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"}, - {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"}, - {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"} + {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}, + {test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader'} ] }, plugins: [ + new ExtractTextPlugin("styles.css"), new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', @@ -35,76 +38,33 @@ module.exports = { 'Tether': 'tether', 'window.Tether': 'tether' }) - ] + ], + devServer: { + historyApiFallback: true, + noInfo: true + }, + devtool: '#eval-source-map' }; -// var webpack = require('webpack'); -// var path = require('path'); -// -// module.exports = { -// entry: { -// app: path.resolve(__dirname, './src/main.js') -// }, -// output: { -// path: path.resolve(__dirname, './dist'), -// filename: 'bundle.js', -// publicPath: '', -// }, -// resolve: { -// modulesDirectories: ['node_modules', 'src'], -// extensions: ['.js', '.vue'], -// }, -// module: { -// loaders: [ -// {test: /\.vue$/, loader: 'vue-loader'}, -// {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, -// {test: /\.(png|jpg|jpeg|gif)$/, loader: 'url?limit=10000&name=images/[name].[ext]',}, -// {test: /\.css$/, loader: ExtractTextPlugin.extract({loader: 'css-loader'})} -// ] -// }, -// devtool: '#eval-source-map', -// plugins: [ -// new ExtractTextPlugin('styles.css'), -// new webpack.ProvidePlugin({ -// $: 'jquery', -// jQuery: 'jquery', -// 'window.jQuery': 'jquery', -// 'Tether': 'tether', -// 'window.Tether': 'tether' -// }) -// ], -// devServer: { -// historyApiFallback: true, -// hot: true, -// progress: false, -// colors: true, -// proxy: {}, -// } -// }; -// -// if (process.env.NODE_ENV === 'production') { -// module.exports.devtool = false; -// module.exports.plugins = (module.exports.plugins || []).concat([ -// new webpack.LoaderOptionsPlugin({ -// minimize: true -// }), -// new webpack.optimize.CommonsChunkPlugin({ -// name: 'app', -// filename: 'common.js', -// }), -// new webpack.DefinePlugin({ -// 'process.env': { -// NODE_ENV: 'production' -// } -// }), -// new webpack.optimize.UglifyJsPlugin({ -// compress: { -// warnings: true -// }, -// output: { -// comments: false -// }, -// sourceMap: false -// }) -// ]) -// } +if (process.env.NODE_ENV === 'production') { + module.exports.devtool = false; + module.exports.plugins = (module.exports.plugins || []).concat([ + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: '"production"' + } + }), + new webpack.optimize.DedupePlugin(), + new webpack.optimize.UglifyJsPlugin({ + compress: { + warnings: true + }, + output: { + comments: false + }, + sourceMap: false + }), + new webpack.optimize.AggressiveMergingPlugin() + ]); +} +