mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Upgraded to webpack 4 (#941)
* Upgrade to webpack 4 - partly working * Upgraded to webpack 4 * Fixed error with webpack ProvidePlugin * Fixed ESLint errors
This commit is contained in:
Martin Donath
GitHub
parent
18221a7d1f
commit
4e72119d20
11
.babelrc
11
.babelrc
@ -1,17 +1,12 @@
|
||||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
["@babel/preset-env", {
|
||||
"loose": true,
|
||||
"target": {
|
||||
"browsers": [
|
||||
"> 1%",
|
||||
"last 2 versions"
|
||||
]
|
||||
}
|
||||
"targets": " > 1%, last 2 versions"
|
||||
}]
|
||||
],
|
||||
"plugins": [
|
||||
["transform-react-jsx", {
|
||||
["@babel/plugin-transform-react-jsx", {
|
||||
"pragma": "JSX.createElement"
|
||||
}]
|
||||
]
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
"eqeqeq": 2,
|
||||
"func-call-spacing": 2,
|
||||
"func-names": [2, "never"],
|
||||
"func-style": 2,
|
||||
"func-style": 0,
|
||||
"generator-star-spacing": 2,
|
||||
"indent": [2, 2, {
|
||||
"FunctionDeclaration": {
|
||||
|
||||
2
Makefile
2
Makefile
@ -34,7 +34,7 @@ node_modules:
|
||||
|
||||
# Build theme for distribution with Webpack
|
||||
material: $(shell find src) .babelrc webpack.config.js
|
||||
$(shell npm bin)/webpack --env.prod
|
||||
$(shell npm bin)/webpack --mode production
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
# Rules
|
||||
|
||||
13
material/assets/javascripts/application.8994c97c.js
Normal file
13
material/assets/javascripts/application.8994c97c.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
material/assets/javascripts/modernizr.8c900955.js
Normal file
1
material/assets/javascripts/modernizr.8c900955.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
1
material/assets/stylesheets/application.572ca0f0.css
Normal file
1
material/assets/stylesheets/application.572ca0f0.css
Normal file
File diff suppressed because one or more lines are too long
@ -48,7 +48,7 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/application.11e41852.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/application.572ca0f0.css' | url }}">
|
||||
{% if palette.primary or palette.accent %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/application-palette.22915126.css' | url }}">
|
||||
{% endif %}
|
||||
@ -61,7 +61,7 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block libs %}
|
||||
<script src="{{ 'assets/javascripts/modernizr.20ef595d.js' | url }}"></script>
|
||||
<script src="{{ 'assets/javascripts/modernizr.8c900955.js' | url }}"></script>
|
||||
{% endblock %}
|
||||
{% block fonts %}
|
||||
{% if font != false %}
|
||||
@ -180,7 +180,7 @@
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% block scripts %}
|
||||
<script src="{{ 'assets/javascripts/application.905597d0.js' | url }}"></script>
|
||||
<script src="{{ 'assets/javascripts/application.8994c97c.js' | url }}"></script>
|
||||
{% if lang.t("search.language") != "en" %}
|
||||
{% set languages = lang.t("search.language").split(",") %}
|
||||
{% if languages | length and languages[0] != "" %}
|
||||
|
||||
4582
package-lock.json
generated
4582
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
25
package.json
25
package.json
@ -31,29 +31,29 @@
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.2.3",
|
||||
"@babel/core": "^7.2.2",
|
||||
"@babel/plugin-transform-react-jsx": "^7.2.0",
|
||||
"@babel/preset-env": "^7.2.3",
|
||||
"autoprefixer": "^9.4.3",
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-eslint": "^10.0.0",
|
||||
"babel-loader": "^7.1.1",
|
||||
"babel-loader": "^8.0.4",
|
||||
"babel-plugin-add-module-exports": "^1.0.0",
|
||||
"babel-plugin-transform-react-jsx": "^6.24.1",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"chalk": "^2.0.1",
|
||||
"clipboard": "^2.0.0",
|
||||
"copy-webpack-plugin": "^4.2.1",
|
||||
"css-loader": "^1.0.0",
|
||||
"css-loader": "^2.1.0",
|
||||
"css-mqpacker": "^7.0.0",
|
||||
"cssmin": "^0.4.3",
|
||||
"custom-event-polyfill": "^1.0.6",
|
||||
"customizr": "^1.0.0-alpha",
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
"eslint": "^5.11.1",
|
||||
"event-hooks-webpack-plugin": "^1.0.0",
|
||||
"event-hooks-webpack-plugin": "^2.1.1",
|
||||
"expose-loader": "^0.7.4",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"extract-loader": "^3.1.0",
|
||||
"fastclick": "^1.0.6",
|
||||
"file-loader": "^2.0.0",
|
||||
"file-loader": "^3.0.1",
|
||||
"git-hooks": "^1.1.8",
|
||||
"html-minifier": "^3.5.6",
|
||||
"imagemin-webpack-plugin": "^2.0.0",
|
||||
@ -62,9 +62,11 @@
|
||||
"lunr-languages": "^1.0.0",
|
||||
"material-design-color": "^2.3.2",
|
||||
"material-shadows": "^3.0.1",
|
||||
"mini-css-extract-plugin": "^0.5.0",
|
||||
"modernizr-auto-loader": "^0.1.0",
|
||||
"modularscale-sass": "^3.0.3",
|
||||
"node-sass": "^4.11.0",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.1",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"promise-polyfill": "^8.0.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
@ -73,9 +75,10 @@
|
||||
"stylelint-config-standard": "^18.0.0",
|
||||
"stylelint-order": "^2.0.0",
|
||||
"stylelint-scss": "^3.4.4",
|
||||
"uglify-js": "^3.1.10",
|
||||
"uglifyjs-3-webpack-plugin": "^1.2.4",
|
||||
"unfetch": "^3.0.0",
|
||||
"webpack": "^3.4.1",
|
||||
"webpack": "^4.28.2",
|
||||
"webpack-cli": "^3.1.2",
|
||||
"webpack-manifest-plugin": "^2.0.4"
|
||||
},
|
||||
"engines": {
|
||||
|
||||
@ -1,13 +1,8 @@
|
||||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
["@babel/preset-env", {
|
||||
"loose": true,
|
||||
"target": {
|
||||
"browsers": [
|
||||
"> 1%",
|
||||
"last 2 versions"
|
||||
]
|
||||
}
|
||||
"targets": " > 1%, last 2 versions"
|
||||
}]
|
||||
],
|
||||
"plugins": [
|
||||
|
||||
@ -25,52 +25,50 @@
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
export default /* JSX */ {
|
||||
|
||||
/**
|
||||
* Create a native DOM node from JSX's intermediate representation
|
||||
*
|
||||
* @param {string} tag - Tag name
|
||||
* @param {?Object} properties - Properties
|
||||
* @param {Array<string | number | { __html: string } | Array<HTMLElement>>}
|
||||
* children - Child nodes
|
||||
* @return {HTMLElement} Native DOM node
|
||||
*/
|
||||
createElement(tag, properties, ...children) {
|
||||
const el = document.createElement(tag)
|
||||
/**
|
||||
* Create a native DOM node from JSX's intermediate representation
|
||||
*
|
||||
* @param {string} tag - Tag name
|
||||
* @param {?Object} properties - Properties
|
||||
* @param {Array<string | number | { __html: string } | Array<HTMLElement>>}
|
||||
* children - Child nodes
|
||||
* @return {HTMLElement} Native DOM node
|
||||
*/
|
||||
export function createElement(tag, properties, ...children) {
|
||||
const el = document.createElement(tag)
|
||||
|
||||
/* Set all properties */
|
||||
if (properties)
|
||||
Array.prototype.forEach.call(Object.keys(properties), attr => {
|
||||
el.setAttribute(attr, properties[attr])
|
||||
})
|
||||
/* Set all properties */
|
||||
if (properties)
|
||||
Array.prototype.forEach.call(Object.keys(properties), attr => {
|
||||
el.setAttribute(attr, properties[attr])
|
||||
})
|
||||
|
||||
/* Iterate child nodes */
|
||||
const iterateChildNodes = nodes => {
|
||||
Array.prototype.forEach.call(nodes, node => {
|
||||
/* Iterate child nodes */
|
||||
const iterateChildNodes = nodes => {
|
||||
Array.prototype.forEach.call(nodes, node => {
|
||||
|
||||
/* Directly append text content */
|
||||
if (typeof node === "string" ||
|
||||
typeof node === "number") {
|
||||
el.textContent += node
|
||||
/* Directly append text content */
|
||||
if (typeof node === "string" ||
|
||||
typeof node === "number") {
|
||||
el.textContent += node
|
||||
|
||||
/* Recurse, if we got an array */
|
||||
} else if (Array.isArray(node)) {
|
||||
iterateChildNodes(node)
|
||||
/* Recurse, if we got an array */
|
||||
} else if (Array.isArray(node)) {
|
||||
iterateChildNodes(node)
|
||||
|
||||
/* Append raw HTML */
|
||||
} else if (typeof node.__html !== "undefined") {
|
||||
el.innerHTML += node.__html
|
||||
/* Append raw HTML */
|
||||
} else if (typeof node.__html !== "undefined") {
|
||||
el.innerHTML += node.__html
|
||||
|
||||
/* Append regular nodes */
|
||||
} else if (node instanceof Node) {
|
||||
el.appendChild(node)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/* Iterate child nodes and return element */
|
||||
iterateChildNodes(children)
|
||||
return el
|
||||
/* Append regular nodes */
|
||||
} else if (node instanceof Node) {
|
||||
el.appendChild(node)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/* Iterate child nodes and return element */
|
||||
iterateChildNodes(children)
|
||||
return el
|
||||
}
|
||||
|
||||
@ -33,7 +33,9 @@ const webpack = require("webpack")
|
||||
|
||||
const CopyPlugin = require("copy-webpack-plugin")
|
||||
const EventHooksPlugin = require("event-hooks-webpack-plugin")
|
||||
const ExtractTextPlugin = require("extract-text-webpack-plugin")
|
||||
const { CallbackTask } = require("event-hooks-webpack-plugin/lib/tasks")
|
||||
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
|
||||
const UglifyJsPlugin = require("uglifyjs-3-webpack-plugin")
|
||||
const ImageminPlugin = require("imagemin-webpack-plugin").default
|
||||
const ManifestPlugin = require("webpack-manifest-plugin")
|
||||
|
||||
@ -41,8 +43,9 @@ const ManifestPlugin = require("webpack-manifest-plugin")
|
||||
* Configuration
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
module.exports = env => { // eslint-disable-line complexity
|
||||
module.exports = (_env, args) => { // eslint-disable-line complexity
|
||||
const config = {
|
||||
mode: args.mode,
|
||||
|
||||
/* Entrypoints */
|
||||
entry: {
|
||||
@ -75,11 +78,58 @@ module.exports = env => { // eslint-disable-line complexity
|
||||
use: "modernizr-auto-loader"
|
||||
},
|
||||
|
||||
/* SASS stylesheets */
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
{
|
||||
loader: "file-loader",
|
||||
options: {
|
||||
name: `[name]${
|
||||
args.mode === "production" ? ".[md5:hash:hex:8]" : ""
|
||||
}.css`,
|
||||
outputPath: "assets/stylesheets",
|
||||
publicPath: path.resolve(__dirname, "material")
|
||||
}
|
||||
},
|
||||
"extract-loader",
|
||||
{
|
||||
loader: "css-loader",
|
||||
options: {
|
||||
sourceMap: args.mode !== "production"
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: "postcss-loader",
|
||||
options: {
|
||||
ident: "postcss",
|
||||
plugins: () => [
|
||||
require("autoprefixer")(),
|
||||
require("css-mqpacker")
|
||||
],
|
||||
sourceMap: args.mode !== "production"
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
includePaths: [
|
||||
"node_modules/modularscale-sass/stylesheets",
|
||||
"node_modules/material-design-color",
|
||||
"node_modules/material-shadows"
|
||||
],
|
||||
sourceMap: args.mode !== "production",
|
||||
sourceMapContents: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/* Cache busting for SVGs */
|
||||
{
|
||||
test: /\.svg$/,
|
||||
use: `file-loader?name=[path][name]${
|
||||
env && env.prod ? ".[md5:hash:hex:8]" : ""
|
||||
args.mode === "production" ? ".[md5:hash:hex:8]" : ""
|
||||
}.[ext]&context=./src`
|
||||
}
|
||||
]
|
||||
@ -88,7 +138,7 @@ module.exports = env => { // eslint-disable-line complexity
|
||||
/* Output */
|
||||
output: {
|
||||
path: path.resolve(__dirname, "material"),
|
||||
filename: `[name]${env && env.prod ? ".[chunkhash]" : ""}.js`,
|
||||
filename: `[name]${args.mode === "production" ? ".[chunkhash]" : ""}.js`,
|
||||
hashDigestLength: 8,
|
||||
libraryTarget: "window"
|
||||
},
|
||||
@ -96,12 +146,6 @@ module.exports = env => { // eslint-disable-line complexity
|
||||
/* Plugins */
|
||||
plugins: [
|
||||
|
||||
/* Combine all dependencies into a single file */
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: "src/assets/javascripts/modernizr.js",
|
||||
chunks: [".modernizr-autorc"]
|
||||
}),
|
||||
|
||||
/* Provide JSX helper */
|
||||
new webpack.ProvidePlugin({
|
||||
JSX: path.resolve(__dirname, "src/assets/javascripts/providers/jsx.js")
|
||||
@ -187,20 +231,7 @@ module.exports = env => { // eslint-disable-line complexity
|
||||
.join(", "))
|
||||
}
|
||||
}
|
||||
]),
|
||||
|
||||
/* Hack: The webpack development middleware sometimes goes into a loop on
|
||||
macOS when starting for the first time. This is a quick fix until
|
||||
this issue is resolved. See: http://bit.ly/2AsizEn */
|
||||
new EventHooksPlugin({
|
||||
"watch-run": (compiler, cb) => {
|
||||
compiler.startTime += 10000
|
||||
cb()
|
||||
},
|
||||
"done": stats => {
|
||||
stats.startTime -= 10000
|
||||
}
|
||||
})
|
||||
])
|
||||
],
|
||||
|
||||
/* Module resolver */
|
||||
@ -215,84 +246,38 @@ module.exports = env => { // eslint-disable-line complexity
|
||||
},
|
||||
|
||||
/* Sourcemaps */
|
||||
devtool: !env || env.prod ? "inline-source-map" : ""
|
||||
}
|
||||
devtool: args.mode !== "production" ? "inline-source-map" : "",
|
||||
|
||||
/* Compile stylesheets */
|
||||
for (const stylesheet of [
|
||||
"application.scss",
|
||||
"application-palette.scss"
|
||||
]) {
|
||||
const plugin = new ExtractTextPlugin(
|
||||
`assets/stylesheets/${
|
||||
stylesheet.replace(".scss",
|
||||
env && env.prod ? ".[md5:contenthash:hex:8]" : ""
|
||||
)}.css`)
|
||||
|
||||
/* Register plugin */
|
||||
config.plugins.push(plugin)
|
||||
config.module.rules.push({
|
||||
test: new RegExp(`${stylesheet}$`),
|
||||
use: plugin.extract({
|
||||
use: [
|
||||
{
|
||||
loader: "css-loader",
|
||||
options: {
|
||||
minimize: env && env.prod,
|
||||
sourceMap: !(env && env.prod)
|
||||
}
|
||||
/* Optimizations */
|
||||
optimization: {
|
||||
minimizer: [
|
||||
new UglifyJsPlugin(),
|
||||
new OptimizeCSSAssetsPlugin({})
|
||||
],
|
||||
splitChunks: {
|
||||
cacheGroups: {
|
||||
commons: {
|
||||
chunks: "all",
|
||||
minChunks: 2,
|
||||
maxInitialRequests: 5,
|
||||
minSize: 0
|
||||
},
|
||||
{
|
||||
loader: "postcss-loader",
|
||||
options: {
|
||||
ident: "postcss",
|
||||
plugins: () => [
|
||||
require("autoprefixer")(),
|
||||
require("css-mqpacker")
|
||||
],
|
||||
sourceMap: !(env && env.prod)
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
includePaths: [
|
||||
"node_modules/modularscale-sass/stylesheets",
|
||||
"node_modules/material-design-color",
|
||||
"node_modules/material-shadows"
|
||||
],
|
||||
sourceMap: !(env && env.prod),
|
||||
sourceMapContents: true
|
||||
}
|
||||
modernizr: {
|
||||
test: "src/assets/javascripts/modernizr.js",
|
||||
chunks: "all",
|
||||
name: "modernizr",
|
||||
priority: 10,
|
||||
enforce: true
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Production compilation */
|
||||
if (env && env.prod) {
|
||||
if (args.mode === "production") {
|
||||
config.plugins.push(
|
||||
|
||||
/* Uglify sources */
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false,
|
||||
screw_ie8: true, // eslint-disable-line camelcase
|
||||
conditionals: true,
|
||||
unused: true,
|
||||
comparisons: true,
|
||||
sequences: true,
|
||||
dead_code: true, // eslint-disable-line camelcase
|
||||
evaluate: true,
|
||||
if_return: true, // eslint-disable-line camelcase
|
||||
join_vars: true // eslint-disable-line camelcase
|
||||
},
|
||||
output: {
|
||||
comments: false
|
||||
}
|
||||
}),
|
||||
|
||||
/* Minify images */
|
||||
new ImageminPlugin({
|
||||
test: /\.(ico|png|svg)$/i,
|
||||
@ -322,7 +307,7 @@ module.exports = env => { // eslint-disable-line complexity
|
||||
|
||||
/* Apply manifest */
|
||||
new EventHooksPlugin({
|
||||
"after-emit": (compilation, cb) => {
|
||||
afterEmit: new CallbackTask((compilation, cb) => {
|
||||
const manifest = require(path.resolve("material/manifest.json"))
|
||||
Object.keys(compilation.assets).forEach(name => {
|
||||
if (name.match(/\.html/)) {
|
||||
@ -334,7 +319,7 @@ module.exports = env => { // eslint-disable-line complexity
|
||||
}
|
||||
})
|
||||
cb()
|
||||
}
|
||||
})
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user