增加开发模式的配置

This commit is contained in:
cebgcontract 2022-10-08 10:19:10 +08:00
parent 1b7bab41de
commit ec7bf8066b
3 changed files with 154 additions and 27 deletions

View File

@ -7,7 +7,9 @@
"desktop": "webpack --config ./webpack.desktop.js",
"mobile": "webpack --config ./webpack.mobile.js",
"deploy:prod": "rm -f ./dist/.DS_Store && aws s3 sync ./dist s3://cebg.games.new --acl public-read --exclude \"pubgv4/*\" --exclude \"release/*\"",
"refresh:prod": "aws cloudfront create-invalidation --distribution-id E34PEY4AGTMS0Y --paths \"/*\""
"refresh:prod": "aws cloudfront create-invalidation --distribution-id E34PEY4AGTMS0Y --paths \"/*\"",
"dev:desktop": "webpack --config ./webpack.desktop.dev.js --watch",
"dev:mobile": "webpack --config ./webpack.mobile.dev.js --watch"
},
"author": "",
"license": "ISC",

View File

@ -9,22 +9,23 @@ const TerserPlugin = require('terser-webpack-plugin')
const entryFiles = glob.sync(path.join(__dirname, './src/desktop/*.html'))
const htmlWebpackPlugins = []
// entryFiles.map((entryFile) => {
// const matchRes = entryFile.match(/src\/desktop\/(.*)\.html$/)
// const pageName = matchRes && matchRes[1]
// console.log(pageName)
// htmlWebpackPlugins.push(
// new htmlWebpackPlugin({
// template: path.join(__dirname, `./src/desktop/${pageName}.html`),
// filename: `${pageName}.html`,
// inject: 'body',
// }),
// )
// })
entryFiles.map((entryFile) => {
const matchRes = entryFile.match(/src\/desktop\/(.*)\.html$/)
const pageName = matchRes && matchRes[1]
console.log(pageName)
htmlWebpackPlugins.push(
new htmlWebpackPlugin({
template: path.join(__dirname, `./src/desktop/${pageName}.html`),
filename: `${pageName}.html`,
inject: 'body',
}),
)
})
module.exports = {
mode: 'development',
entry: './src/desktop/js/app.js',
devtool: 'inline-source-map',
output: {
path: path.resolve(__dirname, 'dist/desktop'),
filename: 'js/[name]-[hash].js',
@ -46,12 +47,28 @@ module.exports = {
},
},
{
test: /\.(woff|ttf|svg|eot|ico)$/,
test: /\.ico$/i,
dependency: { not: ['url'] },
loader: 'url-loader',
options: {
limit: 1,
name: '[name].[hash:5].[ext]',
},
},
{
test: /\.(woff|ttf|svg|eot)$/,
use: ['url-loader'],
},
{
test: /\.xml/,
type: 'asset/resource',
generator: {
filename: 'sitemap.xml',
},
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, { loader: 'css-loader' }],
use: [MiniCssExtractPlugin.loader, { loader: 'css-loader'}],
},
{
test: /.html$/,
@ -80,20 +97,11 @@ module.exports = {
'template-ejs-loader',
],
},
// {
// exclude: /\.(css|js|html|json|less|png|jpg|gif|woff|ttf|svg|eot)$/,
// loader: 'file-loader',
// },
],
},
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, `./src/desktop/index1.html`),
filename: `index.html`,
inject: 'body',
}),
new MiniCssExtractPlugin(),
].concat(htmlWebpackPlugins),
plugins: [new MiniCssExtractPlugin({
filename: '[name].[hash:5].css'
})].concat(htmlWebpackPlugins),
optimization: {
splitChunks: {
chunks: 'all',

117
webpack.mobile.dev.js Normal file
View File

@ -0,0 +1,117 @@
const path = require('path')
const glob = require('glob')
var webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const entryFiles = glob.sync(path.join(__dirname, './src/mobile/*.html'))
const htmlWebpackPlugins = []
entryFiles.map((entryFile) => {
const matchRes = entryFile.match(/src\/mobile\/(.*)\.html$/)
const pageName = matchRes && matchRes[1]
console.log(pageName)
htmlWebpackPlugins.push(
new htmlWebpackPlugin({
template: path.join(__dirname, `./src/mobile/${pageName}.html`),
filename: `${pageName}.html`,
inject: 'body',
}),
)
})
module.exports = {
mode: 'development',
entry: './src/mobile/js/app.js',
devtool: 'inline-source-map',
output: {
path: path.resolve(__dirname, 'dist/mobile'),
filename: 'js/[name]-[hash].js',
publicPath: './',
assetModuleFilename: 'img/[hash][ext][query]',
},
module: {
rules: [
{
test: /\.(png|jpg|gif|jpeg|svg)$/,
// type: 'asset/resource',
dependency: { not: ['url'] },
loader: 'url-loader',
options: {
name: '[hash].[ext][query]',
limit: 1024 * 10,
outputPath: 'img',
},
},
{
test: /\.ico$/i,
dependency: { not: ['url'] },
loader: 'url-loader',
options: {
limit: 1,
name: '[name].[hash:5].[ext]',
},
},
{
test: /\.(woff|ttf|svg|eot)$/,
use: ['url-loader'],
},
{
test: /\.xml/,
type: 'asset/resource',
generator: {
filename: 'sitemap.xml',
},
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, { loader: 'css-loader'}],
},
{
test: /.html$/,
use: [
{
loader: 'html-loader',
options: {
esModule: false,
sources: {
list: [
'...',
{
tag: 'a',
attribute: 'data-bigimg',
type: 'src',
},
{
tag: 'a',
attribute: 'data-imgdetail',
type: 'src',
},
],
},
},
},
'template-ejs-loader',
],
},
],
},
plugins: [new MiniCssExtractPlugin({
filename: '[name].[hash:5].css'
})].concat(htmlWebpackPlugins),
optimization: {
splitChunks: {
chunks: 'all',
},
minimize: true,
minimizer: [
new TerserPlugin({
extractComments: false,
}),
new OptimizeCssAssetsPlugin(),
],
},
}