如何从Vue单个文件中提取JS和CSS到*.js和*.css

Question

Suppose I have wrote a omponent a.vue ,After packaging of webpack,some HTML that has used a.vue looks like this:

......
<script src="page.js"></script>
<link href="page.css" rel="stylesheet"/>
......

JS and CSS in a.Vue are packed into page.js and page.css .I want to know how to extract JS and CSS into separate files.Then HTML looks like:

<script src="a.js"></script>
<script src="page.js"></script>
<link href="a.css" rel="stylesheet"/>
<link href="page.css" rel="stylesheet"/>

I know it's not good to do this, I just want to know how to do it.

Answer 1

I found a simmilar question on github. Maybe you can try the given solution

https://github.com/vuejs/vue-loader/issues/681

configure webpack.prod.conf.js
config.entry = {}
config.entry[one.name] = one.path
config.output.libraryTarget = 'umd'
config.output.library = `${namespace}${one.importName}`
config.output.filename = `index.min.js`
config.output.path = path.resolve(__dirname, `../dist/components/${one.name}/`)

built it with

webpack(config, function (err, stats) {})

Answer 2

Personally I LOVE Single File Components (SFC) but it's really easy to separate html, css and js with Vue.

MyComponent.vue

<template>
  // html
</template>

<script src="./MyComponent.js"></script>
<style scoped src="./MyComponent.css">
</style>

See a simple example on Codesandbox

Answer 3

Use vue-cli create project then it can auto extract css and js.

I'm checking its webpack configuration