我是webpack的新手。
我想将babel文件导出到一个特殊的文件夹:
源js文件:
./achva_forms/assets/src/js/main.js
想要的目的地:
./achva_forms/assets/dist/js/bundle.js
当我运行npm run build
时,会在所需的目标位置创建bundle.js
文件,但是当我保存.scss
文件时,会在{{1}中创建bundle.js
文件}文件夹,而不是我想要的./achva_forms/assets/dist/
中。
我尝试更改./achva_forms/assets/dist/js/
文件(下面的代码)中的路径,但没有做任何更改。
我该怎么做才能获得想要的结果。 我很乐意提供其他信息。
webpack.config.js
这是main.js的内容:
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
module.exports = {
entry: './assets/src/js/main.js',
plugins: [
// Adding our UglifyJS plugin
new UglifyJSPlugin(),
new MiniCssExtractPlugin({
filename: "../css/[name].css",
chunkFilename: "../css/[id].css"
}),
new webpack.LoaderOptionsPlugin({
options:{
postcss: [
autoprefixer()
]
}
})
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './assets/dist/js/')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['babel-preset-env']
}
}
},
//sass
{
test: /\.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader"
]
}
]
}
};
Tnx。