Skip to content

Commit

Permalink
Update dependencies - Switch from extract-text to mini-css-extract
Browse files Browse the repository at this point in the history
  • Loading branch information
pqml committed Oct 9, 2018
1 parent 6fd0ad4 commit 1e4ea21
Show file tree
Hide file tree
Showing 12 changed files with 84 additions and 80 deletions.
8 changes: 3 additions & 5 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
{
"presets": [
[
"env",
"@babel/preset-env",
{
"targets": {
"browsers": ["last 2 versions", "ie >= 11"]
},
"targets": "> 0.5%, last 2 versions, Firefox ESR, ie >= 10, not dead",
"modules": false
}
]
],
"plugins": ["transform-runtime"]
"plugins": ["@babel/plugin-transform-runtime"]
}
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
8
v8.12.0
50 changes: 25 additions & 25 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "kirby-webpack",
"version": "0.9.1",
"version": "0.10.0",
"description": "A kirby starter-kit with modern frontend tools",
"main": "index.js",
"scripts": {
Expand Down Expand Up @@ -29,39 +29,39 @@
},
"homepage": "https://github.com/brocessing/kirby-webpack#readme",
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@pqml/node-php-server": "^0.4.0",
"autoprefixer": "^9.0.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"browser-sync": "^2.23.6",
"cross-env": "^5.1.4",
"autoprefixer": "^9.1.5",
"babel-loader": "^8.0.4",
"browser-sync": "^2.26.0",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"cssnano": "^4.0.5",
"eslint": "^5.2.0",
"eslint-config-standard": "^11.0.0",
"eslint-plugin-import": "^2.10.0",
"cssnano": "^4.1.4",
"eslint": "^5.6.1",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-standard": "^3.0.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"file-loader": "^2.0.0",
"fs-extra": "^7.0.0",
"github-download": "^0.5.0",
"kool-shell": "^2.1.0",
"less": "^3.0.1",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.3",
"postcss-loader": "^3.0.0",
"progress-bar-webpack-plugin": "^1.11.0",
"resolve-url-loader": "^2.3.0",
"style-loader": "^0.22.1",
"tail": "^1.2.3",
"uglifyjs-webpack-plugin": "^1.2.4",
"webpack": "^4.5.0",
"webpack-dev-middleware": "^3.1.2",
"webpack-hot-middleware": "^2.21.2",
"webpack-merge": "^4.1.2"
"resolve-url-loader": "^3.0.0",
"style-loader": "^0.23.1",
"tail": "^2.0.0",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack": "^4.20.2",
"webpack-dev-middleware": "^3.4.0",
"webpack-hot-middleware": "^2.24.3",
"webpack-merge": "^4.1.4"
},
"dependencies": {}
}
14 changes: 11 additions & 3 deletions scripts/utils/format-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,25 @@ let cached = null
function formatConfig (config) {
if (cached) return cached

const isDev = config.appEnv === 'development'

// format entries for webpack
const nEntries = {}
const projectRoot = path.join(__dirname, '..', '..')
for (let k in config.entries) {
const relativeWww = path.relative(projectRoot, config.paths.www)
const src = path.join(projectRoot, k)
const dist = path.relative(relativeWww, config.entries[k])
let dist = path.relative(relativeWww, config.entries[k])
const ext = path.parse(dist).ext

// Remove extension from dist name
// In dev, if it's css, append .css
if (!isDev || ext !== '.css') dist = dist.substr(0, dist.length - ext.length)

if (
dist.length >= 2 &&
dist.substr(0, 2) === '..' &&
config.appEnv === 'development'
isDev
) {
sh.log()
sh.warn(
Expand All @@ -39,7 +47,7 @@ function formatConfig (config) {
}

if (!nEntries[dist]) {
nEntries[dist] = (config.appEnv === 'development')
nEntries[dist] = isDev
? [src, 'webpack-hot-middleware/client?reload=true']
: src
} else if (Array.isArray(nEntries[dist])) {
Expand Down
5 changes: 3 additions & 2 deletions webpack.config.common.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,13 @@ if (user.css.preprocessorLoader) {
}

const webpack = {
entry: user.entries,
output: {
publicPath: user.paths.basepath,
// we bundle from the www folder to avoid messing with the webpack dev middleware
// all entries src/dest path are converted through scripts/utils/format-config.js
path: user.paths.www,
filename: '[name]',
filename: '[name].js',
chunkFilename: '[name].[id].chunk.js'
},
resolve: {
Expand All @@ -45,7 +46,7 @@ const webpack = {
{
test: /\.(js)$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/
exclude: /(node_modules)/
}
]
},
Expand Down
6 changes: 2 additions & 4 deletions webpack.config.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ if (user.css.preprocessorLoader) {

const devConfig = {
mode: 'development',
entry: user.entries,
devtool: 'eval-source-map',
module: {
rules: [
{
Expand All @@ -53,10 +53,8 @@ const devConfig = {
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devtool: '#eval-source-map'
]
}

module.exports = merge(common.webpack, devConfig)
70 changes: 31 additions & 39 deletions webpack.config.prod.js
Original file line number Diff line number Diff line change
@@ -1,60 +1,52 @@
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const UglifyPlugin = require('uglifyjs-webpack-plugin')

const common = require('./webpack.config.common')
const user = require('./scripts/utils/format-config')(require('./main.config.js'))

const prodConfig = {
mode: 'production',
entry: user.entries,
devtool: 'source-map',
module: {
rules: [
{
test: user.css.sourceRegexExt,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: common.CSSLoaders
})
use: [MiniCssExtractPlugin.loader].concat(common.CSSLoaders)
}
]
},
plugins: [
new webpack.optimize.ModuleConcatenationPlugin(),

new MiniCssExtractPlugin({
filename: '[name].css'
})
],
optimization: {
minimizer: [
new UglifyPlugin({
sourceMap: true,
parallel: true,
uglifyOptions: {
mangle: true,
keep_classnames: true,
keep_fnames: false,
compress: { inline: false, drop_console: true },
output: { comments: false }
}
})
],
// Extract all css into one file
new ExtractTextPlugin({
filename: (getPath) => {
const ext = path.extname(getPath('[name]'))
// If you import css from js entry files, these lines avoid to
// override the js files with the extract-text-plugin output.
// Instead, replace the bundle filepath extension by .css
return (ext === '.css')
? getPath('[name]')
: getPath('[name]').slice(0, -ext.length) + '.css'
},
allChunks: true
}),

// Minification and size optimization
new UglifyPlugin({
sourceMap: true,
parallel: true,
uglifyOptions: {
mangle: true,
keep_classnames: true,
keep_fnames: false,
compress: { inline: false, drop_console: true },
output: { comments: false }
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}),

new webpack.optimize.OccurrenceOrderPlugin()
],
devtool: '#source-map'
}
}
}

module.exports = merge(common.webpack, prodConfig)
3 changes: 3 additions & 0 deletions www/assets/builds/bundle.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions www/assets/builds/bundle.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions www/assets/builds/bundle.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions www/assets/builds/bundle.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion www/site/plugins/kirby-webpack/kirby-webpack.php
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,5 @@ function isWebpack() {
// Use it instead of css() for all your css files generated by webpack.
// This will enable the livereload feature when your are in development
function liveCSS ($href, $media = null) {
return isWebpack() ? js($href) : css($href, $media);
return isWebpack() ? js($href . '.js') : css($href, $media);
}

0 comments on commit 1e4ea21

Please sign in to comment.