webpack 构建到文件位置

Question

我有一些 webpack 应该以某种方式配置，这样当我运行“npm run build”时，文件应该移动到某个位置。

现在所有文件都构建到 ./build，但我希望它们全部(除了 index.html)都构建到这里

../../build/dist

除此之外，index.html 应该构建到这里

../../build.

我的文件夹结构是这样的。

folder 
  build ( current build folder, made automatically )
  node_modules
  webpack.config.js
  src
    assets
    components
    styles
    index.html
    index.js

这是我的网页包

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const chalk = require('chalk');
const SimpleProgressPlugin = require('webpack-simple-progress-plugin');


//*************PLUGINS***************All called in bottom of file***************************************/
// List of vendor JS libraries we want in a seperate vendor.js file
const VENDOR_LIBS = [ // this takes our vendor js files that we want in a seperate file
  "jquery",
  // "lodash",
  "babel-polyfill",
  "load-google-maps-api"
];

// Extract styles
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin({
  filename: 'styles.[contenthash].css'
});

// Clean our build folder
const CleanWebpackPlugin = require('clean-webpack-plugin');
const cleanConfig = new CleanWebpackPlugin(['build/*'], {
  root: '',
  verbose: true,
  dry: false,
  exclude: ['example.js']
})

// if we e.g. import jquery in our code, and also has it in our vendor.js file, remove them from our output bundle code, and only include it in vendor.js
const optimize = new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor'
});

const html = new HtmlWebpackPlugin({ //Automaticly make index.html for us, and use our own index.html as a template. This means that it will only fill out what we didn't add. Fx our stylesheet and javascript files.
  template: './src/index.html'
});

const progress = new SimpleProgressPlugin(
  {
    messageTemplate: ['Thinking   :bar', chalk.bold.bgBlue.yellow(':elapsed sec'), ':msg'].join(' '),
    progressOptions: {
      complete: chalk.bgGreen(' '),
      incomplete: chalk.bgWhite(' '),
      width: 20,
      total: 100,
      clear: false
    }
  }
);


//*************WEBPACK CONFIG***************************************************************/
module.exports = {
  entry: {
    bundle: './src/index.js', // Our whole codebase starts here. Our bundle will be called "bundle"
    vendor: VENDOR_LIBS // Our vendors, and output file will be named "vendor"
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js' // output bundle.js and vendor.js
  },
  resolve: {
    extensions: ['.js']
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: extractSass.extract({
          use: [{
            loader: "css-loader", options: {
              sourceMap: true,

            }
          }, {
            loader: "sass-loader", options: {
              sourceMap: true
            }
          }]
        })
      },
      {
        test: /\.(jpe?g|png|svg|gif|json|xml)$/,
        use: [
          {
            loader: 'file-loader',
            options: { 
              name: '[name].[ext]'
             }
          },          
          'image-webpack-loader'
        ]
      }
    ]
  },
  plugins: [ // Our plugin from the top, are called here
    progress,
    extractSass,
    cleanConfig,
    optimize,
    html
  ]
};

标清

Answer 1

这成功了。

publicPath: '../dist/'

我还有一个用于生产的静态index.html 文件。所以完整的设置现在看起来像这样

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const chalk = require('chalk');
const SimpleProgressPlugin = require('webpack-simple-progress-plugin');

const webpackIf = require('webpack-if');
const nodeEnv = process.env.NODE_ENV;
const ifDev = webpackIf.ifElse(nodeEnv === 'development');
const ifProd = webpackIf.ifElse(nodeEnv === 'production');
const prodDist = '../customer_name/dist'


//*************PLUGINS***************All called in bottom of file***************************************/
// List of vendor JS libraries we want in a seperate vendor.js file
const VENDOR_LIBS = [ // this takes our vendor js files that we want in a seperate file
  "jquery",
  // "lodash",
  "babel-polyfill",
  "load-google-maps-api",
  "axios"
];

// Extract styles
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin({
  filename: 'styles.css'
});

// Clean our build folder
const CleanWebpackPlugin = require('clean-webpack-plugin');
const cleanConfig = new CleanWebpackPlugin(['build/*'], {
  root: '',
  verbose: true,
  dry: false,
  exclude: ['example.js']
})

// if we e.g. import jquery in our code, and also has it in our vendor.js file, remove them from our output bundle code, and only include it in vendor.js
const optimize = new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor'
});

const html = new HtmlWebpackPlugin({ //Automaticly make index.html for us, and use our own index.html as a template. This means that it will only fill out what we didn't add. Fx our stylesheet and javascript files.
  template: './src/index.html'
});

const progress = new SimpleProgressPlugin(
  {
    messageTemplate: ['Thinking   :bar', chalk.bold.bgBlue.yellow(':elapsed sec'), ':msg'].join(' '),
    progressOptions: {
      complete: chalk.bgGreen(' '),
      incomplete: chalk.bgWhite(' '),
      width: 20,
      total: 100,
      clear: false
    }
  }
);


//*************WEBPACK CONFIG***************************************************************/
module.exports = {
  entry: {
    bundle: './src/index.js', // Our whole codebase starts here. Our bundle will be called "bundle"
    vendor: VENDOR_LIBS // Our vendors, and output file will be named "vendor"
  },
  output: {
    path: path.resolve(__dirname, ifProd(prodDist, 'build')),
    publicPath: ifProd('../dist/', ''),
    filename: '[name].js' // output bundle.js and vendor.js
  },
  resolve: {
    extensions: ['.js']
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: extractSass.extract({
          use: [{
            loader: "css-loader", options: {
              sourceMap: true,

            }
          }, {
            loader: "sass-loader", options: {
              sourceMap: true
            }
          }]
        })
      },
      {
        test: /\.(jpe?g|png|svg|gif|json|xml)$/,
        use: [
          {
            loader: 'file-loader',
            options: { 
              name: '[name].[ext]'
             }
          },          
          'image-webpack-loader'
        ]
      }
    ]
  },
  plugins: [ // Our plugin from the top, are called here
    progress,
    extractSass,
    cleanConfig,
    optimize,
    html
  ]
};

在我的 package.json 中我有这个，用来判断是开发模式还是生产模式

"scripts": {
    "serve": "NODE_ENV=development webpack-dev-server --open --config webpack.config.js",
    "build": "NODE_ENV=production webpack -p --config webpack.config.js"
  },