adjust webpack process

This commit is contained in:
amphineko 2020-03-16 00:16:55 +08:00
parent 9463d3584a
commit 47c4a9a5f1
No known key found for this signature in database
GPG Key ID: 4582E6587852EF42
4 changed files with 55 additions and 88 deletions

View File

@ -6,7 +6,7 @@
"type": "git",
"url": "git+https://github.com/amphineko/amphineko.git"
},
"author": "Naoki Rinmous <sukareki@gmail.com>",
"author": "amphineko <sukareki@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/amphineko/amphineko/issues"

View File

@ -14,8 +14,9 @@
<div id="container">
<div class="section header grid-container grid-parent">
<div class="split picture-container grid-30">
<a href="assets/images/amphineko.png">
<img alt="picture of amphineko" class="picture" src="assets/images/amphineko@1x.jpg">
<a href="${require('./assets/images/amphineko.png')}">
<img alt="picture of amphineko" class="picture"
src="${require('./assets/images/amphineko@1x.jpg')}">
</a>
</div>

View File

@ -1,2 +0,0 @@
import './index.html'
import 'file-loader?name=[path][name].[ext]!./assets/images/amphineko.png'

View File

@ -1,95 +1,63 @@
const path = require('path')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = (env, argv) => {
const isProduction = argv.mode === 'production'
module.exports = {
context: path.resolve(__dirname, 'src'),
console.log(`Using mode ${isProduction ? 'PRODUCTION' : 'DEVELOPMENT'}`)
devServer: {
contentBase: path.resolve(__dirname, 'dist')
},
return {
context: path.resolve(__dirname, 'src'),
devtool: 'inline-source-map',
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
port: 3100,
},
entry: {
index: './index.js',
},
devtool: 'inline-source-map',
mode: isProduction ? 'production' : 'development',
entry: {
index: './index.js',
},
module: {
rules: [
{
test: /\.(jpg|png|svg)$/,
include: [
path.resolve(__dirname, 'src')
],
use: [
isProduction ?
'file-loader?name=[path][name].[contenthash:8].[ext]' :
'file-loader?name=[path][name].[ext]'
],
},
{
test: /\.(eot|svg|ttf|woff2?)$/,
include: [
path.resolve(__dirname, 'node_modules')
],
use: [
isProduction ?
'file-loader?name=assets/webfonts/[name].[contenthash:8].[ext]' :
'file-loader?name=assets/webfonts/[name].[ext]'
],
},
{
test: /\.(html)$/,
use: [
'file-loader?name=[name].[ext]',
'extract-loader',
'html-loader?interpolate',
],
},
{
test: /\.(c|sa|sc)ss$/,
use: [
isProduction ?
'file-loader?name=[name].[contenthash:8].css' :
'file-loader?name=[name].css',
'extract-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
module: {
rules: [
{
test: /\.(jpg|png|svg)$/,
loader: 'file-loader',
options: {
name: 'assets/images/[name].[contenthash:8].[ext]'
}
},
{
test: /\.(eot|svg|ttf|woff2?)$/,
loader: 'file-loader',
options: {
name: 'assets/webfonts/[name].[contenthash:8].[ext]'
}
},
{
test: /\.(c|sa|sc)ss$/,
use: [
'file-loader?name=[name].[contenthash:8].css',
'extract-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
'sass-loader',
],
},
],
},
},
'sass-loader',
],
},
],
},
output: {
filename: '[name].[contenthash:8].js',
path: path.resolve(__dirname, 'dist'),
},
output: {
filename: '[name].[contenthash:8].js',
path: path.resolve(__dirname, 'dist'),
},
plugins: Array.prototype.concat([
new CleanWebpackPlugin(),
], isProduction
? []
: [
new BrowserSyncPlugin({
host: 'localhost',
open: false,
proxy: 'http://localhost:3100/',
}),
])
}
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: 'index.html'
})
]
}