Menu
Using vue-cli3 and trying to load a csv file via fetch command, I have configured vue.config.file like this
module.exports = {
chainWebpack: config => {
config.module
.rule('csv')
.use('file-loader')
}
}
and getting error:
INFO Starting development server...
ERROR Error: No loader specified
Error: No loader specified
at Function.normalizeUseItem (D:\Learn\d3\d3-projects\node_modules\webpack\lib\RuleSet.js:274:10)
at Function.normalizeUse (D:\Learn\d3\d3-projects\node_modules\webpack\lib\RuleSet.js:236:19)
at use.map (D:\Learn\d3\d3-projects\node_modules\webpack\lib\RuleSet.js:233:33)
at Array.map (<anonymous>)
at Function.normalizeUse (D:\Learn\d3\d3-projects\node_modules\webpack\lib\RuleSet.js:233:6)
at Function.normalizeRule (D:\Learn\d3\d3-projects\node_modules\webpack\lib\RuleSet.js:184:26)
at rules.map (D:\Learn\d3\d3-projects\node_modules\webpack\lib\RuleSet.js:86:20)
at Array.map (<anonymous>)
at Function.normalizeRules (D:\Learn\d3\d3-projects\node_modules\webpack\lib\RuleSet.js:85:17)
at new RuleSet (D:\Learn\d3\d3-projects\node_modules\webpack\lib\RuleSet.js:80:24)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
870
js. vue. config. js is an optional config file that will be automatically loaded by @vue/cli-service if it's present in your project root (next to package.
vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs): <template> <div class="example">{{ msg }}</div> </template> <script> export default { data() { return { msg: 'Hello world!', } }, } </script> <style> .example { color: red; } </style>
Vue CLI is built on top of Webpack and so for beginners, you do not need to know what Webpack is as the Vue CLI has taken care of the configurations with great default presets and you literally need 0 configs to start.
vue-cli-service build produces a production-ready bundle in the dist/ directory, with minification for JS/CSS/HTML and auto vendor chunk splitting for better caching. The chunk manifest is inlined into the HTML.
According to https://www.npmjs.com/package/webpack-chain what you've done is created a 'named use' but have not defined an associated loader. It appears that the config module requires invoking the functions in a specific order, which might not be very intuitive:
chainWebpack: config => {
config.module
.rule("html") //create a named rule
.test(/web-components/) //define the file test
.use("html-loader") //create a named use
.loader("html-loader") //assign a loader
.end(); //back up to define another use, e.g. you could do .end().use()....
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
