質問編集履歴

追加編集しました

2020/11/20 05:50

投稿

oyu

スコア48

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -168,7 +168,7 @@
     "css-loader": "^5.0.1",
-    "postcss-loader": "^4.0.4",
+    "postcss-loader": "^4.1.0",
     "sass": "^1.29.0",
@@ -176,69 +176,101 @@
     "style-loader": "^2.0.0",
-    "webpack": "^5.5.1",
+    "webpack": "^5.6.0",
     "webpack-cli": "^4.2.0"
+  },
+  "browserslist": [
+    "last 1 version",
+    "> 1%",
+    "IE 10"
+  ]
+}
+```
+```ここに言語を入力
+webpack.config.jsのコードになります。
+const path = require('path');
+module.exports = {
+  mode: 'development',
+  entry: {app: './src/app.js', sub: './src/sub.js'},
+  output: {
+    path: path.resolve(__dirname, 'public'),
+    filename: '[name].bundle.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /.scss$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'postcss-loader',
+          'sass-loader'
+        ]
+      }
+    ]
   }
 }
-```
+```
 ```ここに言語を入力
-webpack.config.jsのコードになります。
+postcss.confing.jsのコードになります。
-const path = require('path');
 module.exports = {
+  plugins: [
-  mode: 'development',
+    require('autoprefixer')({
-  entry: {app: './src/app.js', sub: './src/sub.js'},
+      browsers: ['last 2 versions', 'ie >= 11', 'Android >= 4']
-  output: {
-    path: path.resolve(__dirname, 'public'),
-    filename: '[name].bundle.js'
-  },
+    })
-  module: {
-    rules: [
-      {
-        test: /.scss$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          'postcss-loader',
-          'sass-loader'
-        ]
+  ]
-      }
-    ]
-  }
 }

追加編集しました

2020/11/20 05:50

投稿

oyu

スコア48

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -28,196 +28,218 @@
 ```
