下面是我的 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(),
]
};
最佳答案
是的,你可以这样做,下面是一个不需要你在 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 规则。
关于javascript - Webpack、多个入口点 Sass 和 JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42813050/