ฉันกำลังพยายามทำให้สินทรัพย์เข้า / ออกโดยอัตโนมัติ ฉันมี config.js ต่อไปนี้:

module.exports = {
  context: __dirname + "/lib",
  entry: {
    main: [
      "./baa.ts"
    ]
  },
  output: {
    path: __dirname + "/dist",
    filename: "foo.js"
  },
  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript-loader'
      },
      { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.js')
    extensions: ['', '.js', '.json']
  }
}

ฉันต้องการรวม main.html จากไดเรกทอรีที่อยู่ถัดจาก / lib ลงในโฟลเดอร์ / dist เมื่อเรียกใช้ webpack ฉันจะทำสิ่งนี้ได้อย่างไร

UPDATE 1 2017_____________

วิธีที่ฉันโปรดปรานในการทำเช่นนี้คือการใช้html-webpack-pluginไฟล์เทมเพลต ขอบคุณคำตอบที่ยอมรับเช่นกัน! ข้อดีของวิธีนี้คือไฟล์ดัชนีจะมีลิงก์ js cachbusted เพิ่มออกมาจากกล่อง!

ตัวเลือกที่ 1

ในindex.jsไฟล์ของคุณ(เช่นรายการ webpack) เพิ่มความต้องการของคุณindex.htmlผ่านปลั๊กอินตัวโหลดไฟล์เช่น:

require('file-loader?name=[name].[ext]!../index.html');

เมื่อคุณสร้างโครงการด้วย webpack แล้วindex.htmlจะอยู่ในโฟลเดอร์ผลลัพธ์

ตัวเลือก 2

ใช้html-webpack-pluginเพื่อหลีกเลี่ยงการมี index.html เลย เพียงแค่ให้ webpack สร้างไฟล์ให้คุณ

ฉันจะเพิ่มตัวเลือกในคำตอบของ VitalyB:

ตัวเลือก 3

ผ่าน npm หากคุณเรียกใช้คำสั่งผ่าน npm คุณสามารถเพิ่มการตั้งค่านี้ใน package.json ของคุณได้ (ลองดู webpack.config.js ที่นั่นด้วย) สำหรับการพัฒนาที่เรียกใช้npm startไม่จำเป็นต้องคัดลอก index.html ในกรณีนี้เนื่องจากเว็บเซิร์ฟเวอร์จะถูกเรียกใช้จากไดเรกทอรีไฟล์ต้นฉบับและ Bundle.js จะสามารถใช้งานได้จากที่เดียวกัน (Bundle.js จะอยู่ในหน่วยความจำเท่านั้น แต่ จะสามารถใช้งานได้ราวกับว่ามันอยู่พร้อมกับ index.html) สำหรับการดำเนินการผลิตnpm run buildและโฟลเดอร์ dist จะมี bundle.js และ index.html ของคุณได้รับการคัดลอกด้วยคำสั่ง cp แบบเก่าอย่างที่คุณเห็นด้านล่าง:

"scripts": {
    "test": "NODE_ENV=test karma start",
    "start": "node node_modules/.bin/webpack-dev-server --content-base app",
    "build": "NODE_ENV=production node node_modules/.bin/webpack && cp app/index.html dist/index.html"
  }

อัพเดท: ตัวเลือก 4

มีcopy-webpack-pluginดังที่อธิบายไว้ในคำตอบของ Stackoverflow

แต่โดยทั่วไปยกเว้นไฟล์ "แรก" (เช่น index.html) และสินทรัพย์ขนาดใหญ่ (เช่นภาพหรือวิดีโอขนาดใหญ่) รวมถึง css, html, รูปภาพและอื่น ๆ โดยตรงในแอปของคุณผ่านทางrequireและ webpack จะรวมไว้สำหรับคุณ (ดีหลังจากที่คุณตั้งค่าอย่างถูกต้องด้วยตัวตักและปลั๊กอิน)

คุณสามารถใช้CopyWebpackPlugin มันใช้งานได้เช่นนี้:

module.exports = {
  plugins: [
    new CopyWebpackPlugin([{
      from: './*.html'
    }])
  ]
}

