1. webpack-dev-server下的設置(npm run dev)

./build/webpack.dev.conf.js 中，修改 new HtmlWebpackPlugin ，一個頁面一個實例。

new HtmlWebpackPlugin({
    // 打包後文件名
    filename: ‘index.html‘,
    // html模板
    template: ‘./src/views/index.html‘,
    // 打包後文件引入位置，[‘body‘|‘head‘]，這裏的true等同於body
    inject: true,
    // 引入的入口文件(entry)
 

    chunks: [‘index‘]
}),
new HtmlWebpackPlugin({
    filename: ‘login.html‘,
    template: ‘./src/views/login.html‘,
    inject: true,
    chunks: [‘login‘]
}),

2. webpack-build下的設置(npm run build)

打開 ./config/index.js 配置文件， build 屬性中，默認只有一個 index ，在這裏添加上自己的其他頁面及其路徑:

  build: {
      env: require(‘./prod.env‘),
      index: path.resolve(__dirname, 
 
‘../dist/index.html‘),  // index page
      login: path.resolve(__dirname, ‘../dist/login.html‘),  // login page
      assetsRoot: path.resolve(__dirname, ‘../dist‘),
      assetsSubDirectory: ‘static‘,
      assetsPublicPath: ‘/‘,  // 多級路徑可以在這裏配置, 比如{hostname}/admin/xxx 這裏可以寫為 ‘/admin/‘
      productionSourceMap: true
 
,
      productionGzip: false,
      productionGzipExtensions: [‘js‘, ‘css‘],
      bundleAnalyzerReport: process.env.npm_config_report
  }

打開 ./build/webpack.prod.conf.js ，修改 new HtmlWebpackPlugin ，同理dev，一個頁面一個實例。

  new HtmlWebpackPlugin({
      // 註意修改config.build.index，對應上面的config
      filename: process.env.NODE_ENV === ‘testing‘
        ? ‘index.html‘
        : config.build.index,
      // 模板文件路徑
      template: ‘./src/views/index.html‘,
      inject: true,
      minify: {
        // 刪除註釋
        removeComments: true,
        // 刪除空格
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // 更多屬性參見
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // 打包文件，註意公共文件(CommonsChunkPlugin中的name)放在前面
      chunks: [‘manifest‘, ‘vendor‘, ‘index‘],
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: ‘dependency‘
  }),
  new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === ‘testing‘
        ? ‘login.html‘
        : config.build.login,
      template: ‘./src/views/login.html‘,
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunks: [‘manifest‘, ‘vendor‘, ‘login‘],
      chunksSortMode: ‘dependency‘
  }),

3. css-loader無需配置，配置後會導致找不到包，vue-cli已經自動配置。

　　webpack註意事項

• • npm init ，生成 package.json 文件。
  • less的 @import ‘../xxxx.less‘; ，結尾一定要分號，路徑是同目錄需要 ./xxx.less 。
  • 如果出現 Cannot find element: #app 錯誤，需要在 webpack.config.js 文件中，配置 html-webpack-plugin 的 inject 屬性為 body 。
  • webpack.config.js 配置文件的 entry 屬性，為數組或字符串時打包為一個js文件，為json對象時打包為多個js文件， key 為占位符[name]的值。
  • 使用LESS需要安裝 less、less-loader 。
  • webpack.config.js 配置文件的 output 屬性， path: path.resolve(__dirname, ‘dist‘) ,是打包後文件存放位置， filename: ‘js/[name].bundle.js‘ ,是打包後文件名， publicPath: ‘http://webpacktest.nat123.cc‘ 是程序上線後的域名，這樣HTML中引入的文件就有hostname，如圖所示：

• • package.json配置文件中，scripts屬性可以配置webpack打包設置："webpack": "webpack --config webpack.config.js --progress --display-modules --display-reasons --colors"。

參考博客: webpack前端構建工具學習總結

vue cli 構建的 webpack 項目設置多頁面