webpack简单总结

目录

webpack简单创建工程目录步骤

配置文件

插件

---

webpack简单创建工程目录步骤

1、创建目录test； 
2、初始化目录test：npm init -y。 
3、全局安装webpack-cli —— npm install -g webpack-cli。 
4、全局安装webpack —— npm install -g webpack。 
5、使用webpack –mode development/production命令进行打包（默认入口是./src/index.js，默认出口是./dist/main.js，可以在webpack.config.js配置文件中改）

---

配置文件

module.exports = {
    entry: "./src/index.js", //指定入口文件
    output: {
        filename: "bundle.js",//指定出口文件
        path: path.join(__dirname, "dist")
    }
}

配置多对多文件：

module.exports = {
    entry: {
        index: "./src/index.js",
        test: "./src/test.js"
    },
    output: {
        filename: "[name].bundle.js",//此处的name指的是entry中的key，结果是生成index.bundle.js和test.bundle.js
        path: path.join(__dirname, "dist")
    }
}

---

插件

html-webpack-plugin

先下载插件并引用。

module.exports = {
    entry: {
        index: "./src/index.js"
    },
    output: {
        filename: "[name].bundle.js",
        path: path.join(__dirname, "dist")
    },
    plugins:[
    	new HtmlWebpackPlugin({ 
            template: './src/index.html'
        })
    ]
}