webpack优化环境配置 - 23.code split(1)

 

 

1.文件结构

 

 

 

2.代码

index.js

import { mul } from './test';

function sum(...arg) {
  return arg.reduce((p, c) => p + c, 0);
}

// eslint-disable-next-line
console.log(sum(1, 2, 3, 4, 5, 6));

console.log(mul(2, 3));

test.js

export function mul(x, y) {
  return x * y;
}

export function count(x, y) {
  return x - y;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
</head>
<body>
    <h5>hello catch</h5>
</body>
</html>

webpack.config.js

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    //单入口
    // entry: './src/js/index.js',
    //多入口: 有一个入口，最终就有一个 bundle
    entry: {
        index: './src/js/index.js',
        test: './src/js/test.js'
    },
    output: {
        // [name] 文件名
        filename: "js/[name].[contenthash:10].js",
        path: resolve(__dirname, "build")
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        })
    ],
    mode: 'production',
    devtool: 'source-map'
}

 

3.打包

$ webpack

 

posted @ 2022-09-08 18:02  Evengod  阅读(27)  评论(0)    收藏  举报