Webpack，多个入口点 Sass 和 JS

Posted 2023-02-21

【中文标题】Webpack，多个入口点 Sass 和 JS

【英文标题】：Webpack, multiple entry points Sass and JS

【发布时间】：2017-08-06 09:16:03

【问题描述】：

下面是我的 webpack 配置。目前文件加载这个 main.js 入口点

import './resources/assets/js/app.js';
import './resources/assets/sass/main.scss';

我可以在 public/js 文件中获取这两个文件，但我想在它们自己的文件夹中获取 css 和 js。这可能吗？

var webpack = require('webpack');
var path = require('path');
let ExtractTextPlugin = require("extract-text-webpack-plugin");
var WebpackNotifierPlugin = require('webpack-notifier');

module.exports = 

    resolve: 
    alias: 
      'masonry': 'masonry-layout',
      'isotope': 'isotope-layout'
    
  ,

    entry: './main.js',
    devtool: 'source-map',
    output: 
        path: path.resolve(__dirname, './public'),
        filename: 'bundle.js'
    ,

    module: 
        rules: [

           test: /\.js$/, 
                exclude: /node_modules/, 
                loader: "babel-loader?presets[]=es2015",

             ,

            
                test:/\.scss$/,
                use: ExtractTextPlugin.extract(
                    use: [loader:'css-loader?sourceMap', loader:'sass-loader', options: 
                    sourceMap: true
                ],

                )
            ,

            /*
        test    : /\.(png|jpg|svg)$/,
        include : path.join(__dirname, '/dist/'),
        loader  : 'url-loader?limit=30000&name=images/[name].[ext]'
    , */

            
                 test: /\.vue$/,
        loader: 'vue-loader',
        options: 
          loaders: 
          
          // other vue-loader options go here
        
      ,



        ]
    ,

    plugins: [

        //new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin('app.css'),
        new WebpackNotifierPlugin(),

    ]

;

【参考方案1】：

我也有类似的需求，不确定这是否是正确的做法，但它对我有用。

output: 
        path: path.join(__dirname, './public/js'),
        filename:'bundle.js'
    ,

那么对于css：

plugins: [
    new ExtractTextPlugin("../css/[name].css")
],

【讨论】：

是的，我想过，似乎有点错误，必须协商你的方式备份树然后写入文件。感谢您的回复，如果我发现任何其他问题，我将保持问题开放并发布。

是的，我知道这是一种 hack，但我真的找不到更清洁/正确的方法，哈哈。我很想看看还有什么其他解决方案，因为这是我一直想在我的 webpack 项目中改进的东西，哈哈。

【参考方案2】：

是的，您可以这样做，这是一个不需要您在 js 文件中导入 sass 文件的示例：

const config = 
    entry: 
        main: ['./assets/js/main.js', './assets/css/main.scss'],
    ,
    module: 
        rules: [
            test: /\.(css|scss)/, use: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
            // ...  
        ],
    ,
    output: 
        path: './assets/bundles/',
        filename: "[name].min.js",
    ,
    plugins: [
        new ExtractTextPlugin(
            filename: '[name].min.css',
        ),
        // ...
    ]
    // ...

您应该以./assets/bundles/main.min.js 和./assets/bundles/main.min.css 结束。显然你必须添加 js 规则。

【参考方案3】：

我们有多个入口点和输出，并像这样定义它们：

entry: 
    'js/main.min.js': './resources/assets/js/app.js', 
    'css/main.min.scss': './resources/assets/sass/main.scss'
,
output:   
    filename: path.resolve(__dirname, './public/assets/[name]')
,

webpack 读取条目的键并将它们替换到输出文件名中的[name] 标记中。 See documentation for "output filename"

【讨论】：

它可以工作，但生成scss 文件扩展名只是一个技巧。 main.min.scss 的内容将仍然是 javascript。

【参考方案4】：

ExtractTextPlugin 已被 CSS 弃用，推荐的方法是使用 MiniCssExtractPlugin。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = 
  entry: ['index.js', 'index.css'],
  module: 
    rules: [
      test: /\.(scss|css)$/,
      use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
    ]
  ,
  plugins: [
    new MiniCssExtractPlugin(
      filename: '[name]-[hash].css'
    )
  ]
;

您还需要单独安装npm i node-sass。

【参考方案5】：

我有一个管理面板（panel.js 和 panel.scss）和非管理内容页面（index.js 和 main.scss），我想编译成 2 个 css 文件和 2 个 js 文件 这就是我所做的：

module.exports = 
    entry: 
        'pages': ['./src/js/index.js', './src/css/main.scss'],
        'admin': ['./src/js/admin-index.js', './src/css/admin.scss']
    ,

 output: 
            filename: "./js/[name]-bundle.js",
            path: path.resolve(__dirname, "dist"), 
        ,

plugins: [
 new MiniCssExtractPlugin(
            
                filename: "./css/[name].css"
            
        ),
   ]

结果如下：

dist
    css
        admin.css
        pages.css
    js
        admin-bundle.js
        pages-bundle.js

效果不错，希望对你有帮助

【参考方案6】：

mini-css-extract-plugin 可以用 webpack 5 修复它

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = 
  entry: ['./src/js/index.js', './src/scss/index.scss'],
  output: 
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  ,
  module: 
    rules: [
      
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: 
          loader: "babel-loader",
          options: 
            presets: ['@babel/preset-env']
          
        
      , 
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      ,
    ]
  ,
  plugins: [
    new MiniCssExtractPlugin(
      filename: '[name]-[hash].css'
    ),
  ]
;