json ConfiguraçãoWebpack
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了json ConfiguraçãoWebpack相关的知识，希望对你有一定的参考价值。
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin')
.default;
const imageminMozjpeg = require('imagemin-mozjpeg');
const HtmlCriticalWebpackPlugin = require('html-critical-webpack-plugin');
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const pagesList = require('./pages.config.js');
const IconfontWebpackPlugin = require('iconfont-webpack-plugin');
const globImporter = require('node-sass-glob-importer');
// Plugins Declaration
const plugins = [];
plugins.push(
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(['build']),
new ExtractTextPlugin({
filename: '[name].[hash].css',
allChunks: true,
}),
new CopyWebpackPlugin([{
from: './src/video/',
to: './video/',
force: true,
toType: 'dir',
},
{
from: './src/json/',
to: './json/',
force: true,
toType: 'dir',
},
{
from: './src/fonts/',
to: './fonts/',
force: true,
toType: 'dir',
},
]),
// expose $ and jQuery to global scope.
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
}),
new ImageminPlugin({
test: 'img/**',
gifscale: {
optimizationLevel: 2,
},
pngquant: {
quality: 70,
},
plugins: [
imageminMozjpeg({
quality: 50,
progressive: true,
}),
],
}),
);
// for (const page of pagesList) {
// plugins.push(
// new HtmlCriticalWebpackPlugin({
// base: path.resolve(__dirname, 'build'),
// src: page,
// dest: page,
// inline: true,
// minify: true,
// extract: true,
// ignore: ['@font-face'],
// dimensions: [{
// height: 200,
// width: 500,
// }, {
// height: 900,
// width: 1200,
// }],
// }),
// );
// }
// Getting JS Script List
const scriptsList = require('./scripts.config.js');
module.exports = {
// Mode Declaration
mode: 'production',
resolve: {
alias: {
image: path.resolve(__dirname, 'src/img'),
},
},
// Entry / Output Declaration
entry: scriptsList,
output: {
path: path.resolve(__dirname, 'build'),
filename: 'js/[name].[hash].js',
// library: 'bundle_[name]',
// publicPath: './',
},
// Loaders Declaration
module: {
rules: [
// JavaScript Processing
{
test: /\.js$/,
// include: path.resolve(__dirname, 'src/js'),
exclude: /node_modules\/(?!(dom7|swiper)\/).*/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/env'],
},
},
},
// HTML Processing
{
test: /\.html$/,
include: path.resolve(__dirname, 'src/'),
use: {
loader: 'html-loader',
options: {
minimize: true,
interpolate: true,
collapseWhitespace: true,
conservativeCollapse: false,
},
},
},
// CSS Procesing
{
test: /\.(s*)css$/,
include: path.resolve(__dirname, 'src/css'),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
sourceMap: false,
minimize: true, // Will set to false
url: true,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: false,
// SVG to font
plugins: loader => [
new IconfontWebpackPlugin(loader),
],
config: {
path: './postcss.config.js',
},
},
},
{
loader: 'resolve-url-loader',
options: {
sourceMap: false,
},
},
{
// Loads a SASS/SCSS file and compiles it to CSS
loader: 'sass-loader',
options: {
importer: globImporter(),
sourceMap: false,
outputStyle: 'expanded',
},
},
],
}),
},
{
test: /\.(eot|otf|webp|ttf|woff|woff2|svg)(\?.*)?$/,
exclude: [/img/],
use: [{
loader: 'file-loader',
options: {
name: 'fonts/[name]-[hash].[ext]',
// publicPath: '../',
// outputPath: '../src/fonts'
},
}],
},
// Images Processing
{
test: /\.(jpe?g|png|gif|svg|webp)$/i,
include: path.resolve(__dirname, 'src/img'),
exclude: [/(\/fonts)/, /node_modules/],
use: [{
loader: 'file-loader',
options: {
name: 'img/[name]-[hash].[ext]',
// context: path.resolve(__dirname, 'src/'),
// publicPath: '../',
// useRelativePaths: true,
// outputPath: './img/',
},
}],
},
],
},
// Optimization Declaration
optimization: {
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
compress: {
drop_console: true,
},
output: {
comments: false,
},
},
}),
],
runtimeChunk: {
name: 'tools',
},
splitChunks: {
cacheGroups: {
default: false,
commons: {
test: /\.js$/,
chunks: 'all',
minChunks: 2,
name: 'tools',
enforce: true,
},
},
},
},
// Include Plugins
plugins,
};
for (let i = pagesList.length - 1; i >= 0; i--) {
plugins.push(new HtmlWebpackPlugin({
filename: pagesList[i],
template: `src/${pagesList[i]}`,
}));
}
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const IconfontWebpackPlugin = require('iconfont-webpack-plugin');
const globImporter = require('node-sass-glob-importer');
const pagesList = require('./pages.config.js');
// Plugin Declaration
const plugins = [];
plugins.push(
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(['build']),
new ExtractTextPlugin({
filename: './[name].[hash].css',
// filename: './css/style.bundle.css',
allChunks: true,
}),
new CopyWebpackPlugin([{
from: './src/video/',
to: './video/',
force: true,
toType: 'dir',
},
{
from: './src/json/',
to: './json/',
force: true,
toType: 'dir',
},
{
from: './src/fonts/',
to: './fonts/',
force: true,
toType: 'dir',
},
]),
),
// expose $ and jQuery to global scope.
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
});
// Getting JS Script List
const scriptsList = require('./scripts.config.js');
const liveReload = {
contentBase: path.resolve(__dirname, './build'),
publicPath: '/',
watchOptions: {
poll: true,
},
watchContentBase: true,
port: 9000,
stats: 'errors-only',
clientLogLevel: 'warning',
inline: true,
compress: true,
historyApiFallback: true,
disableHostCheck: true,
// hotOnly: false,
// watchOptions: { aggregateTimeout: 300, poll: 1000 },
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
},
};
module.exports = {
// Mode Declaration
mode: 'development',
resolve: {
alias: {
image: path.resolve(__dirname, 'src/img'),
},
},
// Webpack Dev Server Settings
devServer: {
contentBase: './build',
publicPath: '/',
port: 9000,
historyApiFallback: true,
stats: 'errors-only',
disableHostCheck: true,
clientLogLevel: 'warning',
// hotOnly: false,
// inline: true,
// watchOptions: { aggregateTimeout: 300, poll: 1000 },
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
},
},
devtool: 'source-maps',
// Entry / Output Declaration
entry: scriptsList,
output: {
path: path.resolve(__dirname, 'build'),
filename: 'js/[name].[hash].js',
library: 'bundle_[name]',
publicPath: './',
// hotUpdateChunkFilename: 'hot/[id].[hash].hot-update.js',
// hotUpdateMainFilename: 'hot/[hash].hot-update.json',
},
// Loaders Declaration
module: {
rules: [
// Javascript Processing - NONE
// HTML Processing
{
test: /\.html$/,
include: path.resolve(__dirname, 'src/'),
use: {
loader: 'html-loader',
options: {
minimize: true,
interpolate: true,
collapseWhitespace: true,
conservativeCollapse: false,
},
},
},
// CSS Procesing
{
test: /\.(s*)css$/,
include: path.resolve(__dirname, 'src/css'),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
sourceMap: true,
minimize: false, // Will set to false
url: true,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
// SVG to font
plugins: loader => [
new IconfontWebpackPlugin(loader),
],
config: {
path: './postcss.config.js',
},
},
},
{
loader: 'resolve-url-loader',
options: {
sourceMap: true,
},
},
{
// Loads a SASS/SCSS file and compiles it to CSS
loader: 'sass-loader',
options: {
importer: globImporter(), // @import: 'scss/**/*.scss';
sourceMap: true,
outputStyle: 'expanded',
},
},
],
}),
},
{
test: /\.(eot|otf|webp|ttf|woff|woff2|svg)(\?.*)?$/,
exclude: [/img/],
use: [{
loader: 'file-loader',
options: {
name: 'fonts/[name]-[hash].[ext]',
publicPath: '../',
// outputPath: '../src/fonts'
},
}],
},
// Images Processing
{
test: /\.(jpe?g|png|gif|svg|webp)$/i,
include: path.resolve(__dirname, 'src/img'),
exclude: [/(\/fonts)/, /node_modules/],
use: [{
loader: 'file-loader',
options: {
name: 'img/[name]-[hash].[ext]',
// context: path.resolve(__dirname, 'src/'),
// publicPath: '../img',
// useRelativePaths: true,
// outputPath: 'img/',
},
}],
},
],
},
// Optimization Declaration
optimization: {
minimize: false,
runtimeChunk: {
name: 'tools',
},
splitChunks: {
cacheGroups: {
default: false,
commons: {
test: /\.js$/,
chunks: 'all',
minChunks: 2,
name: 'tools',
enforce: true,
},
},
},
},
// Include Plugins
plugins,
};
for (let i = pagesList.length - 1; i >= 0; i--) {
plugins.push(new HtmlWebpackPlugin({
filename: pagesList[i],
template: `src/${pagesList[i]}`,
}));
}
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin')
.default;
const imageminMozjpeg = require('imagemin-mozjpeg');
const HtmlCriticalWebpackPlugin = require('html-critical-webpack-plugin');
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const pagesList = require('./pages.config.js');
// Plugins Declaration
const plugins = [];
plugins.push(
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(['build']),
new ExtractTextPlugin({
// filename: './[name].[hash].css',
filename: './style.bundle.css',
allChunks: true,
}),
new CopyWebpackPlugin([{
from: './src/video/',
to: './video/',
force: true,
toType: 'dir',
},
{
from: './src/json/',
to: './json/',
force: true,
toType: 'dir',
},
{
from: './src/js/vendor',
to: './js/',
force: true,
toType: 'dir',
},
{
from: './src/js/lang-inspect/',
to: './js/lang-inspect/',
force: true,
toType: 'dir',
},
{
from: './src/fonts/',
to: './fonts/',
force: true,
toType: 'dir',
},
]),
new ImageminPlugin({
test: 'img/**',
gifscale: {
optimizationLevel: 2,
},
pngquant: {
quality: 70,
},
plugins: [
imageminMozjpeg({
quality: 50,
progressive: true,
}),
],
}),
);
for (const page of pagesList) {
plugins.push(
new HtmlCriticalWebpackPlugin({
base: path.resolve(__dirname, 'build'),
src: page,
dest: page,
inline: true,
minify: true,
extract: true,
ignore: ['@font-face'],
dimensions: [{
height: 200,
width: 500,
}, {
height: 900,
width: 1200,
}],
}),
);
}
// Getting JS Script List
const scriptsList = require('./scripts.config.js');
module.exports = {
// Mode Declaration
mode: 'production',
resolve: {
alias: {
image: path.resolve(__dirname, 'src/img'),
},
},
// Entry / Output Declaration
entry: scriptsList,
output: {
path: path.resolve(__dirname, 'build'),
// filename: 'js/[name].[hash].js',
filename: 'js/[name].js',
},
// Loaders Declaration
module: {
rules: [
// JavaScript Processing
{
test: /\.js$/,
include: path.resolve(__dirname, 'src/js'),
exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/env'],
},
},
},
// HTML Processing
{
test: /\.html$/,
include: path.resolve(__dirname, 'src/'),
use: {
loader: 'html-loader',
options: {
minimize: true,
interpolate: true,
collapseWhitespace: true,
conservativeCollapse: false,
},
},
},
// CSS Procesing
{
test: /\.(s*)css$/,
include: path.resolve(__dirname, 'src/css'),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
sourceMap: false,
minimize: true, // Will set to false
url: true,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: false,
config: {
path: './postcss.config.js',
},
},
},
{
loader: 'resolve-url-loader',
options: {
sourceMap: false,
},
},
{
// Loads a SASS/SCSS file and compiles it to CSS
loader: 'sass-loader',
options: {
sourceMap: false,
outputStyle: 'expanded',
},
},
],
}),
},
{
test: /\.(eot|otf|webp|ttf|woff|woff2|svg)(\?.*)?$/,
exclude: [/img/],
use: [{
loader: 'file-loader',
options: {
name: 'fonts/[name]-[hash].[ext]',
// publicPath: '../',
// outputPath: '../src/fonts'
},
}],
},
// Images Processing
{
test: /\.(jpe?g|png|gif|svg|webp)$/i,
include: path.resolve(__dirname, 'src/img'),
exclude: [/(\/fonts)/, /node_modules/],
use: [{
loader: 'file-loader',
options: {
name: 'img/[name]-[hash].[ext]',
// context: path.resolve(__dirname, 'src/'),
// publicPath: '../',
// useRelativePaths: true,
// outputPath: './img/',
},
}],
},
],
},
// Optimization Declaration
optimization: {
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
compress: {
drop_console: true,
},
output: {
comments: false,
}
},
}),
],
runtimeChunk: {
name: 'tools',
},
splitChunks: {
cacheGroups: {
default: false,
commons: {
test: /\.js$/,
chunks: 'all',
minChunks: 2,
name: 'tools',
enforce: true,
},
},
},
},
// Include Plugins
plugins,
};
for (let i = pagesList.length - 1; i >= 0; i--) {
plugins.push(new HtmlWebpackPlugin({
filename: pagesList[i],
template: `src/${pagesList[i]}`,
}));
}
module.exports = [
// 'webpack-dev-server/client?http://localhost:9000',
// 'webpack/hot/only-dev-server',
'./src/js/main.js',
];
module.exports = {
plugins: {
// Process Imports
'postcss-import': {},
// Process Nesings
'postcss-nested-ancestors': {},
'postcss-nested': {},
// Process Loops
'postcss-for': {},
// Process Variables
'postcss-simple-vars': {},
// Process Maths
'postcss-automath': {},
// Remove Unused styles
// 'postcss-uncss': {
// html: getPagesList(require('./pages.config.js')),
// ignore: [
// '.fa', '.sr-only', '.sr-only-focusable:active', '.sr-only-focusable:focus', '[class*="fa"]', '.h-100', '.align-items-center', '.dropdown','.dropdown-menu', '.show'
// ],
// },
// Remove Comments
'postcss-strip-inline-comments': {},
'postcss-discard-comments': {},
// Adding :focus to :hover-s
'postcss-focus': {},
// Grouping Media Queries
'css-mqpacker': {
sort: true,
},
// Auto Prefixing
autoprefixer: {},
// Minifing CSS
cssnano: {
preset: 'default',
},
},
};
function getPagesList(source) {
const output = [];
console.log(source);
for (let page of source) {
page = `src/${page}`;
output.push(page);
}
return output;
}
const fs = require('fs');
const path = require('path');
function fileList(dir) {
return fs.readdirSync(dir)
.reduce((list, file) => {
let name = path.join(dir, file);
let isDir = fs.statSync(name)
.isDirectory();
return list.concat(isDir ? fileList(name) : [name]);
}, []);
}
const filePath = fileList('./src');
const files = filePath.map(file => file.split(path.sep)
.slice(-1)[0]);
const html = files.filter(item => item.includes('html') && !item.includes('js'));
const htmlNew = html.filter(item => !item.includes('_'));
console.log('\n\nHTML fileList:\n', htmlNew);
console.log('\n');
module.exports = htmlNew;
// module.exports = ['contato.html', 'index.html', 'profile.html', 'sobre.html'];
{
"name": "",
"version": "1.0.0",
"repository": "",
"author": "Felipe Vieira",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --color --config webpack.development.config.js --open",
"starthot": "webpack-dev-server --hot --inline --color --progress --config webpack.development.config.js --open",
"build": "webpack --mode=production --display verbose --config webpack.build.config.js",
"build-dev": "webpack --display verbose --config webpack.development.config.js",
"production": "webpack --mode=production --display verbose --config webpack.production.config.js"
},
"devDependencies": {
"@babel/core": "^7.0.0-beta.44",
"@babel/preset-env": "^7.0.0-beta.44",
"autoprefixer": "^8.6.2",
"babel-loader": "^8.0.0-beta",
"babel-preset-env": "^1.6.1",
"clean-webpack-plugin": "^0.1.19",
"comments": "^0.3.6",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"css-mqpacker": "^6.0.2",
"cssgrace": "^3.0.0",
"cssnano": "^3.10.0",
"eslint": "4.19.1",
"eslint-config-airbnb-base": "^13.0.0",
"eslint-plugin-import": "2.12.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"font-awesome-loader": "^1.0.2",
"html-critical-webpack-plugin": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"iconfont-webpack-plugin": "^3.0.1",
"imagemin-mozjpeg": "~6.0.0",
"imagemin-webpack-plugin": "^2.1.5",
"node-sass": "^4.9.3",
"postcss": "^6.0.22",
"postcss-automath": "^1.0.1",
"postcss-discard": "^0.1.1",
"postcss-discard-comments": "^2.0.4",
"postcss-focus": "^3.0.0",
"postcss-for": "^2.1.1",
"postcss-import": "^11.1.0",
"postcss-load-config": "^1.2.0",
"postcss-loader": "^2.1.5",
"postcss-nested": "^3.0.0",
"postcss-nested-ancestors": "^2.0.0",
"postcss-plugin": "^1.0.0",
"postcss-simple-vars": "^4.1.0",
"postcss-strip-inline-comments": "^0.1.5",
"postcss-uncss": "^0.16.1",
"resolve-url-loader": "^2.3.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"uncss": "^0.16.2",
"url-loader": "^1.0.1",
"webpack": "^4.5.0",
"webpack-cli": "^3.0.8",
"webpack-dev-middleware": "^3.4.0",
"webpack-dev-server": "^3.1.9",
"webpack-hot-middleware": "^2.24.3"
},
"dependencies": {
"@vimeo/player": "^2.6.5",
"augment": "^4.3.0",
"bootstrap": "^4.1.3",
"bunnyjs": "^0.14.41",
"font-awesome": "^4.7.0",
"html5shiv": "^3.7.3",
"inspect-form": "^1.0.4",
"jquery": "^3.3.1",
"node-sass-glob-importer": "^5.2.0",
"popper.js": "^1.14.4",
"selectivizr": "^1.0.3"
}
}
以上是关于json ConfiguraçãoWebpack的主要内容，如果未能解决你的问题，请参考以下文章
markdown ConfiguraçãodosarquivosEstáticosedeMídia
apache_conf Configuraçãoninicial做Linux Debian
sh Configuraçãodabridge docker0 e VPN CI&T
html Configuraçãodoindex.html para webapp funcionar com multiplas versoes de componentsnet