Question

所以我有一个名为style.scss的SCSS文件。我有一个名为script.js的ES6文件。这两个文件都在./src/目录中。

我想使用Webpack获取style.scss，将其转换为CSS并将其粘贴到名为./dist/的文件夹中，文件名为style.css。我实际上可以做到这一点。

我还希望Webpack获取script.js，转换为ES5，并将其放入具有名为./dist/的文件的同一script.js文件夹中。我也可以做到这一点。

我不能做的是让两者同时发生。这是Webpack甚至可以做的事情吗？在这个例子中，我不希望我的所有样式都放入我的JS中，我特别希望它们被保存在像标准网站这样的单独文件中（就像这样，真的如此）。

我最接近的是：

 const ExtractTextPlugin = require('extract-text-webpack-plugin');

 module.exports = {
     entry: {
       script: './src/script.js',
       style: './src/style.scss'
     },
     output: {
         path: './dist',
         filename: '[name].js'
     },
     module: {
       rules: [
         {
           test: /\.scss$/,
           use: ExtractTextPlugin.extract({
             fallback: "style-loader",
             use: ['css-loader', 'sass-loader']
           })
         }
       ]
     },
     plugins: [
         new ExtractTextPlugin('style.css')
     ] }

但是这给了我一个script.js文件，一个style.css文件和一个style.js文件，这是一个烂摊子。

有什么建议吗？

Answer 1

您不想为CSS创建单独的入口点。您可以导入style.scss中的script.js，也可以将其添加到同一条目中。一个条目也可以是一个数组，webpack将它们包含在同一个包中，无论如何CSS都被提取出来，因此不会有任何额外的JavaScript。您的参赛作品如下：

entry: {
  script: ['./src/script.js', './src/style.scss']
},

将SCSS编译为CSS并同时将ES6转换为ES5

1 个答案: