版本
"extract-text-webpack-plugin":"^ 2.0.0-rc.2",
"webpack":"^ 2.2.0",
"webpack-dev-server":"^ 2.2.1"
问题
"extract-text-webpack-plugin":"^ 1.0.1",
"webpack":"^ 1.14.0",
"webpack-dev-server":"^ 1.16.2"
自从升级到版本2后不再能够HMR css/scss,更改样式会触发更改(请参阅下面的输出示例),但是我必须手动刷新页面以查看页面不会自动刷新的更改,如果我创建了更改scss文件后更改为js文件然后更改将反映为js更改触发HMR,其中还包括样式更改,但只更改样式而不更改js需要手动页面刷新.
任何想法,如果我配置了错误或我需要做什么让css/scss HMR工作？
我也在这里发布了这个问题:https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/384但不确定它是否是webpack-dev-server问题或者是extract-text-webpack -plugin问题或者只是我做过的事情.
命令运行:
npm run dev
"scripts": {
"dev": "webpack-dev-server --hot --inline"
}
升级前配置:
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'app');
let generateHtml = new HtmlWebpackPlugin({ title: 'My App' });
let extractCSS = new ExtractTextPlugin('styles/[name].css', { allChunks: true }); …webpack webpack-dev-server hot-module-replacement extract-text-plugin extracttextwebpackplugin
使用带有extract-text-webpack-plugin的css-loader中的css modules选项,Webpack 2 build在生产模式下无法正常工作.
在html元素上创建了正确的生成类,这意味着css-loader正在按预期工作,但是extract-text-webpack-plugin中提取的css文件缺少css标识符.
我正在使用一种方法来实现全局css和css模块,如下所述:https://github.com/css-modules/css-modules/pull/65 和这里:https://github.com/kitze/custom-react-scripts/issues/29.
我正在对以.css结尾的文件和以.cssm.css结尾的文件使用不同的加载器测试,表明它们应该使用模块加载.
配置的相关部分:
const extractTextPlugin = new ExtractTextPlugin({filename: '[name].[id].[contenthash].css', allChunks: true});
return {
module: {
rules: [
{
test: /\.cssm.(css|less)$/,
loader: extractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
{
loader: 'css-loader',
query: {
importLoaders: 1,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
query: {
ident: 'postcss',
plugins: function() {
return [
require('autoprefixer')
];
}
}
},
{
loader: 'less-loader'
}
]
})
},
{
test: /\.(css|less)$/,
include: …reactjs css-loader webpack-2 extract-text-plugin extracttextwebpackplugin
我有一个简单的多页面应用程序有三页,我webpack.config.js entry看起来像:
{
entry: {
a: 'pages/a.js',
b: 'pages/b.js',
c: 'pages/c.js',
}
}
每个页面都包含几个React组件,其中一些组件在第一次渲染时可以在首页看到,其中一些组件在视图之外.
我想以声明的方式定义每个页面/条目的哪些组件是"关键的"(在首页上),并将CSS提取到一个单独的文件中.就像是:
{
a: ['compononents/button/style.css', ...],
b: ['compononents/title/style.css', ...],
c: ['compononents/header/style.css', ...]
}
输出类似于:
- dist/a.critical.css
- dist/b.critical.css
- dist/c.critical.css
我一直在使用extract-text-webpack-plugin,但似乎找不到告诉它只在特定条目的上下文中提取特定CSS的方法.
如何在特定条目/页面的上下文中提取特定的CSS文件内容？
我有几个CSS入口点:
entry: {
...
styles: [
...
],
fonts: [
...
]
},
我正在使用ExtractTextPlugin分别捆绑CSS:
new ExtractTextPlugin({
filename: `[name].bundle.css`
}),
所以像输出我有2个CSS文件:styles.css和fonts.css是正确的但也是空的styles.js和fonts.js.有没有办法不生成空JS文件？
使用webpack 2(或3)时,我可以编写如下代码:
const coreStyles = new ExtractTextPlugin('./styles/core.bundle.css');
const componentStyles = new ExtractTextPlugin('./styles/components.bundle.css');
rules: [
{
test: /\.scss$|\.css$/,
include: path.resolve(__dirname, './styles/App.scss'),
use: coreStyles.extract({
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.scss$|\.css$/,
exclude: path.resolve(__dirname, './styles/App.scss'),
use: componentStyles.extract({
use: ['css-loader', 'sass-loader']
})
}
]
结果,我输出了2个css文件.
我怎么能达到相同的mini-css-extract-plugin？根据文档,我只能指定一个文件名:
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
})
]
谢谢.
webpack extract-text-plugin extracttextwebpackplugin mini-css-extract-plugin
我是用我的代码将我的JavaScript文件与React Router和Webpack 2分开:
export default {
path: '/',
component: Container,
indexRoute: {
getComponent(location, cb) {
if (isAuthenticated()) {
redirect();
} else {
System.import('../landing-page/LandingPage')
.then(loadRoute(cb))
.catch(errorLoading);
}
},
},
childRoutes: [
{
path: 'login',
getComponent(location, cb) {
System.import('../login/Login')
.then(loadRoute(cb))
.catch(errorLoading);
},
},
{ /* etc */
}
};
这个捆绑包的结果如下:
public/
vendor.bundle.js
bundle.js
0.bundle.js
1.bundle.js
2.bundle.js
这意味着最终用户只能获得他/她所需的JavaScript,根据他/她所处的路线.
问题是:对于css部分,我找不到任何资源来做同样的事情,即根据用户的需要拆分CSS.
有没有办法用Webpack 2和React Router做到这一点？
在尝试在我们的应用程序中实现页面优化时,我们希望能够为每个webpack块生成单独的CSS文件,以提高应用程序中第一页的页面呈现性能.为此,我们一直在尝试将extract-text-plugin与require.ensure结合使用,如下所示:
const $ = require('load-webpack-plugins')();
module.exports = {
entry: { 'app': './src/app.js' },
output: {
path: 'dist',
filename: '[name].js'
},
devtool: 'source-map',
module: {
loaders: [
{ test: /\.js$/, use: [{ loader: 'babel-loader' }] },
{
test: /\.css$/,
use: $.ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{ loader: 'css-loader' }]
})
}
]
},
plugins: [
new $.ExtractTextPlugin({ filename: '[name].[contenthash].css', allChunks: true }),
new $.NamedModulesPlugin(),
]
}
app.js是:
console.log('this is app.js');
require.ensure([], require => {
require('./a.css');
}, 'base');
require.ensure([], require => {
require('./b.css'); …我正在编写一个 Webpack 插件，该插件应该用 Webpack 生成的 CSS 文件列表替换部分 JS 代码。对这个 JS 代码进行成像：
ReactWebComponent.create(<App />, 'react-web-component', { injectReactWebComponent: true });
我想更换injectReactWebComponent: true零件
injectReactWebComponent: '<link href="static/css/main.cacbacc7.css" rel="stylesheet">'
而那个链接标签是一个由 Webpack 生成的文件。
我的（某种工作）代码如下：
ReactWebComponent.prototype.apply = function(compiler) {
compiler.plugin('emit', function(compilation, callback) {
const cssFiles = Object.keys(compilation.assets)
.filter(fileName => /\.css$/.test(fileName));
const jsFiles = Object.keys(compilation.assets)
.filter(fileName => /\.js$/.test(fileName));
const cssLinkTagsAsString = cssFiles
.map(fileName => `<link href="${fileName}" rel="stylesheet">`)
.join('');
jsFiles.forEach(fileName => {
compilation.assets[fileName].children.forEach(child => {
if (child._value) {
child._value = child._value.replace(/injectReactWebComponent\s*:\s*true/g, `injectReactWebComponent: \'${cssLinkTagsAsString}\'`);
}
});
});
callback(); …我正在尝试使用webpack 2实现extract-text-webpack-plugin,我正在从头开始构建我的webpack.config.js.当我想添加插件时,我按照npm上的说明操作.但是这给了我以下错误:
TypeError: Cannot read property 'query' of undefined
我环顾四周,没有抓到其他人对此插件有同样的问题.在假设这是一个错误之前,我宁愿先问我是否犯了错误.
我的webpack.config.js是
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
context: path.resolve(__dirname, './src'),
entry: {
app: './main.js',
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: [/node_modules/],
use: [{
loader: 'babel-loader',
options: { presets: ['es2015'] }
}]
},
{
test: /\.(sass|scss)$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
]
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: …如果在公共块中导入scss文件，似乎该公共块还导入了异步/动态js块，而该异步/动态js块又导入了另一个scss文件，则似乎会出现问题。
//===== a.js =====
import './common';
//===== b.js =====
import './common';
//===== common.js =====
import 'es6-promise/auto';
import './common.scss';
// dynamic import
import ('./async.js');
//===== async.js =====
import './async.scss'
上面的文件设置错误
Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (bootstrap 3d99482…:52)
at Object.95 (async.scss:1)
at __webpack_require__ (bootstrap 3d99482…:52)
at Object.96 (async.scss?eb60:4)
at __webpack_require__ (bootstrap 3d99482…:52)
at Object.94 (0.cb65e0.chunk.js:8)
at __webpack_require__ (bootstrap 3d99482…:52)
我打开了一个具有完整细节和复制步骤的问题
https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/456