webPack配置教程（完整启动版）

webpack安装

• 1: 首先安装Node.js, 可以去Node.js官网下载.

• 2: 命令行进入文件夹webpack-demo:cd webpack-demo, 

      npm init (一直回车，知道输入yes); 目录中出现package.json，（如下图）

• 

•  

  3安装webpack     

   npm i -D webpack

• 4 package.json出现webpack，说明安装成功了。node_modules中也出现了webpack文件夹。

•  

  5在根目录创建一个webpack.config.js文件，创建完成后,打开package.json。

• 6在根目录创建dist和src文件夹, 在src目录下创建app.js文件夹，在app.js文件中输入

    console.log("Hello Webpack");

• 7在webpack.config.js添加如下代码

     //当前路径
  const path = require('path');
  module.exports = {
  		//选择的模式告诉webpack使用其内置的优化
  		// "production" | "development" | "none"
  		mode : "development",
  		//入口文件
  		entry: "./src/app.js",
  		//webpakc如何输出的目标路径
  		output: {
  				 // 所有输出文件的目标路径
  				    // 必须是绝对路径（使用 Node.js 的 path 模块）
  				path : path.resolve(__dirname,"dist"),
  				//输出文件的名字
  				filename : 'bundle.js',
  		},
  }

执行命令webpack进行打包即可

 

在执行命令

        打包成功。

        在dist文件目录下出现了bundle.js文件.

        在dist文件夹下创建index.html,引入bundle.js  浏览器打开index.html。

        打开控制台，出现了Hello Webpack。