웹팩 automaically restore : 설정 파일이라서 코드는 긴데, 내용은 굉장히 쉽습니다. MiniCssExtractPlugin 문제인데 왜일까요?

Question

디렉토리 파일 위치 ----------------------------------------dist/| main.hash....js| main.hash....js| main.jsnode_modulessrc/| index.js| test.jsstyle /| main.scssindex.htmlpackage-lock.jsonpackage.jsonwebpack.config.jswebpack.development.config.jswebpack.production.config.jspackage.json ---------------------------------------------&#34;dependencies&#34;: {&#34;-&#34;: &#34;^0.0.1&#34;,&#34;jquery&#34;: &#34;^3.7.1&#34;,&#34;lodash&#34;: &#34;^4.17.21&#34;},&#34;devDependencies&#34;: {&#34;css-loader&#34;: &#34;^6.8.1&#34;,&#34;html-webpack-plugin&#34;: &#34;^5.5.4&#34;,&#34;mini-css-extract-plugin&#34;: &#34;^2.4.5&#34;,&#34;node-sass&#34;: &#34;^9.0.0&#34;,&#34;sass&#34;: &#34;^1.69.5&#34;,&#34;sass-loader&#34;: &#34;^13.3.2&#34;,&#34;webpack&#34;: &#34;^5.89.0&#34;,&#34;webpack-cli&#34;: &#34;^5.1.4&#34;,&#34;webpack-merge&#34;: &#34;^5.10.0&#34;}webpack.config.js --------------------------------------const developmentConfig &#61; require(&#34;./webpack.development.config&#34;);const productionConfig &#61; require(&#34;./webpack.production.config&#34;);module.exports &#61; (env, {mode}) &#61;> {console.log(mode)return mode &#61;&#61;&#61; 'production'?productionConfig:developmentConfig;}webpack.development.config.js -------------------------module.exports &#61; {mode : 'development',entry : './src/index.js',watch : true,output : {filename: 'main.[contenthash].js',//path: path.resolve(__dirname, 'dist')path: path.join(__dirname, 'dist'),publicPath:'/',clean:true},plugins : [new HtmlWebpackPlugin({template:'./index.html',filename:'index.html',hash:true,inject:true,}),new MiniCssExtractPlugin({filename:'[name].[contenthash].css',chunkFilename:'[id].[contenthash].css'})],module : {rules:[{test:/\.s[ac]ss$/i,use:[ MiniCssExtractPlugin, {loader:'css-loader', options:{sourceMap:true}}, {loader:'sass-loader', options:{sourceMap:true}}],exclude: /node_modules/}]}}처음 build할 때 dist/index.html파일이 잘 만들어 졌지만,index 파일 내부에서 <script src &#61; '경로' 에서 경로 설정이 이상해서 output의 publicPath를 재 설정했지만, 전혀 적용되지 않았습니다.그래서 index.html파일을 삭제 후 다시 build를 했지만, index.html파일은 다시 복구되지 않았습니다. (예전에 gulp를 사용해서 잘못된 파일 삭제하면 다시 복구 됐던 것으로 기억해서 삭제해봤습니다.)어떻게 다시 복구 시킬 수 있을까요? 자답 :css관련 MiniCssExtractPlugin 대신에 'style-loader'를 사용하니, main.hash코드.js와 연결되면서 원하는 결과물이 나옵니다. 그럼 MiniCssExtractPlugin는 왜 계속 에러가 나는지 알 수 있을까요? - 파일이 생성되지 않고 당연히 안돼서 연결도 되지 않습니다. 'index.js에서 scss파일을 import 했습니다. 질문1 :MiniCssExtractPlugin를 사용해서 외부 스타일시트를 생성해서 연결할 수는 없을까요? 하나가 해결되면 다 해결될 것 같기는 합니다만, 왜 얘를 사용하면 index.html파일을 삭제한 이후에 build를 하면, 새로 생성되지 않을까요?MiniCssExtractPlugin 사용 - error 구문ex> TypeError: Class constructor MiniCssExtractPlugin cannot be invoked without 'new'at D\webpack.....

웹팩 automaically restore : 설정 파일이라서 코드는 긴데, 내용은 굉장히 쉽습니다. MiniCssExtractPlugin 문제인데 왜일까요?

0개의 답변

#outofmemory 목록