teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問webpack autoprefixerコンパイルされません。

編集履歴

質問編集履歴

2

追加編集しました

2020/11/20 05:50

投稿

oyu
oyu

スコア48

title CHANGED
File without changes
body CHANGED
@@ -83,13 +83,18 @@
83
83
  "devDependencies": {
84
84
  "autoprefixer": "^10.0.2",
85
85
  "css-loader": "^5.0.1",
86
- "postcss-loader": "^4.0.4",
86
+ "postcss-loader": "^4.1.0",
87
87
  "sass": "^1.29.0",
88
88
  "sass-loader": "^10.1.0",
89
89
  "style-loader": "^2.0.0",
90
- "webpack": "^5.5.1",
90
+ "webpack": "^5.6.0",
91
91
  "webpack-cli": "^4.2.0"
92
- }
92
+ },
93
+ "browserslist": [
94
+ "last 1 version",
95
+ "> 1%",
96
+ "IE 10"
97
+ ]
93
98
  }
94
99
 
95
100
  ```
@@ -120,4 +125,15 @@
120
125
  ]
121
126
  }
122
127
  }
128
+ ```
129
+ ```ここに言語を入力
130
+ postcss.confing.jsのコードになります。
131
+
132
+ module.exports = {
133
+ plugins: [
134
+ require('autoprefixer')({
135
+ browsers: ['last 2 versions', 'ie >= 11', 'Android >= 4']
136
+ })
137
+ ]
138
+ }
123
139
  ```

1

追加編集しました

2020/11/20 05:50

投稿

oyu
oyu

スコア48

title CHANGED
File without changes
body CHANGED
@@ -13,43 +13,61 @@
13
13
  ### 発生している問題・エラーメッセージ
14
14
 
15
15
  ```
16
+ PS C:\Users\81907\Desktop\workspace\tmp> yarn add postcss-loader autoprefixer --dev
17
+ yarn add v1.22.5
18
+ [1/4] Resolving packages...
19
+ [2/4] Fetching packages...
20
+ info fsevents@2.1.3: The platform "win32" is incompatible with this module.
21
+ info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
22
+ [3/4] Linking dependencies...
23
+ warning " > postcss-loader@4.1.0" has unmet peer dependency "postcss@^7.0.0 || ^8.0.1".
24
+ warning " > autoprefixer@10.0.2" has unmet peer dependency "postcss@^8.1.0".
25
+ [4/4] Building fresh packages...
26
+ success Saved lockfile.
27
+ success Saved 21 new dependencies.
28
+ info Direct dependencies
29
+ ├─ autoprefixer@10.0.2
30
+ └─ postcss-loader@4.1.0
31
+ info All dependencies
32
+ ├─ @babel/code-frame@7.10.4
33
+ ├─ @babel/helper-validator-identifier@7.10.4
34
+ ├─ @babel/highlight@7.10.4
35
+ ├─ @types/parse-json@4.0.0
36
+ ├─ autoprefixer@10.0.2
37
+ ├─ callsites@3.1.0
38
+ ├─ cosmiconfig@7.0.0
39
+ ├─ error-ex@1.3.2
40
+ ├─ import-fresh@3.2.2
41
+ ├─ is-arrayish@0.2.1
42
+ ├─ js-tokens@4.0.0
43
+ ├─ json-parse-even-better-errors@2.3.1
44
+ ├─ lines-and-columns@1.1.6
45
+ ├─ normalize-range@0.1.2
46
+ ├─ num2fraction@1.2.2
47
+ ├─ parent-module@1.0.1
48
+ ├─ parse-json@5.1.0
49
+ ├─ path-type@4.0.0
50
+ ├─ postcss-loader@4.1.0
51
+ ├─ resolve-from@4.0.0
52
+ └─ yaml@1.10.0
53
+ Done in 2.63s.
16
- PS C:\Users\81907\Desktop\workspace> npx webpack
54
+ PS C:\Users\81907\Desktop\workspace\tmp> npx webpack
17
- npx: 82個のパッケージを7.882秒でインストールしました。
18
- CLI for webpack must be installed.
19
- webpack-cli (https://github.com/webpack/webpack-cli)
20
-
21
- We will use "npm" to install the CLI via "npm install -D".
22
- Do you want to install 'webpack-cli' (yes/no): y
23
- Installing 'webpack-cli' (running 'npm install -D webpack-cli')...
24
- npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\81907\Desktop\workspace\package.json'
25
- npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\81907\Desktop\workspace\package.json'
26
- 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.
27
- npm WARN workspace No description
28
- npm WARN workspace No repository field.
29
- npm WARN workspace No README data
30
- npm WARN workspace No license field.
31
-
32
- + webpack-cli@4.2.0
33
- updated 1 package and audited 100 packages in 2.338s
34
-
35
- 6 packages are looking for funding
55
+ [webpack-cli] Compilation finished
56
+ asset app.bundle.js 19 KiB [emitted] (name: app)
57
+ asset sub.bundle.js 860 bytes [emitted] (name: sub)
36
- run `npm fund` for details
58
+ runtime modules 931 bytes 4 modules
37
-
38
- found 0 vulnerabilities
59
+ cacheable modules 9.16 KiB
39
-
60
+ modules by path ./src/ 951 bytes
61
+ modules by path ./src/*.js 116 bytes
62
+ ./src/app.js 79 bytes [built] [code generated]
63
+ ./src/sub.js 37 bytes [built] [code generated]
64
+ modules by path ./src/*.scss 835 bytes
65
+ ./src/app.scss 408 bytes [built] [code generated]
66
+ ./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]
40
- Error: Cannot find module 'webpack-cli/package.json'
67
+ modules by path ./node_modules/ 8.23 KiB
41
- Require stack:
42
- - C:\Users\81907\AppData\Roaming\npm-cache\_npx\1476\node_modules\webpack\bin\webpack.js
68
+ ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
43
- at Function.Module._resolveFilename (internal/modules/cjs/loader.js:831:15)
69
+ ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
44
- at Function.resolve (internal/modules/cjs/helpers.js:80:19)
70
+ webpack 5.6.0 compiled successfully in 1340 ms
45
- at runCli (C:\Users\81907\AppData\Roaming\npm-cache\_npx\1476\node_modules\webpack\bin\webpack.js:50:26)
46
- at C:\Users\81907\AppData\Roaming\npm-cache\_npx\1476\node_modules\webpack\bin\webpack.js:132:5
47
- at processTicksAndRejections (internal/process/task_queues.js:97:5) {
48
- code: 'MODULE_NOT_FOUND',
49
- requireStack: [
50
- 'C:\Users\81907\AppData\Roaming\npm-cache\_npx\1476\node_modules\webpack\bin\webpack.js'
51
- ]
52
- }
53
71
  ```
