Webpack导出JS文件的某些网址

时间:2018-09-16 10:02:18

标签: javascript node.js webpack

我是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。

0 个答案:

没有答案