webpack 4+ 学习之管理输出

准备

新增/src/print.js

export default function printMe() {
    console.log('I get called from print.js!');
}

在src/index.js中使用这个函数

src/index.js

import _ from 'lodash';
import printMe from './print.js';

function component() {
    let element = document.createElement('div');
    let btn = document.createElement('button');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;
    element.appendChild(btn);
    return element;
}
document.body.appendChild(component());

更新dist/index.html，为webpack分离入口做好准备

dist/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="/print.bundle.js"></script>
</head>

<body>
    <script src="./app.bundle.js"></script>
</body>

</html>

调整配置，在webpack.config.js中在entry入口处添加src/print.js作为新的起点，然后修改output出口，以便根据入口起点名称动态生成bundle名称

webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js'
        path: path.resolve(__dirname, 'dist')
    }
};

重新构建

npm run build

使用插件

HtmlWebpackPlugin ，解决当我们修改index.js中的入口起点名称或者新增一个名称之后生成的包被重命名在一个构建中，而index.html文件仍然会引用旧名字的问题。

安装

npm install --save-dev html-webpack-plugin

调整webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

clean-webpack-plugin 清理/dist文件夹

安装

npm install clean-webpack-plugin --save-dev

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

重新构建

npm run build

执行之后，/dist文件夹中除了构建后生成的文件不会再有其他文件。

WebpackManifestPlugin 生成一个json文件，来对应本来文件构建之后的文件

npm install --save-dev webpack-manifest-plugin

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        }),
        new ManifestPlugin()
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

重新构建

npm run build

默认在/dist文件夹(publicPath)中生成manifest.json

{
  "app.js": "app.bundle.js",
  "print.js": "print.bundle.js",
  "index.html": "index.html"
}

学习资料

webpack 4+ 学习之管理输出

准备

使用插件

猜你喜欢