webpack ----- 第一章

淩亂°似流年 2021-12-15 12:25 312阅读 0赞

废话不多说，直接走实战！！！

1、桌面新建一个文件夹：webpack\_test

2、在webpack\_test文件夹下面新建一个文件夹demo01

3、然后又在demo01文件夹下面建立两个js文件main.js和index.js文件

4、在index.js中写一个函数并导出

//声明一个函数并用export导出
    export function add(a, b) {
        console.log (a + b);
    }

5、在main.js中导入index.js中的函数，并调用

import {add} from './index.js'
    add(3, 5);
    add(78, 100);

6、再在根目录webpack\_test下创建一个文件index.html

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>我学习webpack</title>
    </head>
    <body>
    </body>
    </html>

7、然后在根目录webpack\_test下新建一个webpack.config.js的文件，并写配置规则

const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    config = {
        entry: {
                main:'./demo01/main.js'
        },
        output: {
            path: path.resolve(__dirname, 'dist')   //指定出口文件的路径
            filename: '[name].js'   //这是一个上面背景颜色一样的 Chunk name，也可以指定出口路径如规定 './[name].js'出口就会在js这个文件夹下
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader'
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                 filename: 'index_webpack.html',
                 template: 'index.html'
            })
        ]
    }
    module.exports = config

8、在终端安装各种包

npm init 初始化一下  
cnpm install webpack --save-dev 下载webpack模块  
cnpm install babel-loader 这个包允许使用 Babel 和 Webpack 转换JavaScript文件  
cnpm install babel-core 解释js的文件

*html-webpack-plugin 下载所需要的插件*

9、然后使用webpack编译一下即可,打开的时候去dis目录下打开index\_webpack.html

转载于:https://www.cnblogs.com/tenro/p/7745113.html