Webpack을 사용하여 프로젝트에서 여러 파일 항목 및 출력을 설정하는 방법은 무엇입니까?

Webpack을 사용하여 프로젝트에서 여러 파일 항목 및 출력을 설정하는 방법은 무엇입니까?

---

Webpack을 사용하여 프로젝트에서 여러 파일 입력 / 출력을 설정하는 방법은 무엇입니까?

나는 http://webpack.github.io/docs/tutorials/getting-started/ 성공 컴파일을 따릅니다 .

예배 규칙서

app
webpack.config.js
./assets
././javascripts/Administrator/Article/Create/Base.js
././javascripts/Administrator/Article/Edit/Base.js
././javascripts/Account/Index/Base.js
././javascripts/Contact/Index/Base.js
...

이렇게 출력하는 방법?

././javascripts/Administrator/Article/Create/bundle.js
././javascripts/Administrator/Article/Edit/bundle.js
././javascripts/Account/Index/bundle.js
././javascripts/Contact/Index/bundle.js

webpack.config.js

module.exports = {
  entry: {
    'AdministratorArticleCreate':['./assets/javascripts/Administrator/Article/Create/Base.js']
  },
  output: {
    path: 
  }

    // if only one file
    // entry: "./assets/javascripts/Administrator/Article/Create/Base.js",
    // output: {
    //     // path: __dirname,
    //     path: "./assets/javascripts/Administrator/Article/Create/",
    //     filename: "bundle.js"
    // }
};

---

많은 진입 점에서 배열을 entry속성 값으로 사용 합니다.

entry: {
  app: ['./app/main.js', '.lib/index.js'],
  vendors: ['react']
}

app그리고 vendors당신이 필요로하는 당신이 많은 파일 경로로이 넣을 수 있도록 배열입니다.

출력 케이스의 경우 :

output: {
  path: staticPath,
  filename: '[name].js'
}

은 [name]에서 가져온 것입니다 entry우리가 만약 그렇다면, 속성 app및 vendors속성으로, 우리는이 개 출력 파일을 가지고 - app.js와 vendors.js.

문서 링크

---

여러 디렉토리로 출력하려는 ​​경우 경로를 항목 이름으로 사용할 수 있습니다. 예를 들어이 디렉토리 구조를 원하는 경우 :

apps
├── dir1
│   └── js
│       ├── main.js [entry 1]
│       └── bundle.js [output 1]
└── dir2
    ├── index.js [entry 2]
    └── foo.js [output 2]

그런 다음 module.exports에서 이것을 시도하십시오.

{
  entry: {
    'dir1/js/bundle': path.resolve(__dirname, '/apps/dir1/js/main.js'),
    'dir2/foo' : path.resolve(__dirname, '/apps/dir2/index.js')
  },
  output: {
    path: path.resolve(__dirname, '/apps'),
    filename: '[name].js'
  },
  ...
}

---

나를 위해 실제로 해결 한 것은 다음과 같습니다.

entry:  {
    app : __dirname + "/app/views/app/app.js",
    admin : __dirname + "/app/views/admin/admin.js"
}

output: {
    path: __dirname + "/public",
    filename: "[name].js"
},

---

당신이로 출력 파일을 얻으려면 foo.css과 bar.js같은 시간에? 위의 답변은 이것을 처리 할 수없는 것 같습니다.

건전한 방법은 다중 컴파일러 를 사용하는 것입니다 . 하나의 입력 파일 하나의 구성 개체 하나의 출력 파일. 이 답변에서 .

---

이 webpack 플러그인 web-webpack-plugin 은 샘플 방식으로 해결할 수 있습니다.

AutoWebPlugin디렉토리에서 모든 페이지 항목을 찾은 다음 WebPlugin모든 페이지에 대해 html 파일을 출력하도록 자동 구성하면 아래와 같이 사용할 수 있습니다.

웹팩 구성

module.exports = {
    plugins: [
        new AutoWebPlugin(
            // the directory hold all pages
            './src/', 
            {
            // the template file path used by all pages
            template: './src/template.html',
            // javascript main file for current page,if it is null will use index.js in current page directory as main file
            entity: null,
            // extract common chunk for all pages and then put it into a file named common,if it is null then not do extract action
            // achieve by CommonsChunkPlugin
            commonsChunk: 'common',
            // pre append to all page's entry
            preEntrys:['./path/to/file1.js'],
            // post append to all page's entry
            postEntrys:['./path/to/file2.js'],
        }),
    ]
};

src 디렉토리

── src
│   ├── home
│   │   └── index.js
│   ├── ie_polyfill.js
│   ├── login
│   │   └── index.js
│   ├── polyfill.js
│   ├── signup
│   │   └── index.js
│   └── template.html

출력 디렉토리

├── dist
│   ├── common.js
│   ├── home.html
│   ├── home.js
│   ├── ie_polyfill.js
│   ├── login.html
│   ├── login.js
│   ├── polyfill.js
│   ├── signup.html
│   └── signup.js

AutoWebPlugin find all page home login signup directory in ./src/,for this three page home login signup will use index.js as main file and output three html file home.html login.html signup.html`

see doc:auto detect html entry

---

You can detect multiple entries and generate separate output files by using glob sync patterns.

Put this into your webpack.config.js (without the ...)

const glob = require("glob");
...
module.exports = (env, options) => ({
  ...
  entry: glob.sync("./javascripts/**/*.js").reduce((acc, item) => {
    const path = item.split("/");
    path.pop();
    const name = path.join('/');
    acc[name] = item;
    return acc;
  }, {}),
  output: {
    filename: "[name]/bundle.js",
    path: path.resolve(__dirname, "")
  },
  ...
});

This "should" give you the desired output.

---

This question is 2 years old so I think the author has almost certainly moved on from this issue, but to anyone landing here more recently I had a really similar need and was able to write my own plugin to allow for dynamic output paths/names from known and/or unknown entry points.

My problem and thought process for the solution can be found here.

And the Node package itself here.

---

For my use case I actually needed to use different templates based on environment. To achieve this I passed in the NODE_ENV variable

module.exports = (env, argv) => {
  const ENVIRONMENT = env.NODE_ENV;
  let INDEX_HTML = 'index.html';
  if (ENVIRONMENT === 'staging') {
    INDEX_HTML = 'index-stg.html';
  }

Then:

if (NODE_ENV === 'staging') {
   INDEX_HTML = 'index-stg.html';
}

In the output:

output: {
      path: process.cwd() + '/build',
      filename: `[name].js`,
      chunkFilename: `[${HASH_MODE}].[name].js`
    },

plugins:

new HtmlWebpackPlugin({
        inject: true,
        template: `app/${INDEX_HTML}`,
      }),

참고URL : https://stackoverflow.com/questions/31907672/how-to-set-multiple-file-entry-and-output-in-project-with-webpack