/ dist로 들어가는 자산을 자동화하려고합니다. 다음과 같은 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']
  }
}

또한 webpack을 실행할 때 / lib 옆에있는 디렉토리의 / dist 폴더에 main.html을 포함하고 싶습니다. 어떻게해야합니까?

업데이트 1 2017_____________

내가 가장 좋아하는 방법 html-webpack-plugin은 템플릿 파일과 함께 사용하는 것 입니다. 받아 들인 답변 덕분에! 이 방법의 장점은 인덱스 파일에 캐시 된 js 링크가 상자에서 추가된다는 것입니다!

옵션 1

당신의에서 index.js파일 (예 : 웹팩 항목)은 당신을 필요로 추가 index.html를 통해 파일 로더 플러그인, 예를 들면 :

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

webpack으로 프로젝트를 빌드 index.html하면 출력 폴더에 있습니다.

옵션 2

index.html이 전혀 없도록 html-webpack-plugin 을 사용하십시오 . 간단히 웹팩이 파일을 생성하도록합니다.

VitalyB의 답변에 옵션을 추가하겠습니다.

옵션 3

npm을 통해. npm을 통해 명령을 실행하면 package.json 에이 설정 을 추가 할 수 있습니다 (webpack.config.js도 확인하십시오). run을 개발 npm start하기 위해 웹 서버가 소스 파일 디렉토리에서 실행되고 bundle.js가 동일한 위치에서 사용 가능하기 때문에이 경우 index.html을 복사 할 필요가 없습니다 (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

가 복사 웹팩 - 플러그인은 이에 설명 된대로 유래 답변

그러나 일반적으로 index.html과 같은 첫 번째 파일과 큰 이미지 또는 비디오와 같은 더 큰 자산을 제외하고는 CSS, html, 이미지 등을 앱에 직접 require포함 시키십시오. (로더 및 플러그인으로 올바르게 설정 한 후).

CopyWebpackPlugin을 사용할 수 있습니다 . 다음과 같이 작동합니다.

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

나는 대답은 말할 수 없다 : 당신은 할 수 없다. (또는 최소한 :해서는 안됩니다). 이것은 Webpack이해야 할 일이 아닙니다. Webpack은 번 들러이며 다른 작업에는 사용해서는 안됩니다 (이 경우 정적 파일 복사는 다른 작업 임). 그런 작업을 수행하려면 Grunt 또는 Gulp와 같은 도구를 사용해야합니다. Webpack을 Grunt 작업 또는 Gulp 작업 으로 통합하는 것이 매우 일반적 입니다. 둘 다 grunt-contrib-copy 또는 gulp-copy 와 같이 파일을 복사하는 데 유용한 다른 작업이 있습니다 .

(가 아닌 index.html) 다른 자산의 경우 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에 의해 태그 가 삽입 된다는 차이점이 있습니다. 축소 및 추가 옵션을 구성 할 수 있으며 github에 문서화되어 있습니다.

이것은 Windows에서 잘 작동합니다.

1. npm install --save-dev copyfiles
2. 에서 package.jsonI 복사 작업이 :"copy": "copyfiles -u 1 ./app/index.html ./deploy"

이렇게하면 내 index.html이 앱 폴더에서 배포 폴더로 이동합니다.

index.html 만 가져 오려면 @hobbeshunter의 대답을 확장하려면 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의 conf 파일main.js 에 다른 것을 지정하지 않으면 번들의 기본 출력 이름 인 것 같습니다 . 나는 그것이 장기적이고 좋지 않은 해결책이라고 생각하지만 웹 팩 이 어떻게 작동 하는지 이해하는 데 도움이되기를 바랍니다 .