-PS C:\Users\81907\Desktop\workspace> npx webpack
-npx: 82個のパッケージを7.882秒でインストールしました。
-CLI for webpack must be installed.
-  webpack-cli (https://github.com/webpack/webpack-cli)
-We will use "npm" to install the CLI via "npm install -D".
-Do you want to install 'webpack-cli' (yes/no): y
-Installing 'webpack-cli' (running 'npm install -D webpack-cli')...
-npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\81907\Desktop\workspace\package.json'
-npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\81907\Desktop\workspace\package.json'
-npm WARN webpack-cli@4.2.0 requires a peer of webpack@4.x.x || 5.x.x but none is installed. You must install peer dependencies yourself.
-npm WARN workspace No description
-npm WARN workspace No repository field.
-npm WARN workspace No README data
-npm WARN workspace No license field.
-+ webpack-cli@4.2.0
-updated 1 package and audited 100 packages in 2.338s
-6 packages are looking for funding
-  run `npm fund` for details
-found 0 vulnerabilities
-Error: Cannot find module 'webpack-cli/package.json'
-Require stack:
-- C:\Users\81907\AppData\Roaming\npm-cache\_npx\1476\node_modules\webpack\bin\webpack.js
-    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:831:15)
-    at Function.resolve (internal/modules/cjs/helpers.js:80:19)
-    at runCli (C:\Users\81907\AppData\Roaming\npm-cache\_npx\1476\node_modules\webpack\bin\webpack.js:50:26)
-    at C:\Users\81907\AppData\Roaming\npm-cache\_npx\1476\node_modules\webpack\bin\webpack.js:132:5
-    at processTicksAndRejections (internal/process/task_queues.js:97:5) {
-  code: 'MODULE_NOT_FOUND',
-  requireStack: [
-    'C:\Users\81907\AppData\Roaming\npm-cache\_npx\1476\node_modules\webpack\bin\webpack.js'
-  ]
+PS C:\Users\81907\Desktop\workspace\tmp> yarn add postcss-loader autoprefixer --dev
+yarn add v1.22.5
+[1/4] Resolving packages...
+[2/4] Fetching packages...
+info fsevents@2.1.3: The platform "win32" is incompatible with this module.
+info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
+[3/4] Linking dependencies...
+warning " > postcss-loader@4.1.0" has unmet peer dependency "postcss@^7.0.0 || ^8.0.1".
+warning " > autoprefixer@10.0.2" has unmet peer dependency "postcss@^8.1.0".
+[4/4] Building fresh packages...
+success Saved lockfile.
+success Saved 21 new dependencies.
+info Direct dependencies
+├─ autoprefixer@10.0.2
+└─ postcss-loader@4.1.0
+info All dependencies
+├─ @babel/code-frame@7.10.4
+├─ @babel/helper-validator-identifier@7.10.4
+├─ @babel/highlight@7.10.4
+├─ @types/parse-json@4.0.0
+├─ autoprefixer@10.0.2
+├─ callsites@3.1.0
+├─ cosmiconfig@7.0.0
+├─ error-ex@1.3.2
+├─ import-fresh@3.2.2
+├─ is-arrayish@0.2.1
+├─ js-tokens@4.0.0
+├─ json-parse-even-better-errors@2.3.1
+├─ lines-and-columns@1.1.6
+├─ normalize-range@0.1.2
+├─ num2fraction@1.2.2
+├─ parent-module@1.0.1
+├─ parse-json@5.1.0
+├─ path-type@4.0.0
+├─ postcss-loader@4.1.0
+├─ resolve-from@4.0.0
+└─ yaml@1.10.0
+Done in 2.63s.
+PS C:\Users\81907\Desktop\workspace\tmp> npx webpack
+[webpack-cli] Compilation finished
+asset app.bundle.js 19 KiB [emitted] (name: app)
+asset sub.bundle.js 860 bytes [emitted] (name: sub)
+runtime modules 931 bytes 4 modules
+cacheable modules 9.16 KiB
+  modules by path ./src/ 951 bytes
+    modules by path ./src/*.js 116 bytes
+      ./src/app.js 79 bytes [built] [code generated]
+      ./src/sub.js 37 bytes [built] [code generated]
+    modules by path ./src/*.scss 835 bytes
+      ./src/app.scss 408 bytes [built] [code generated]
+      ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/app.scss 427 bytes [built] [code generated]
+  modules by path ./node_modules/ 8.23 KiB
+    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
+    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
+webpack 5.6.0 compiled successfully in 1340 ms
+```
+### 該当のソースコード
+```ここに言語名を入力
+package.jsonコードになります。
+{
+  "name": "tmp",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "autoprefixer": "^10.0.2",
+    "css-loader": "^5.0.1",
+    "postcss-loader": "^4.0.4",
+    "sass": "^1.29.0",
+    "sass-loader": "^10.1.0",
+    "style-loader": "^2.0.0",
+    "webpack": "^5.5.1",
+    "webpack-cli": "^4.2.0"
+  }
 }
-```
+```
-### 該当のソースコード
-```ここに言語名を入力
+```ここに言語を入力
-package.jsonコードになります。
+webpack.config.jsのコードになります。
+const path = require('path');
+module.exports = {
+  mode: 'development',
+  entry: {app: './src/app.js', sub: './src/sub.js'},
+  output: {
+    path: path.resolve(__dirname, 'public'),
+    filename: '[name].bundle.js'
+  },
+  module: {
+    rules: [
-{
+      {
-  "name": "tmp",
-  "version": "1.0.0",
+        test: /.scss$/,
-  "main": "index.js",
-  "license": "MIT",
+        use: [
-  "devDependencies": {
+          'style-loader',
-    "autoprefixer": "^10.0.2",
-    "css-loader": "^5.0.1",
+          'css-loader',
-    "postcss-loader": "^4.0.4",
+          'postcss-loader',
-    "sass": "^1.29.0",
-    "sass-loader": "^10.1.0",
+          'sass-loader'
-    "style-loader": "^2.0.0",
-    "webpack": "^5.5.1",
+        ]
-    "webpack-cli": "^4.2.0"
+      }
+    ]
   }
 }
-```
+```
-```ここに言語を入力
-webpack.config.jsのコードになります。
-const path = require('path')
-module.exports = {
-    mode: 'development',
-    devtool: 'none',
-    entry: './src/app.js',
-    output: {
-        path: path.resolve(__dirname, 'public'),
-        filename: 'app.bundle.js'
-    },
-    module: {
-        rules: [{
-            test: /.scss$/,
-            use: [
-                'style-loader', // htmlにstyleタグで記述する
-                'css-loader', // cssをimportする
-                'postcss-loader', // autoprefixを付与
-                'sass-loader', // 下から実行する //sass→cssへ
-            plugins: [
-                // Autoprefixerを有効化
-                require("autoprefixer")({
-                    // ☆IEは11以上、Androidは4.4以上
-                    // その他は最新2バージョンで必要なベンダープレフィックスを付与する設定
-                    browsers: ["last 2 versions", "ie >= 11", "Android >= 4"]
-                })
-                ]
-            ]
-        }]
-    }
-}
-```