updated to webpack v5
This commit is contained in:
parent
7c5583fd61
commit
9164cc0a40
4 changed files with 4058 additions and 10156 deletions
14126
assets/package-lock.json
generated
14126
assets/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -3,7 +3,7 @@
|
||||||
"description": " ",
|
"description": " ",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"deploy": "webpack --mode production",
|
"deploy": "NODE_ENV=production webpack --mode production",
|
||||||
"watch": "webpack --mode development --watch"
|
"watch": "webpack --mode development --watch"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
@ -13,18 +13,16 @@
|
||||||
"topbar": "^1.x"
|
"topbar": "^1.x"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.0.0",
|
"@babel/core": "^7.x",
|
||||||
"@babel/preset-env": "^7.0.0",
|
"@babel/preset-env": "^7.x",
|
||||||
"babel-loader": "^8.0.0",
|
"babel-loader": "^8.x",
|
||||||
"copy-webpack-plugin": "^5.1.1",
|
"copy-webpack-plugin": "^7.x",
|
||||||
"css-loader": "^3.4.2",
|
"css-loader": "^5.x",
|
||||||
"hard-source-webpack-plugin": "^0.13.1",
|
"css-minimizer-webpack-plugin": "^1.x",
|
||||||
"mini-css-extract-plugin": "^0.9.0",
|
"mini-css-extract-plugin": "^1.x",
|
||||||
"node-sass": "^4.13.1",
|
"sass": "^1.x",
|
||||||
"optimize-css-assets-webpack-plugin": "^5.0.1",
|
"sass-loader": "^10.x",
|
||||||
"sass-loader": "^8.0.2",
|
"webpack": "^5.x",
|
||||||
"terser-webpack-plugin": "^2.3.2",
|
"webpack-cli": "^4.x"
|
||||||
"webpack": "4.41.5",
|
|
||||||
"webpack-cli": "^3.3.2"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,53 +1,45 @@
|
||||||
const path = require('path');
|
const path = require("path");
|
||||||
const glob = require('glob');
|
const glob = require("glob");
|
||||||
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
|
||||||
const TerserPlugin = require('terser-webpack-plugin');
|
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
||||||
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
|
||||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
|
||||||
|
|
||||||
module.exports = (env, options) => {
|
module.exports = (env, options) => {
|
||||||
const devMode = options.mode !== 'production';
|
const devMode = options.mode !== "production";
|
||||||
|
|
||||||
return {
|
return {
|
||||||
optimization: {
|
|
||||||
minimizer: [
|
|
||||||
new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
|
|
||||||
new OptimizeCSSAssetsPlugin({})
|
|
||||||
]
|
|
||||||
},
|
|
||||||
entry: {
|
entry: {
|
||||||
'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
|
app: glob.sync("./vendor/**/*.js").concat(["./js/app.js"]),
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
filename: '[name].js',
|
path: path.resolve(__dirname, "../priv/static/js"),
|
||||||
path: path.resolve(__dirname, '../priv/static/js'),
|
filename: "[name].js",
|
||||||
publicPath: '/js/'
|
publicPath: "/js/",
|
||||||
},
|
},
|
||||||
devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
|
|
||||||
module: {
|
module: {
|
||||||
rules: [
|
rules: [
|
||||||
{
|
{
|
||||||
test: /\.js$/,
|
test: /\.js$/,
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
use: {
|
use: {
|
||||||
loader: 'babel-loader'
|
loader: "babel-loader",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.[s]?css$/,
|
test: /\.[s]?css$/,
|
||||||
use: [
|
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
|
||||||
MiniCssExtractPlugin.loader,
|
},
|
||||||
'css-loader',
|
],
|
||||||
'sass-loader',
|
|
||||||
],
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
|
new MiniCssExtractPlugin({ filename: "../css/app.css" }),
|
||||||
new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
|
new CopyWebpackPlugin({
|
||||||
]
|
patterns: [{ from: "static/", to: "../" }],
|
||||||
.concat(devMode ? [new HardSourceWebpackPlugin()] : [])
|
}),
|
||||||
}
|
],
|
||||||
|
optimization: {
|
||||||
|
minimizer: ["...", new CssMinimizerPlugin()],
|
||||||
|
},
|
||||||
|
devtool: devMode ? "source-map" : undefined,
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
|
@ -25,7 +25,8 @@ config :bones73k, Bones73kWeb.Endpoint,
|
||||||
"node_modules/webpack/bin/webpack.js",
|
"node_modules/webpack/bin/webpack.js",
|
||||||
"--mode",
|
"--mode",
|
||||||
"development",
|
"development",
|
||||||
"--watch-stdin",
|
"--watch",
|
||||||
|
"--watch-options-stdin",
|
||||||
cd: Path.expand("../assets", __DIR__)
|
cd: Path.expand("../assets", __DIR__)
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
@ -77,4 +78,3 @@ config :phoenix, :plug_init_mode, :runtime
|
||||||
|
|
||||||
# Import secret config
|
# Import secret config
|
||||||
import_config "dev.secret.exs"
|
import_config "dev.secret.exs"
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue