《webpack学习》- 入门使用-CFANZ编程社区

《webpack学习》- 入门使用

目录结构如下：

|-- index.html

|-- main.js

|-- show.js

|-- webpack.config.js

index.html

这是部署后打开的入口文件，这里面只有一个标签，和引入的bundle.js。这里的bundle.js是由webpack打包生成的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="./dist/bundle.js"></script>
</body>
</html>

show.js

这里使用ES6导出的方式，定义一个方法，给id为app的标签设置InnerHTML。

export const show = function(content) {
    window.document.getElementById('app').innerHTML = 'Hello,' + content;
}

main.js

该文件引入上面文件定义的方法，并调用。

import { show } from './show';
show('webpack')

webpack.config.js

webpack的配置文件，这里配置了入口和出口。出口里定义了输出的文件名。

const path =  require('path');

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'),
    }
};

执行webpack命令后，会出现一个dist文件夹，打开index.html,界面会出现Hello, webpack。到这里，webpack的基本使用流程就到此结束了。

《webpack学习》- 入门使用_html 文件目录结构