/ Dist varlıklarını otomatikleştirmek çalışıyorum. Aşağıdaki config.js var:

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']
  }
}

Ayrıca, webpack'i çalıştırırken / dist yanında bulunan dizinden main.html dosyasını / dist klasörüne eklemek istiyorum. Bunu nasıl yapabilirim?

GÜNCELLEME 1 2017_____________

Bunu yapmanın en sevdiğim yolu html-webpack-pluginşablon dosyasıyla birlikte kullanmak . Kabul edilen cevap için teşekkürler! Bu yolun avantajı, endeks dosyası ayrıca kutunun dışında cachbusted js bağlantısı eklenecek olmasıdır!

seçenek 1

Sizin de index.jsdosyaya (yani webpack girişi) bir senin gerektirir eklemek index.htmlyoluyla dosya yükleyici eklentisi, örneğin:

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

Projenizi webpack ile oluşturduktan index.htmlsonra çıktı klasöründe olacaksınız.

seçenek 2

Kullanım html-webpack-eklentisi hiç bir index.html zorunda kalmamak için. Web paketinin dosyayı sizin için oluşturmasını sağlayın.

VitalyB'nin cevabına bir seçenek ekleyeceğim:

Seçenek 3

Npm ile. Komutlarınızı npm ile çalıştırırsanız, bu kurulumu package.json dosyasına ekleyebilirsiniz (ayrıca webpack.config.js dosyasını da kontrol edin). Geliştirme geliştirmek npm startiçin, bu durumda index.html kopyalamaya gerek yoktur, çünkü web sunucusu kaynak dosyaları dizininden çalıştırılacak ve bundle.js aynı yerden kullanılabilecektir (bundle.js yalnızca bellekte yaşayacaktır, ancak index.html ile birlikte bulunmuş gibi kullanılabilir). Üretim çalıştırmak npm run buildve bir dist klasörü için bundle.js ve index.html, aşağıda görebileceğiniz gibi eski cp komutuyla kopyalanır:

"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"
  }

Güncelleme: Seçenek 4

Bu Stackoverflow yanıtında açıklandığı gibi bir copy-webpack-eklentisi var

Aracılığıyla uygulamanıza kadar doğrudan css, html, resimler ve içerir, çok "ilk" dosyası (index.html gibi) ve (büyük resimler veya video gibi) daha büyük varlıklar haricinde Ama genel olarak, requireve webpack sizin için içerecektir (yükleyiciler ve muhtemelen eklentilerle doğru bir şekilde ayarladıktan sonra).

CopyWebpackPlugin kullanabilirsiniz . Tıpkı şu şekilde çalışıyor:

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

Cevabınız şöyle diyebilirim: Yapamazsınız. (veya en azından: yapmamalısınız). Bu Webpack'in yapması gereken şey değil. Webpack bir paketleyicidir ve diğer görevler için kullanılmamalıdır (bu durumda: statik dosyaları kopyalamak başka bir görevdir). Bu tür işleri yapmak için Grunt veya Gulp gibi bir araç kullanmalısınız. Webpack'i bir Grunt görevi veya Gulp görevi olarak entegre etmek çok yaygındır . Her ikisinin de sizin tarif ettiğiniz dosyaları kopyalamak için yararlı diğer görevleri vardır, örneğin, grunt-katkıda-kopya veya gulp-kopya .

Diğer varlıklar için (değil index.html), bunları yalnızca Webpack ile paketleyebilirsiniz (tam olarak Webpack bunun için kullanılır). Örneğin var image = require('assets/my_image.png');,. Ancak, index.htmlihtiyaçlarınızın paketin bir parçası olmaması gerektiğini varsayıyorum ve bu nedenle paketçi için bir iş değil.

Dizini doğrudan giriş yapılandırmanıza ekleyebilir ve yüklemek için bir dosya yükleyici kullanabilirsiniz

module.exports = {

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

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

}

Zaten var olan bir index.htmldosyayı distdizine kopyalamak için , kaynağı şablon olarak belirterek HtmlWebpackPlugin'i kullanabilirsiniz .index.html

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

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

Oluşturulan dist/index.htmldosya temelde .js dosyaları<script> gibi paketlenmiş kaynaklara webpack tarafından etiketler enjekte edilen fark ile kaynak dosyanızla aynı olacaktır . Küçültme ve diğer seçenekler yapılandırılabilir ve github'da belgelenir .

Windows'da bu iyi çalışır:

1. npm install --save-dev copyfiles
2. In package.jsonI kopyası görev var:"copy": "copyfiles -u 1 ./app/index.html ./deploy"

Bu, index.html'imi uygulama klasöründen konuşlandırma klasörüne taşır.

Yalnızca index.html almak istiyorsanız @ hobbeshunter'ın yanıtını genişletmek için CopyPlugin'i de kullanabilirsiniz, bu yöntemi diğer paketleri kullanmakta kullanmak için ana motivasyon, her tür için birçok paket eklemek ve yapılandırmak için bir kabus olmasıdır. en kolay yol CopyPlugin'i her şey için kullanmaktır :

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

Sonra

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

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

Gördüğünüz gibi tüm statik klasörü tüm içeriği ile birlikte dist klasörüne kopyalayın. Css veya dosya veya başka eklentilere gerek yoktur.

Bu yöntem her şey için uygun olmasa da, işi basit ve hızlı bir şekilde yapar.

Ben de buldum kolay ve yeterince jenerik için koymak benim index.html dosyayı içinde dist/ dizine ekleyebilir <script src='main.js'></script>etmek index.htmlbenim paketlenmiş webpack dosyaları dahil etmek. main.jsweb paketinin conf dosyasında başka belirtilmemişse paketimizin varsayılan çıktı adı gibi görünüyor . Sanırım iyi ve uzun vadeli bir çözüm değil, ama umarım webpack'in nasıl çalıştığını anlamaya yardımcı olabilir .