Javascript 通过网页包传送JS、CSS和图像
写这篇文章的原因是,我找不到任何简单的解决方案或解释多通道输出的网页 我想要实现什么Javascript 通过网页包传送JS、CSS和图像,javascript,css,webpack,Javascript,Css,Webpack,写这篇文章的原因是,我找不到任何简单的解决方案或解释多通道输出的网页 我想要实现什么 src/ js/ app.js (importing node modules) forms.js (referring to app.js and importing different forms' specific node modules) other javascripts: projects.js events.
src/
js/
app.js (importing node modules)
forms.js (referring to app.js and importing different forms' specific node modules)
other javascripts:
projects.js
events.js and so on
css/
style.css (importing bootstrap and other libraries)
forms.css
other styles
img/
(images)
webroot/ (dev)
js/
app.js
forms.js
other javascripts
projects.js
events.js
css/
style.css
img/
(images)
webroot/ (prod)
js/
app.min.js
forms.min.js
other javascripts minified
projects.min.js
events.min.js
css/
style.min.css
img/
(images optimized)
我想从css和图像(以及可能的sass文件和字体)获得seprate js。图像和字体可以简单地复制,但是JS需要编译和缩小,CSS/SASS需要处理和缩小
现在我有这个,但它只能处理JS文件
var config = {
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader, // instead of style-loader
'css-loader',
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new MiniCssExtractPlugin(),
],
};
var jsConfig = Object.assign({}, config, {
entry: './js/app.js',
output: {
path: path.resolve(__dirname, './../webroot/js'),
filename: 'app.js'
},
});
var cssConfig = Object.assign({}, config, {
entry: './css/style.css',
output: {
path: path.resolve(__dirname, './../webroot/css'),
filename: 'style.css'
},
});
module.exports = [
jsConfig,
cssConfig
];