54
72
 
55
73
  ### 該当のソースコード
@@ -79,34 +97,27 @@
79
97
  ```ここに言語を入力
80
98
  webpack.config.jsのコードになります。
81
99
 
82
- const path = require('path')
100
+ const path = require('path');
83
101
 
84
102
  module.exports = {
85
- mode: 'development',
103
+ mode: 'development',
86
- devtool: 'none',
87
- entry: './src/app.js',
104
+ entry: {app: './src/app.js', sub: './src/sub.js'},
88
- output: {
105
+ output: {
89
- path: path.resolve(__dirname, 'public'),
106
+ path: path.resolve(__dirname, 'public'),
90
- filename: 'app.bundle.js'
107
+ filename: '[name].bundle.js'
91
- },
108
+ },
92
- module: {
109
+ module: {
93
- rules: [{
110
+ rules: [
111
+ {
94
- test: /.scss$/,
112
+ test: /.scss$/,
95
- use: [
113
+ use: [
96
- 'style-loader', // htmlにstyleタグで記述する
114
+ 'style-loader',
97
- 'css-loader', // cssをimportする
115
+ 'css-loader',
98
- 'postcss-loader', // autoprefixを付与
116
+ 'postcss-loader',
99
- 'sass-loader', // 下から実行する //sass→cssへ
100
- plugins: [
101
- // Autoprefixerを有効化
117
+ 'sass-loader'
102
- require("autoprefixer")({
103
- // ☆IEは11以上、Androidは4.4以上
104
- // その他は最新2バージョンで必要なベンダープレフィックスを付与する設定
105
- browsers: ["last 2 versions", "ie >= 11", "Android >= 4"]
106
- })
107
- ]
118
+ ]
119
+ }
108
- ]
120
+ ]
109
- }]
110
- }
121
+ }
111
122
  }
112
123
  ```