내 반응 구성 요소를 빌드하기 위해 webpack을 사용하고 extract-text-webpack-plugin있으며 생성 된 js 파일에서 내 CSS를 분리 하는 데 사용하려고 합니다. 그러나 구성 요소를 빌드하려고하면 다음 오류가 발생
Module build failed: ReferenceError: window is not defined합니다..
내 webpack.config.js 파일은 다음과 같습니다.
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
MainComponent: './src/main.js'
},
output: {
libraryTarget: 'var',
library: 'MainComponent',
path: './build',
filename: '[name].js'
},
module: {
loaders: [{
test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader!css-loader')
}]
},
plugins: [
new ExtractTextPlugin('styles.css')
]
}
답변
함수 style-loader에서 before인수 로 사용할 수 있습니다 extract.
다음은 기본 구현입니다.
ExtractTextPlugin.extract = function(before, loader, options) {
if(typeof loader === "string") {
return [
ExtractTextPlugin.loader(mergeOptions({omit: before.split("!").length, extract: true, remove: true}, options)),
before,
loader
].join("!");
} else {
options = loader;
loader = before;
return [
ExtractTextPlugin.loader(mergeOptions({remove: true}, options)),
loader
].join("!");
}
};
기본적으로해야 할 일은 다음과 같습니다.
{
test: /\.sass$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract('style-loader', 'css!sass?indentedSyntax=true&sourceMap=true')
},
예를 들어 sass.
답변
원인에 대한 설명을 보지 못 했으므로 여기에이 답변을 게시했습니다.
에서 https://github.com/webpack/extract-text-webpack-plugin#api
ExtractTextPlugin.extract([notExtractLoader], loader, [options])
기존 로더에서 추출 로더를 만듭니다.
notExtractLoader(선택 사항) CSS가 추출되지 않을 때 사용해야하는 로더 (예 : allChunks : false 일 때> 추가 청크에서)
loader리소스를 CSS 내보내기 모듈로 변환하는 데 사용해야하는 로더입니다.
options
publicPath이 로더에 대한 publicPath 설정을 재정의하십시오.
이 #extract메소드는를 출력하는 로더를 받아야합니다 css. 무슨 일이 일어 났는지 웹 페이지에 삽입되도록 의도 된 자바 스크립트 코드style-loader 를 출력 하는 을 수신하고있었습니다 . 이 코드는 .window
당신과 로더 문자열을 전달하지 말아야 style로 #extract. 그러나 …를 설정하면 allChunks=false초기가 아닌 청크에 대한 CSS 파일을 빌드하지 않습니다. 따라서 페이지에 삽입하는 데 사용할 로더를 알아야합니다.
팁 : Webpack은 정말로 깊이 이해해야하는 도구입니다. 그렇지 않으면 이상한 문제가 많이 발생할 수 있습니다.
답변
웹팩 2
Webpack 2를 사용하는 경우 다음 변형이 작동합니다.
rules: [{
test: /\.css$/,
exclude: '/node_modules/',
use: ExtractTextPlugin.extract({
fallback: [{
loader: 'style-loader',
}],
use: [{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]--[hash:base64:5]',
},
}, {
loader: 'postcss-loader',
}],
}),
}]
새 추출 방법은 더 이상 세 개의 인수를 사용하지 않으며 V1에서 V2로 이동할 때 주요 변경 사항으로 나열됩니다.
https://webpack.js.org/guides/migrating/#extracttextwebpackplugin-breaking-change
답변
내 문제에 대한 해결책을 찾았습니다.
로더를 서로 연결 ( ExtractTextPlugin.extract('style-loader!css-loader')) 하는 대신 각 로더를 별도의 매개 변수로 전달해야합니다.ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')
답변
