0
webpackファイルローダーですべての画像ファイルを出力しようとしていますが、webpackはすべての画像を無視しています。ちなみに、私は角のアプリで部分的にhtmlファイルをインポートしています。Webpackファイルローダーがファイルをコピーしておらず、URLを更新していません
私はすべてのHTMLパーシャルに
//importing template
import toolbar from '../views/toolbar.html';
angular
.module('se-branding', ['ngMaterial',])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state({
name: 'toolbars',
url: '/toolbars',
template: toolbar // passing imported template for a state
})
}])
マイテンプレートファイルをインポートファイルローダー
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin('styles/vendor.[hash].css');
const extractLESS = new ExtractTextPlugin('styles/app.[hash].css');
module.exports = {
entry: {
app: './app/scripts/app.js',
webui: './app/component/scripts/main.js'
},
output: {
// Absolute output directory
path: path.join(__dirname, 'dist'),
// Output path from the view of the page
// Uses webpack-dev-server in development
publicPath: '/dist',
// Filename for entry points
// Only adds hash in build mode
filename: 'js/[name].[hash].js',
// Filename for non-entry points
// Only adds hash in build mode
chunkFilename: 'js/[name].[hash].js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack Starter Angular - kitconcept',
template: 'app/index.html',
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
}
}),
extractCSS,
extractLESS
],
module: {
loaders: [
{
test: /\.less$/,
loader: extractLESS.extract({
use: [{
loader: "css-loader"
}, {
loader: "less-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
},
{
test: /\.css/,
loader: extractCSS.extract({
use: [{
loader: "css-loader"
}, {
loader: "less-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
},
{test: /\.html$/, loader: 'html-loader'},
// inline base64 URLs for <=8k images, direct URLs for the rest
//{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
// helps to load bootstrap's css.
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff&name=fonts/[name].[ext]'
},
{
test: /\.woff2$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff&name=fonts/[name].[ext]'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&minetype=application/octet-stream&name=fonts/[name].[ext]'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&minetype=image/svg+xml&name=fonts/[name].[ext]'
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
loader: 'file-loader?limit=1024&name=images/[name].[ext]'
}
]
},
resolve: {
modules: [path.resolve(__dirname, "src"), "node_modules", "bower_components", "bower_components/webui", "app/component/"]
},
devtool: 'eval-source-map'
};
私の主なファイルと画像のための私のWebPACKのセットアップは
<md-icon md-svg-icon="component/images/icons/16px/se_user.svg"></md-icon>
を下回っている私コンポーネント/ imagesからdist/imagesにファイルをコピーしようとしていますが、同じものをhtmlの部分で更新する必要があります。しかし、webpackはhtmlを元のファイルと同じようにレンダリングしており、ファイルをdist/imagesフォルダにコピーしません。
助けてください。私はほぼ2日間問題で立ち往生しています。
、代わりにファイル・ローダーの以下のようなURLローダを使用してみてください。 –
ウェブパック設定全体を共有できますか? – Abhishek
ウェブパック全体の設定が質問自体に反映されました。 –