webpack：具有多個文件類型輸出的多輸入

我已經能夠使用一個入口點將「es6標準」js文件編譯爲原生js，我也可以使用多個條目來編譯多個文件。例如：webpack：具有多個文件類型輸出的多輸入

webpack.config.js

module.exports = { 
    entry: { 
     front: "./static/src/js/Front.js", 
     account: "./static/src/js/Account.js" 
    }, 
    output: { 
     path: "./static/dist", 
     filename: "[name]-bundle.js" 
    } 
};

我已經明白使用模塊/插件編譯其他文件，用多一點點的概念...

modules: { 
    loaders: [ 
     { tests: '/\.(css|scss)$/', loader: 'css-loader|style-loader'} 
    ] 
}

這些解決方案僅將我的文件編譯爲JavaScript，包括我的styles (scss, sass, css)。

我正在尋找一個解決方案，我將有兩個（或多個）不同的條目文件，每個文件都將生成自己的輸出文件（不僅僅是.js）。我不介意有多個配置模塊。謝謝...

來源

2017-05-04 Oniya Daniel

我不知道你在問什麼，從我看到你已經有一個方法來提取源代碼分成多個文件，你在說什麼，從取出的樣式表捆綁？ –

是的！這就是我想要做的 - 「從捆綁中刪除樣式表並將其放入一個css文件中」 –

由於您的代碼在SCSS中，您需要SCSS加載器和CSS加載器，您還需要extract-text-webpack-plugin，這就是將包中包含的任何文本導出到單獨的文件中。

另外，因爲我知道你會想要從包中移動圖像和字體文件，我繼續添加測試以提取圖像/字體，對於那些需要安裝file-loader的用戶。我希望幫助

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

const extractCss= new ExtractText({ filename: 'styles/vendors.css' }); 
const extractSass = new ExtractText({ filename: 'styles/site.css' }); 

module.exports = (env) => { 
    return { 
    entry: { 
     main: path.resolve(__dirname, '../', 'src', 'Front.js'), 
    }, 
    output: { 
     path: path.resolve(__dirname, '../', 'dist'), 
     filename: 'js/[name]-bundle.js', 
    }, 
    module: { 
     rules: [ 
     { test: /\.css/, use: extractCss.extract(['css-loader']) }, 
     { test: /\.scss/, exclude: /node_modules/, use: extractSass.extract(['css-loader', 'sass-loader']) }, 

     { test: /\.(png|jpg)$/, exclude: /node_modules/, use: 'file-loader?outputPath=images/&publicPath=../'}, 
     { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, use: 'file-loader?outputPath=fonts/&publicPath=../'}, 
     ] 
    }, 
    resolve: { 
     modules: ['node_modules'], 
    }, 
    plugins: [ 
     extractCss, 
     extractSass, 
    ] 
    } 
}

PS: I am in a hurry out, so I just cooked this up fast, when I come back I will review, in case you find any bugs, just comment below.

來源

2017-05-05 12:43:12

謝謝，除了bootstrap等其他供應商的'scss'文件中的資產之外，此工作很好。我得到了一些這樣的錯誤（這只是一點點，錯誤信息很長） '找不到模塊：錯誤：無法解析'./fonts/glyphicons-halflings-regular.eot''， –

您可以如果您沒有使用任何字體，請將其取出 –

我正在使用字體文件 –

webpack：具有多個文件類型輸出的多輸入

回答

相關問題