webpack实战——多页面打包配置(八)

在src目录下新建list.js
src/index.js

import React, {Component} from 'react'
import ReactDom from 'react-dom'


class App extends Component{
    render() {
        return (
            <div>
                <div>this is home page </div>
            </div>
        )
        
    }
}

ReactDom.render(<App />, document.getElementById('root'))

src/list.js

import React, {Component} from 'react'
import ReactDom from 'react-dom'


class App extends Component{
    render() {
        return (
            <div>
                <div>this is list page </div>
            </div>
        )
        
    }
}

ReactDom.render(<App />, document.getElementById('root'))

webpack.config.js

module.exports = {
	//...
    entry: {
        main: './src/index.js',
        list: './src/list.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist') //生成绝对路径
    },
}

运行npm run build:dll, 再运行npm run bundle
打开index.html文件:

我们希望一个index.html对对应一个js文件,不要在一个index.html文件里引入两个js文件,需要继续修改webpack.config.js:

运行npm run bundle,此时生成的dist目录:

还可以配置chunk配置项
webpack.config.js

//...
const plugins = [
    new HtmlWebpackPlugin({
        template: 'src/index.html',
        filename: 'index.html' ,
        chunks: ['vendors', 'main'] //要在html文件中引入什么js文件
    }), 
    new HtmlWebpackPlugin({
        template: 'src/index.html',
        filename: 'list.html',
        chunks: ['vendors', 'list'] 
    }), 
    new CleanWebpackPlugin(),  
    new webpack.HotModuleReplacementPlugin(), 
]
//...