如何在 Webpack 中构建 dist 文件夹后，将 bundle.js 和 css 文件移动到 statics 文件夹中？答案

【问题标题】：How after building the dist folder in Webpack, move the bundle.js and css file into the statics folder?如何在 Webpack 中构建 dist 文件夹后，将 bundle.js 和 css 文件移动到 statics 文件夹中？
【发布时间】：2017-11-10 10:00:51
【问题描述】：

当我运行 npm run build 或 npm run build-dev 时

它在根目录中创建 index.html 和 manage2.bundle.js 和 manage2.css 文件。我需要将这些文件移动到静态目录中。

所以下面生成的 index.html 将使用正确的路径实际工作：

<!doctype html>
<html lang="en">
<head>
    <title>Manage2</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="The TickerTags backend manage app">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Source+Sans+Pro:200,600" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="static/favicon.ico">
<link href="/static/manage2.css" rel="stylesheet"></head>
<body>
    <div id="manage2"></div>
<script type="text/javascript" src="/static/manage2.bundle.js"></script></body>
</html>

这是如何完成的？ webpack.config 下面

const fs = require('fs');
const webpack = require('webpack')
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const dist = path.resolve(__dirname, "dist");
const src = path.resolve(__dirname, "src");
const environment = process.env.NODE_ENV;

const stream = fs.createWriteStream("src/services/environment.js");
stream.once('open', function(fd) {
  stream.write('const env = "'+environment+'"\n');
  stream.write('export default env');
  stream.end();
});

module.exports = {
  context: src,
  entry: [
    "./index.js"
  ],
  output: {
    path: dist,
    filename: "manage2.bundle.js",
    publicPath: '/static/',
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallbackLoader: "style-loader",
          loader: ["css-loader", "sass-loader"],
          publicPath: dist
        })
      }
    ]
  },
  devServer: {
    hot: false,
    quiet: true,
    publicPath: "",
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    stats: "errors-only",
    open: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html"
    }),
    new ExtractTextPlugin({
      filename: "manage2.css",
      disable: false,
      allChunks: true
    }),
    new CopyWebpackPlugin([{ from: "static", to: "static" }])
  ]
};
// new webpack.DefinePlugin({ env: JSON.stringify(environment) })

我的 npm 脚本

"scripts": {
    "dev": "NODE_ENV=development webpack-dev-server --history-api-fallback",
    "prod": "NODE_ENV=production webpack-dev-server -p",
    "build": "NODE_ENV=production webpack -p",
    "build-dev": "NODE_ENV=production webpack -d",

【问题讨论】：

标签： javascript node.js npm webpack

【解决方案1】：

您的output.path 不正确。应该是path.resolve(__dirname, 'dist', 'static')。

从现在你的output.path 指向dist/static，将publicPath 设置回/。

【讨论】：

当我这样做时，当我 npm run dev 时，我的 localhost:8080 不再工作。 Cannot GET / 也在我的 dist 文件夹中，当我运行 npm run build 我在静态里面有静态
为什么devServer是publicPath: ""？文档说它应该始终以正斜杠开头和结尾。webpack.js.org/configuration/dev-server/#devserver-publicpath-
另外，您可能需要修改 devserver contentBase 以包含静态文件夹。我相信 dist 文件夹被认为是工作目录，因此不需要包含它。 contentBase: path.join(__dirname, "static")

【解决方案2】：

此配置将 *.js 和 *.css 保存到静态文件夹。

 output: {
 // the output bundle
 filename: '[name].[hash].js',
 // saves the files into the dist/static folder
 path: path.resolve(__dirname, 'dist/static'),
 // set static as src="static/main.js as relative path
 publicPath: 'static/'
 },

使用 HtmlWebpackPlugin，您可以从模板生成 html 文件。使用 Webpack 插件部分中的此配置，index.html 将保存到 dist。具有 *.js 和 *.css 的正确路径的文件夹。

plugins: [
   // is only working with npm run build
   new HtmlWebpackPlugin({
    title: '',
    // save index.html one director back from the output path
    filename: '../index.html',
    template: 'index.template.ejs',
    hash: false
   }),
  ],

index.template.ejs

<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>
<body>
</body>
</html>

结果

<html>
 <head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title> 
  </title>          
  <link href="static/main.css" rel="stylesheet">
 </head>    
  <body>    
   <script type="text/javascript" src="static/main.js"></script>
  </body>    
</html>

【讨论】：