webpack配置

前端自动化构建工具

开始入门

开始前：初始化,生成package.json文件

npm  init  -y

在目录下新建一个文件夹叫src目录（可自己取）
在src目录下新建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>webpack</title>
</head>
<body>
    <div id="app"></div>
    <script src="./dist/bundle.js"></script>
</body>
</html>

在src目录下新建index.js文件

const sum = (a, b) => a + b;
const s = sum(10, 20);

var p = document.createElement("p");
p.textContent = `求和是 ${s}`;
var app = document.getElementById("app");

app.appendChild(p);

在根目录下建立并配置webpack.config.js文件

var path = require('path');

module.exports = {
    //文件入口
    entry: './src/index.js',
    //文件出口
    output: {
        path: path.join(__dirname, 'dist'), //打包后的路径
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                //打包除这个文件之外的文件
                exclude: path.resolve(__dirname, "node_modules"),
                //打包包括的文件
                include: path.resolve(__dirname, "src"),
                options: {
                    'presets': ['@babel/preset-env']
                }
            }
        ]
    }
}

本地安装依赖包

npm i "@babel/preset-env"  "@babel/core"  babel-loader webpack webpack-cli -S

在package.json配置命令
webpack配置

执行命令

npm run dev

附上目录结构
webpack配置
一个webpack打包就完成啦

前端自动化构建工具

开始入门

相关推荐