Created
May 10, 2017 09:47
-
-
Save moeinrahimi/6326106080b76dfb2451b041bc0201bd to your computer and use it in GitHub Desktop.
Extract all your css styles including require files and component's style into one css file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var path = require('path') | |
var webpack = require('webpack') | |
const ExtractTextPlugin = require("extract-text-webpack-plugin"); | |
module.exports = { | |
entry: './src/main.js', | |
output: { | |
path: path.resolve(__dirname, './dist'), | |
publicPath: '/dist/', | |
filename: 'build.js' | |
}, | |
module: { | |
rules: [ | |
{ | |
// this one extracts css files that imported to styles.css | |
test: /\.css$/, | |
use: ExtractTextPlugin.extract({ | |
fallback: 'style-loader' , | |
use: "css-loader" | |
}) | |
}, | |
{ | |
test: /\.vue$/, | |
loader: 'vue-loader', | |
options: { | |
loaders: { | |
// and this dude here extracts component's styles into styles.css | |
less: ExtractTextPlugin.extract({ | |
use: 'css-loader', | |
fallback: 'vue-style-loader' | |
}) | |
} | |
} | |
}, | |
{ | |
test: /\.js$/, | |
loader: 'babel-loader', | |
exclude: /node_modules/ | |
}, | |
{ | |
test: /\.(png|jpg|gif|svg)$/, | |
loader: 'file-loader', | |
options: { | |
name: '[name].[ext]?[hash]' | |
} | |
}, | |
{ | |
test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/, | |
loader: 'url-loader?importLoaders=1&limit=100000' | |
} | |
] | |
}, | |
plugins: [ | |
new ExtractTextPlugin("styles.css"), | |
], | |
resolve: { | |
alias: { | |
'vue$': 'vue/dist/vue.esm.js' | |
} | |
}, | |
devServer: { | |
historyApiFallback: true, | |
noInfo: true | |
}, | |
performance: { | |
hints: false | |
}, | |
devtool: '#eval-source-map' | |
} | |
if (process.env.NODE_ENV === 'production') { | |
module.exports.devtool = '#source-map' | |
// http://vue-loader.vuejs.org/en/workflow/production.html | |
module.exports.plugins = (module.exports.plugins || []).concat([ | |
new webpack.DefinePlugin({ | |
'process.env': { | |
NODE_ENV: '"production"' | |
} | |
}), | |
new webpack.optimize.UglifyJsPlugin({ | |
sourceMap: true, | |
compress: { | |
warnings: false | |
} | |
}), | |
new webpack.LoaderOptionsPlugin({ | |
minimize: true | |
}) | |
]) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment