webpack 使用说明（一）

# 多页面定义

## webpack.conf.js

{
    entry: {
        a: './src/js/a.js',
        b: './src/js/b.js'
    },
    output: {
        filename: '[name].js?[hash]',
        path: resolve(__dirname, './dist/assets/')
    },
    plugins: [
        new HtmlWebpackPlugin({
            chunks: ['a', 'b'],
            filename: '../a.html',
            template: './src/pages/a.html'
        }),
        new HtmlWebpackPlugin({
            chunks: ['b'],
            filename: '../b.html',
            template: './src/pages/b.html'
        }),
        new HtmlWebpackPlugin({
            chunks: [],
            filename: '../c.html',
            template: './src/pages/c.html'
        })
    ]
}

## 说明

• entry.a 是a页面特有js代码
• entry.b 是b页面特有js代码
• output.path 是“npm run build”时，输出文件到指定目录，因为webpack主要是编译js、css文件，所以定义编辑后文件输入到 dist/assign/ 目录

• HtmlWebpackPlugin 表示单独一个页面

• HtmlWebpackPlugin.chunks 是整合页面需要用到js代码，比如

  • chunks: ['a', 'b'] 表示页面需要用到js代码a 和 js代码b

  • chunks: ['b'] 表示页面只需要用到js代码b

  • chunks: ['] 表示页面不需要用js代码

  • 指定HtmlWebpackPlugin.chunks后，运行时或编译后，js代码会被自动引入到页面

• HtmlWebpackPlugin.filename 表示编译后文件输出到目录未知，是相对应“output.path”目录，所以定义页面输出时使用“../xxx.html”，表示输出到“./dist”目录。至此，js、css等资源文件输出到了“./dist/assign”目录，html页面输入到了“./dist”目录

• HtmlWebpackPlugin.template 表示编译生产的文件来来源模版文件