|
При компиляции в webpack с отложенной загрузкой (System.import) не подгружаются стили ...
#39490119
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
Ссылка на профиль пользователя:
|
|
|
|
Подскажите, почему не подгружаются стили и что необходимо сделать?
Совсем простой код. С заглавной странички вызываются либо первая либо вторая страницы. При этом, несмотря на то, что в скомпилированных файлах первой и второй страницы классы присутствуют, по факту они не привязываются к элементам
Код index.html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="dist/styles.css">
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
Код index.js
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
var style = require('./style/globalStyle.css');
var app = document.getElementById('app');
app.innerHTML = `
<div id="menu">
<button id="loadPage1">First page</button>
<button id="loadPage2">Second page</button>
</div>
<div id="content">
<h1>Main page</h1>
</div>
`;
document.getElementById('loadPage1').addEventListener('click', () => {
System.import('./page1')
.then(pageModule => {
document.getElementById('content').innerHTML = pageModule.default;
})
});
document.getElementById('loadPage2').addEventListener('click', () => {
System.import('./page2')
.then(pageModule => {
document.getElementById('content').innerHTML = pageModule.default;
})
});
if (DEVELOPMENT) {
if (module.hot){
module.hot.accept();
}
}
Код page1.js
1.
2.
3.
4.
var style1 = require('./style/css1.css');
const page = `<div class="red">This is the first page</div>`;
export default page;
Код page2.js
1.
2.
3.
4.
var style2 = require('./style/css2.css');
const page = `<div class="green">This is the second page</div>`;
export default page;
css1
1.
2.
3.
4.
5.
.red{
background-color: red;
width: 100%;
height: 100px;
}
css2
1.
2.
3.
4.
5.
.green{
background-color: green;
width: 100%;
height: 100px;
}
Код webpack.config
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var DEVELOPMENT = process.env.NODE_ENV === 'development';
var PRODUCTION = process.env.NODE_ENV === 'production';
var entry = PRODUCTION
? [ './src/index.js']
: [
'./src/index.js',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080'
];
var plugins = PRODUCTION
? [
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('style-[contenthash:10].css'),
new HtmlWebpackPlugin({
template: 'index-template.html'
})
]
: [ new webpack.HotModuleReplacementPlugin() ];
plugins.push(
new webpack.DefinePlugin({
DEVELOPMENT: JSON.stringify(DEVELOPMENT),
PRODUCTION: JSON.stringify(PRODUCTION)
})
);
const cssIdentifier = PRODUCTION ? '[hash:base64:10]' : '[path]{name]---[local]';
const cssLoader = PRODUCTION
? ExtractTextPlugin.extract({
loader: 'css-loader?localIdentName=' + cssIdentifier
})
: ['style-loader', 'css-loader?localIdentName=[path][name]---[local]']
module.exports = {
devtool: 'source-map',
entry: entry,
plugins: plugins,
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel-loader'],
exclude: '/node_modules/'
} , {
test: /\.(png|jpg|gif)$/,
loaders: ['url-loader?limit=10000&name=images/[hash:12].[exit]'],
exclude: '/node_modules/'
} , {
test: /\.css$/,
loaders:cssLoader,
exclude: '/node_modules/'
}]
},
output: {
path:path.join(__dirname, 'dist'),
publicPath: PRODUCTION ? '/' : '/dist/',
filename: PRODUCTION ? 'bundle.[hash:12].min.js' : 'bundle.js'
}
};
Содержимое скомпилированных файлов первой (ниже второй) страницы включают css файлы с классами, но вот по факту что-то происходит (или чего-то нужное не происходит) в результате чего элементам первой и второй страниц их стили не присваиваются
Содержимое первой страницы
1.
webpackJsonp([1],{4:function(i,e,n){"use strict";var s=(n(6),'<div class="red">This is the first page</div>');e.default=s},6:function(i,e,n){e=i.exports=n(3)(void 0),e.push([i.i,".red{\n background-color: red;\n width: 100%;\n height: 100px;\n}",""])}});
Содержимое второй страницы
1.
webpackJsonp([0],{5:function(e,n,i){"use strict";var s=(i(7),'<div class="green">This is the second page</div>');n.default=s},7:function(e,n,i){n=e.exports=i(3)(void 0),n.push([e.i,".green{\n background-color: green;\n width: 100%;\n height: 100px;\n}",""])}});
|
|
|
