webpack 多页面模式配置

2018年1月3日
因为工作安排，最近在搞前端
目录结构
package.json
 
{
  "name": "multientry",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --colors"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^0.1.17",
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.10.0"
  }
}
 
webpack.config.js
 
var path = require("path");
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = function () {
    let set = {
        entry: {
            a: './src/script/a.jsx',
            b: './src/script/b.jsx',
            c: './src/script/c.jsx',
            vendor: ['react', 'react-dom']
        },
        output: {
            path: path.resolve(__dirname, 'dist'),//输出的文件路径
            filename: 'js/[name]-[chunkhash].js'//输出的js文件名
        },
        resolve: {
            extensions: ['.jsx', '.js', '.es6', 'json']
        },
        module: {
            rules: [
                {
                    test: /\.jsx$/,
                    use: 'babel-loader',
                    include: path.resolve(__dirname, 'src/script')
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin(['dist']),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor'
            })
        ]
    }

    Object.keys(set.entry).forEach(v => {
        if (v !== 'main' && v !== 'index' && v !== 'vendor') {
            set.plugins.push(
                new HtmlWebpackPlugin({
                    filename: v + '.html',//输出的html路径
                    template: 'index.html', //html模板路径
                    //inject : 'head',  // js 文件在 head 中，若为 body 或者 true 则在 body 中
                    inject: true,
                    title: 'this is ' + v + '.html',
                    chunks: ['vendor', v] // 要加入公共文件的引用，否则会报错
                })
            )
        }
    })

    
    return set;
}

 

 
.bablerc
  
{
  "plugins": [
    "transform-react-jsx"
  ],
  "presets": [
    "es2015"
  ]
}
 
index.html
 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>
        <%= htmlWebpackPlugin.options.title%>
    </title>

</head>

<body>
    <div id="app"></div>
</body>

</html>
 
a.jsx
 
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('app')
);

 

 
posted @ 2018-01-03 17:28  流殇微  阅读(268)  评论(0)  编辑  收藏  举报