ฉันจะบอกว่าคำตอบคือ: คุณไม่สามารถ (หรืออย่างน้อย: คุณไม่ควร) นี่ไม่ใช่สิ่งที่ Webpack ควรทำ Webpack เป็นตัวรวมและไม่ควรใช้สำหรับงานอื่น ๆ (ในกรณีนี้: การคัดลอกไฟล์คงที่เป็นงานอื่น) คุณควรใช้เครื่องมืออย่าง Grunt หรือ Gulp เพื่อทำงานดังกล่าว มันเป็นเรื่องธรรมดามากที่จะบูรณาการWebpack เป็นงานฮึดฮัดหรือเป็นงานอึก พวกเขาทั้งสองมีงานอื่น ๆ ที่มีประโยชน์สำหรับการคัดลอกไฟล์เช่นคุณอธิบายเช่นฮึดฮัด contrib คัดลอกหรืออึกสำเนา

สำหรับเนื้อหาอื่น ๆ (ไม่ใช่index.html) คุณสามารถรวมเข้ากับ Webpack (นั่นคือสิ่งที่ Webpack ใช้) ตัวอย่างเช่นvar image = require('assets/my_image.png');. แต่ฉันคิดว่าความindex.htmlต้องการของคุณไม่ได้เป็นส่วนหนึ่งของบันเดิลดังนั้นจึงไม่ใช่งานสำหรับบันเดิล

คุณสามารถเพิ่มดัชนีลงในรายการกำหนดค่าโดยตรงและใช้ตัวโหลดไฟล์เพื่อโหลดได้

module.exports = {

  entry: [
    __dirname + "/index.html",
    .. other js files here
  ],

  module: {
    rules: [
      {
        test: /\.html/, 
        loader: 'file-loader?name=[name].[ext]', 
      },
      .. other loaders
    ]
  }

}

คัดลอกที่มีอยู่แล้วindex.htmlไฟล์ลงในdistไดเรกทอรีคุณก็สามารถใช้HtmlWebpackPluginโดยการระบุแหล่งที่มาindex.htmlเป็นแม่แบบ

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [    
    new HtmlWebpackPlugin({
      template: './path/to/index.html',
    })
  ],
  // ...
};

dist/index.htmlไฟล์ที่สร้างจะเหมือนกับไฟล์ต้นฉบับของคุณที่มีความแตกต่างซึ่งทรัพยากรที่รวมไว้เช่นไฟล์. js จะถูกฉีดด้วย<script>แท็กโดย webpack minificationและตัวเลือกเพิ่มเติมสามารถกำหนดค่าและได้รับการบันทึกไว้บน GitHub

มันทำงานได้ดีบน Windows:

1. npm install --save-dev copyfiles
2. ในpackage.jsonฉันมีงานคัดลอก:"copy": "copyfiles -u 1 ./app/index.html ./deploy"

สิ่งนี้จะย้าย index.html ของฉันจากโฟลเดอร์แอปไปยังโฟลเดอร์ปรับใช้

ในการขยายคำตอบของ @ hobbeshunter หากคุณต้องการใช้เฉพาะ index.html คุณสามารถใช้ CopyPlugin ได้แรงจูงใจหลักในการใช้วิธีนี้มากกว่าการใช้แพ็คเกจอื่นเป็นเพราะมันเป็นฝันร้ายที่จะเพิ่มแพ็คเกจจำนวนมากสำหรับทุกประเภทและกำหนดค่า ฯลฯ วิธีที่ง่ายที่สุดคือการใช้CopyPluginสำหรับทุกสิ่ง:

npm install copy-webpack-plugin --save-dev

แล้วก็

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin([
      { from: 'static', to: 'static' },
      { from: 'index.html', to: 'index.html', toType: 'file'},
    ]),
  ],
};

ตามที่คุณเห็นมันคัดลอกโฟลเดอร์คงทั้งพร้อมกับเนื้อหาทั้งหมดลงในโฟลเดอร์ dist ไม่จำเป็นต้องใช้ไฟล์ css หรือไฟล์หรือโปรแกรมเสริมอื่น ๆ

ในขณะที่วิธีนี้ไม่เหมาะกับทุกอย่างมันจะทำงานให้เสร็จได้อย่างรวดเร็ว

ฉันพบว่ามันง่ายและทั่วไปพอที่จะวางindex.html ไฟล์ของฉันไว้ในdist/ ไดเรกทอรีและเพิ่ม<script src='main.js'></script>เพื่อindex.htmlรวมไฟล์ webpack ที่ให้มาด้วย main.jsดูเหมือนว่าจะเป็นชื่อออกเริ่มต้นของมัดของเราถ้าไม่มีอื่น ๆ ที่ระบุไว้ในไฟล์ conf webpack ของ ฉันคิดว่ามันไม่ดีและแก้ปัญหาระยะยาว แต่ฉันหวังว่ามันจะช่วยให้เข้าใจว่าwebpackทำงานอย่างไร