Is it possible to let webpack bundle CSS without import css in my entry js?

问题

Importing CSS file in js is webpack-specific. If I use gulp+browserify I will need browserify-css. I feel uncomfortable with writing source code that directly depends on having browserify-css or webpack(especially I am not writing React/Vue app, just vanilla js).

I find some Q&A related to this, e.g. import CSS and JS files using Webpack and Can I build sass/less/css in webpack without requiring them in my JS?

They suggested multiple-entry-points config (if I understand them correctly), i.e. create a dummy js file with only import css and add another entry in webpack.config.js for that js so the real entry js does not need to import css

I tried it but I still don't like the solution. Is there any other solution? If someone can confirm there is none I will be satisfied too. B/C someone else raised the same issue against extract-text-webpack-plugin and a reply said

webpack natively only understands 'js-ish' files and using a 'css-ish' file as an entry point isn't recommended (imho it should even fail),so you will get a dummy bundle per css entry to 'handle' that. require/import the css inside an entrypoint

回答1:

I asked the same question at https://gitter.im/webpack/webpack and no reply either I have almost gave up then I found it was answered here Webpack extract text plugin outputting .js and .css file for styles entry and Can I use webpack to generate CSS and JS separately? here.

So setting webpack.config.js like this webpack will output index.js & index.css

I don't need to import css in index.js any more!

entry:{
  index: [
    './src/js/index.js',
    "./resources/css/index.scss"
  ]
},
output:{
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
},

来源：https://stackoverflow.com/questions/51807092/is-it-possible-to-let-webpack-bundle-css-without-import-css-in-my-entry-js

标签

css

Webpack

browserify