質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

2593閲覧

Webpackでコンパイル時に.scssや.jsx等のファイルがコピーされてしまう

chieeeeno

総合スコア217

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2017/04/06 09:55

編集2022/01/12 10:55

###前提・実現したいこと
Webpack1.14.0でアップロード用のcss、jsファイルを生成する時に、
生成元の.scssファイルや.jsx等の不要なファイルがdistディレクトリにコピーされてしまうので、
それらをコピーしないようにしたい。

###発生している問題・エラーメッセージ
Webpackでコンパイル時にscssファイルやjsxファイルなどの不要なファイルがdistディレクトリにコピーされる

###該当のソースコード
webpack.config.prod.js

javascript

1var autoprefixer = require('autoprefixer'); 2var webpack = require('webpack'); 3var HtmlWebpackPlugin = require('html-webpack-plugin'); 4var ExtractTextPlugin = require('extract-text-webpack-plugin'); 5var ManifestPlugin = require('webpack-manifest-plugin'); 6var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); 7var url = require('url'); 8var paths = require('./paths'); 9var getClientEnvironment = require('./env'); 10var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin'); 11 12const strips = [ 13 // 'console.log', 14 // 'console.info', 15 'console.warn', 16 'console.error', 17 'console.assert', 18].map(strip => `strip[]=${strip}`).join(','); 19 20 21function ensureSlash(path, needsSlash) { 22 var hasSlash = path.endsWith('/'); 23 if (hasSlash && !needsSlash) { 24 return path.substr(path, path.length - 1); 25 } else if (!hasSlash && needsSlash) { 26 return path + '/'; 27 } else { 28 return path; 29 } 30} 31 32 33var homepagePath = require(paths.appPackageJson).homepage; 34var homepagePathname = homepagePath ? url.parse(homepagePath).pathname : '/'; 35 36var publicPath = ensureSlash(homepagePathname, false); 37 38var publicUrl = ensureSlash(homepagePathname, false); 39 40var env = getClientEnvironment(publicUrl); 41 42if (env['process.env'].NODE_ENV !== '"production"') { 43 throw new Error('Production builds must have NODE_ENV=production.'); 44} 45 46// This is the production configuration. 47// It compiles slowly and is focused on producing a fast and minimal bundle. 48// The development configuration is different and lives in a separate file. 49module.exports = { 50 context: __dirname, 51 // Don't attempt to continue if there are any errors. 52 bail: true, 53 // We generate sourcemaps in production. This is slow but gives good results. 54 // You can exclude the *.map files from the build during deployment. 55 // devtool: 'source-map', 56 // In production, we only want to load the polyfills and the app code. 57 entry: [ 58 require.resolve('./polyfills'), 59 paths.appIndexJs 60 ], 61 output: { 62 // The build folder. 63 path: paths.appBuild, 64 65 filename: 'js/[name].[chunkhash:8].js', 66 chunkFilename: 'js/[name].[chunkhash:8].chunk.js', 67 // We inferred the "public path" (such as / or /my-project) from homepage. 68 publicPath: publicPath 69 }, 70 resolve: { 71 72 fallback: paths.nodePaths, 73 extensions: ['.js', '.json', '.jsx', ''], 74 alias: { 75 'react-native': 'react-native-web' 76 } 77 }, 78 79 module: { 80 // First, run the linter. 81 // It's important to do this before Babel processes the JS. 82 preLoaders: [ 83 { 84 test: /\.(js|jsx)$/, 85 loader: 'eslint', 86 include: paths.appSrc 87 } 88 ], 89 loaders: [ 90 { 91 exclude: [ 92 /\.html$/, 93 /\.(js|jsx)$/, 94 /\.css$/, 95 /\.(scss|sass)$/, 96 /\.json$/, 97 /\.(gif|png|jpg|jpeg)$/, 98 /\.svg$/ 99 ], 100 loader: 'url', 101 query: { 102 limit: 10000, 103 name: 'static/media/[name].[hash:8].[ext]' 104 } 105 }, 106 // Process JS with Babel. 107 { 108 test: /\.(js|jsx)$/, 109 include: paths.appSrc, 110 loader: 'babel', 111 query: { 112 cacheDirectory: true, 113 plugins: ['transform-decorators-legacy' ], 114 presets: ['es2015', 'stage-0', 'react'] 115 } 116 }, 117 { 118 test: /\.(js|jsx)$/, 119 exclude: /node_modules/, 120 loaders: [...([`strip?${strips}`])], 121 }, 122 { 123 test: /\.(gif|png|jpg|jpeg|svg)$/, 124 loader: 'file', 125 query: { 126 limit: 10000, 127 name: '../img/[name].[ext]' 128 } 129 }, 130 { 131 test: /\.css$/, 132 loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1!postcss') 133 // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. 134 }, 135 { 136 test: /\.scss|sass$/, 137 loader: ExtractTextPlugin.extract('style', 'css-loader!sass-loader') 138 // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. 139 }, 140 // JSON is not enabled by default in Webpack but both Node and Browserify 141 // allow it implicitly so we also enable it. 142 { 143 test: /\.json$/, 144 loader: 'json' 145 } 146 ] 147 }, 148 149 // We use PostCSS for autoprefixing only. 150 postcss: function() { 151 return [ 152 autoprefixer({ 153 browsers: [ 154 "android > 4", 155 "iOS > 9", 156 "last 6 versions" 157 ] 158 }), 159 ]; 160 }, 161 plugins: [ 162 // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.: 163 // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 164 // In production, it will be an empty string unless you specify "homepage" 165 // in `package.json`, in which case it will be the pathname of that URL. 166 new InterpolateHtmlPlugin({ 167 PUBLIC_URL: publicUrl 168 }), 169 // Generates an `index.html` file with the <script> injected. 170 new HtmlWebpackPlugin({ 171 inject: true, 172 template: paths.appHtml, 173 minify: { 174 // sortAttributes:true, 175 // sortClassName:true, 176 removeComments: true, 177 collapseWhitespace: true, 178 removeRedundantAttributes: true, 179 useShortDoctype: true, 180 removeEmptyAttributes: true, 181 removeStyleLinkTypeAttributes: true, 182 keepClosingSlash: true, 183 minifyJS: true, 184 minifyCSS: true, 185 minifyURLs: true 186 } 187 }), 188 189 190 new webpack.DefinePlugin(env), 191 // This helps ensure the builds are consistent if source hasn't changed: 192 new webpack.optimize.OccurrenceOrderPlugin(), 193 // Try to dedupe duplicated modules, if any: 194 new webpack.optimize.DedupePlugin(), 195 // Minify the code. 196 new webpack.optimize.UglifyJsPlugin({ 197 compress: { 198 screw_ie8: true, // React doesn't support IE8 199 warnings: false 200 }, 201 mangle: { 202 screw_ie8: true 203 }, 204 output: { 205 comments: false, 206 screw_ie8: true 207 } 208 }), 209 // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`. 210 new ExtractTextPlugin('css/[name].[contenthash:8].css'), 211 // Generate a manifest file which contains a mapping of all asset filenames 212 // to their corresponding output file so that tools can pick it up without 213 // having to parse `index.html`. 214 new ManifestPlugin({ 215 fileName: 'asset-manifest.json' 216 }), 217 new SWPrecacheWebpackPlugin( 218 { 219 cacheId: 'XXXXXXXXXX', 220 filename: 'sw.js', 221 maximumFileSizeToCacheInBytes: 4194304, 222 minify: false, 223 staticFileGlobs: [ 224 '**.html', 225 'asset-manifest.json', 226 'css/**.*', 227 'img/**/*', 228 'js/**/*' 229 ], 230 runtimeCaching: [{ 231 handler: 'cacheFirst', 232 urlPattern: /\.(gif|png|jpg|jpeg|svg)$/, 233 }], 234 } 235 ) 236 ], 237 // Some libraries import Node modules but don't use them in the browser. 238 // Tell Webpack to provide empty mocks for them so importing them works. 239 node: { 240 fs: 'empty', 241 net: 'empty', 242 tls: 'empty' 243 } 244}; 245 246 247

###補足情報(言語/FW/ツール等のバージョンなど)
作成時にベースとしたファイルは、
create-react-appで作成した雛形から、npm run ejectして生成されたconfigファイルをベースとして作成しており、
sass-loader、sw-precacheなど、標準で入っていなかったものを追記しております。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

"scssファイルやjsxファイルなどの不要なファイル"という部分から、下のくだりが本当に適用されているのかどうかが気になります。

{ exclude: [ /\.html$/, /\.(js|jsx)$/, /\.css$/, /\.(scss|sass)$/, /\.json$/, /\.(gif|png|jpg|jpeg)$/, /\.svg$/ ], loader: 'url', query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' } },

一旦このくだりをはずして実行した時も、その不要なファイルとやらが吐かれるのかどうか。
(excludeでなくtestで定義するのでない?)

投稿2017/04/28 22:59

tomomo

総合スコア430

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問