多入口页面webpack打包

多入口页面webpack打包

前几天研究了一下webpack的多入口页面打包，先整理在了github。
由于这段时间比较忙，稍后会详细讲解一下，具体内容请看我的github

本文原创，转载请注明出处

以下是关键内容
webpack.config.js

const resolve = require('path').resolve
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const url = require('url')
const publicPath = '/'
const port = '8010' // 默认一个打开浏览器的端口号 如：http://localhost:8010
/*
* 参考地址： https://www.cnblogs.com/legu/p/5741116.html
*
* */
const glob = require('glob')
function getEntry(globPath, pathDir) {
    var files = glob.sync(globPath);
    var entries = {},
        entry, dirname, basename, pathname, extname;

    for (var i = 0; i < files.length; i++) {
        entry = files[i];
        dirname = path.dirname(entry);
        extname = path.extname(entry);
        basename = path.basename(entry, extname);
        pathname = path.join(dirname, basename);
        pathname = pathDir ? pathname.replace(pathDir, '') : pathname;
        console.log(2, pathname, entry);
        entries[pathname] = './' + entry;
    }
    return entries;
}
//我们的key不是简单用的上一个代码的index,login而是用的index/index,login/login因为考虑在login目录下面还有register
//文件路径的\\和/跟操作系统也有关系，需要注意 (模板路径是src/**/*.html，可自定义路径)
var htmls = getEntry('./src/**/*.html', 'src\\');
var entries = {};
var HtmlPlugin = [];
for (var key in htmls) {
    entries[key] = htmls[key].replace('.html', '.js')
    console.info(entries[key])
    entries['common'] = '~/js/common/common.js'
    entries['nav'] = '~/js/common/nav.js'
    HtmlPlugin.push(
        new ExtractTextPlugin('css/[name].css?[chunkhash]'),
        new HtmlWebpackPlugin({
            filename: (key == 'index' ? 'index.html' : key + '.html'),
            template: htmls[key],
            inject: true,
            chunks: [key, 'common', 'nav'],
            inlineSource: '.(js|css)$'
        })
    )
}
HtmlPlugin.push(
    new OpenBrowserPlugin({ url: 'http://localhost:'+port })
)
module.exports = (options = {}) => ({
  /*entry: {
    vendor: './src/vendor',
    index: './src/main.js'
  },*/
  entry: entries,
  output: {
    path: resolve(__dirname, 'dist'),
    filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
    chunkFilename: '[id].js?[chunkhash]'
    /*publicPath: options.dev ? '/assets/' : publicPath*/
  },
  module: {
    rules: [{
        test: /\.vue$/,
        use: ['vue-loader']
      },
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/
      },
      {
        test:/\.css$/,
        //注意：这里还需要更改一下
        use:ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      /*{
        test: /\.less$/,
        //下面两行，作用相同，选择自己比较喜欢的样式即可
        loader: 'style-loader!css-loader!less-loader'
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'less-loader'
        ]
      },*/
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract('css-loader!less-loader')
      },
      {
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }]
      }
    ]
  },
  plugins: HtmlPlugin,
  resolve: {
    alias: {
      '~': resolve(__dirname, 'src')
    },
    extensions: ['.js', '.vue', '.json', '.css']
  },
  devServer: {
    host: '127.0.0.1',
    port: port,
    proxy: {
      '/api/': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    historyApiFallback: {
      index: url.parse(options.dev ? '/assets/' : publicPath).pathname
    }
  },
  devtool: options.dev ? '#eval-source-map' : '#source-map'
})

package.json

{
  "name": "chengzan",
  "description": "A webpack project",
  "author": "[email protected]",
  "private": true,
  "scripts": {
    "start": "webpack-dev-server --inline --hot --env.dev",
    "dev": "webpack-dev-server --inline --hot --env.dev",
    "build": "rimraf dist && webpack -p --progress --hide-modules"
  },
  "dependencies": {
    "glob": "^7.1.2",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "open-browser-webpack-plugin": "^0.0.5",
    "vue": "^2.5.16"
  },
  "engines": {
    "node": ">=6"
  },
  "devDependencies": {
    "autoprefixer": "^6.6.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-vue-app": "^1.2.0",
    "css-loader": "^0.27.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^0.10.1",
    "html-webpack-plugin": "^2.24.1",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "postcss-loader": "^1.3.3",
    "rimraf": "^2.5.4",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^3.1.0",
    "webpack-dev-server": "^2.4.2"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}