xgqfrms / FEIQA

FEIQA: Front End Interviews Question & Answers
https://feiqa.xgqfrms.xyz
MIT License
7 stars 0 forks source link

webpack 3.x best practical & webpack 4.x best practical #24

Open xgqfrms opened 6 years ago

xgqfrms commented 6 years ago

webpack 3.x best practical

https://www.cnblogs.com/xgqfrms/p/9515189.html

multi pages

webpack 4.x best practical

https://www.cnblogs.com/xgqfrms/p/9109493.html

xgqfrms commented 6 years ago

webpack html plugin multiple entry

https://github.com/jantimon/html-webpack-plugin/issues/218

https://webpack.js.org/plugins/html-webpack-plugin/

Multi Page Application

this is possible via multiple instances of the HtmlWebpackPlugin

https://github.com/jantimon/html-webpack-plugin/issues/218#issuecomment-183066602 https://github.com/jantimon/html-webpack-plugin#options https://github.com/jantimon/html-webpack-plugin#generating-multiple-html-files

webpack.config.js


{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(), // Generates default index.html
    new HtmlWebpackPlugin({  // Also generate a test.html
      filename: 'test.html',
      template: 'src/assets/test.html'
    })
  ]
}

https://github.com/webpack/docs/wiki/configuration#outputpublicpath

https://webpack.js.org/concepts/entry-points/ https://webpack.js.org/guides/getting-started/#using-a-configuration

jade

https://github.com/jantimon/html-webpack-plugin/blob/master/examples/inline/template.jade

https://github.com/webpack/docs/wiki/node.js-api#stats


https://github.com/kaola-fed/blog https://blog.kaolafed.com/2017/08/10/HTTP%E8%AF%B7%E6%B1%82%E4%B8%AD%E7%9A%84Form%20Data%E4%B8%8ERequest%20Payload%E7%9A%84%E5%8C%BA%E5%88%AB/

xgqfrms commented 6 years ago

https://github.com/xgqfrms/FEIQA/issues/22#issuecomment-414206129

xgqfrms commented 6 years ago

OK

it's ok now

  1. jsut remove inject: false,

  2. manaully setting multi pages


    new HtmlWebpackPlugin({
        // inject: false,
        hash: true,
        chunks: ["app"],
        template: "./src/html/app.html",
        filename: "./pages/app.html"
        // filename: "./pages/[name].html"
    }),
    new HtmlWebpackPlugin({
        // inject: false,
        hash: true,
        chunks: ["main"],
        template: "./src/html/main.html",
        filename: "./pages/main.html"
    }),
    new HtmlWebpackPlugin({
        template: "./src/html/index.html",
        filename: "./index.html",
        chunks: ["index"],
        // chunks: ["app", "main"],// load modules order ??? fifo
        hash: true,
        // minify: true,
        minify: {
            collapseWhitespace: true,
            collapseInlineTagWhitespace: true,
        },
    }),

image