gpt4 book ai didi

javascript - Webpack 2 多个js条目以及babel和scss

转载 作者:行者123 更新时间:2023-12-03 02:09:21 24 4
gpt4 key购买 nike

我正在尝试更新我的 Webpack,以允许我拥有多个 JS 文件,这些文件也作为单独的文件输出。

在我需要多个 JS 文件之前,我使用了:

  entry: [
'babel-polyfill',
'./src/js/main.js',
'./src/scss/main.scss',
],

output: {
path: path.resolve(__dirname, './public/wp-content/themes/designdough/'),
filename: 'assets/js/main.min.js',
},

这非常有效,但现在我已将其更新为多个 JS 文件的对象,这有效。但 babel polyfill 显然不会,虽然我仍然得到一个文件,但它还创建了一个 scss.min.js

  entry: {
babel: 'babel-polyfill',
app: './src/js/main.js',
banner: './src/js/banner.js',
scss: './src/scss/main.scss',
},

output: {
path: path.resolve(__dirname, './public/wp-content/themes/designdough/'),
filename: 'assets/js/[name].min.js',
},

现在应该如何将babel和scss添加到条目中?

这是我的完整 Webpack 2 配置:

let webpack = require('webpack');
let path = require('path');

require("babel-polyfill");

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

let inProduction = (process.env.NODE_ENV === 'production');

module.exports = {
entry: [
'babel-polyfill',
'./src/js/main.js',
'./src/scss/main.scss',
],

output: {
path: path.resolve(__dirname, './public/wp-content/themes/designdough/'),
filename: 'assets/js/main.min.js',
},
externals: {
jquery: 'jQuery'
},
module: {
rules: [
{
test: /\.s[ac]ss$/,
use: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader',
options: {
url: false,
minimize: true,
sourceMap: true,
}
},
'sass-loader'
],
fallback: 'style-loader'
})
},

{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},

plugins: [
new ExtractTextPlugin('style.css'),

new webpack.LoaderOptionsPlugin({
minimize: inProduction
}),

new WebpackNotifierPlugin({
title: "WP Theme",
contentImage: path.resolve("./public/favicon.ico"),
alwaysNotify: true,
})
]
};

if (inProduction) {
module.exports.plugins.push(
new webpack.optimize.UglifyJsPlugin()
)
}

先前的输出:

assets/js/main.min.js   987 kB       0  [emitted]
style.css 86.2 kB 0 [emitted]

现在输出:

 assets/js/babel.min.js   264 kB       0  [emitted]  babel
assets/js/app.min.js 726 kB 1 [emitted] app
assets/js/banner.min.js 93.5 kB 2 [emitted] banner
assets/js/scss.min.js 2.52 kB 3 [emitted] scss
style.css 86.2 kB 3 [emitted]

最佳答案

应该是这样的:

entry: {
vendor: [
'babel-polyfill' // put all your vendor in this
]
app: './src/js/main.js',
banner: './src/js/banner.js',
// scss: './src/scss/main.scss', // remove this
},

请参阅document 。入口点仅用于js文件。

ExtractTextPlugin将从js文件中提取css。

关于javascript - Webpack 2 多个js条目以及babel和scss,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49647763/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com