Я пытаюсь экспортировать все свои изображения в мою папку lib
(наш эквивалент dist) после запуска сборки веб-пакета. Загрузчик файлов успешно загружает все изображения в CSS, но не из HTML.
Моя структура папок:
webpack.config.js
package.json
/lib
/src
-- index.html
-- /img
-- /css
Я настроил: html-loader
file-loader
и использую html-webpack-plugin
Вот мой webpack.config.js
const webpack = require('webpack')
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.resolve(__dirname, 'src', 'js', 'index.js'),
output: {
path: path.resolve(__dirname, 'lib'),
filename: 'bundle.js'
// publicPath: '/lib/'
},
devServer: {
contentBase: path.join(__dirname, 'src'),
port: 8080,
https: true,
host: 'dev.com'
// publicPath: 'lib/'
},
devtool: 'cheap-eval-sourcemap',
resolve: {
extensions: [
'.js',
'.jsx',
'.scss',
'.css',
'.sass',
'.woff',
'.eot',
'.otf',
'.ttf',
'.svg',
'.png',
'.jpg'
]
},
node: {
fs: 'empty'
},
plugins: [
new ExtractTextPlugin('bundle.css'),
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
// new CopyWebpackPlugin([{ from: 'src/img/' }]),
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
output: { comments: false },
sourcemap: false
})
],
module: {
loaders: [
{
test: /\.js$/,
use: ['babel-loader'],
exclude: /node_modules/
},
{
test: /\.(png|jpg|svg)$/,
use: {
loader: 'file-loader',
options: {
name: '[name]-[hash:6].[ext]'
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 2
}
},
'postcss-loader'
]
}),
exclude: /node_modules/
},
{
test: /\.html$/,
use: ['html-loader']
},
{
test: /\.woff$/,
use: 'url-loader?limit=10240&mimetype=application/font-woff'
},
{
test: /\.ttf$/,
use: 'url-loader?limit=10240&mimetype=application/x-font-ttf'
},
{
test: /\.eot$/,
use: 'url-loader?limit=10240&mimetype=application/vnd.ms-fontobject'
},
{
test: /\.json$/,
use: 'json-loader'
}
]
}
}
На данный момент я использую CopyWebpackPlugin
, чтобы вручную скопировать мои изображения из /img
в /lib
В идеале я хотел бы иметь возможность оптимизировать свои изображения, хэшировать их и т. Д. *
Вот мой package.json
для ссылок на версии.
{
"name": "web",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server",
"build": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^6.2.10",
"babel-polyfill": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"body-parser": "^1.16.0",
"css-loader": "^0.26.1",
"ejs": "^2.5.5",
"ejs-loader": "^0.3.1",
"es6-promise": "^4.2.4",
"express": "^4.14.0",
"extract-text-webpack-plugin": "^2.1.2",
"fabric": "^1.7.3",
"file-loader": "^0.9.0",
"isomorphic-fetch": "^2.2.1",
"json-loader": "^0.5.4",
"mysql": "^2.13.0",
"node-fetch": "^1.7.3",
"nodemailer": "^2.7.2",
"nodemailer-smtp-transport": "^2.7.2",
"postcss": "^5.2.11",
"postcss-loader": "^1.2.2",
"sequelize": "^3.30.0",
"style-loader": "^0.13.1",
"urijs": "^1.18.9",
"url-loader": "^0.5.7",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
},
"devDependencies": {
"copy-webpack-plugin": "^4.5.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0"
}
}
Заранее большое спасибо!