在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ webpack配置css-loader后，在m瀏覽器報(bào)錯(cuò) require is

webpack配置css-loader后，在m瀏覽器報(bào)錯(cuò) require is not defined

最近學(xué)webpack，都是自己手寫配置，沒有添油加醋成分

a.css

body {background: red;}

main.js

require('./a.css'); 
function a(){}

package.json

{
  "name": "cssloader",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --mode development",
    "build": "webpack -p --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.11",
    "style-loader": "^0.21.0",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.3"
  }
}

webpack.config.js

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [
          {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
          }
        ]
    }
}

index.html

<html>
    <head>
        <!-- 在這里引入css文件就沒有問題  <link rel="stylesheet" href="./a.css"> -->
    </head>
<body>
    <h1>css-loader測試</h1>
    <script src="./main.js"></script>
</body>
</html>

執(zhí)行npm run dev
終端沒有報(bào)錯(cuò)，但是瀏覽器報(bào)錯(cuò)了

clipboard.png

clipboard.png
這究竟是為什么。。。。救救我這小白吧~

回答
編輯回答
耍太極

你在 index.html 中引入的JS是 main.js。 你把這個(gè)修改為 bundle.js 就可以了。
原因：你想想你為什么需要使用webpack把main.js進(jìn)行打包，是因?yàn)槟愕臑g覽器是不支持你所寫的模塊化的方式，所以才需要借助webpack進(jìn)行模塊化處理。

2017年6月23日 02:42
編輯回答
拮據(jù)

你好像還沒有摸清楚webpack打包過程，打包之后就不再是什么main.js了，main只是webpack的入口文件

2018年8月8日 14:05