webpack_01 (init)

安装webpack

npm install webpack webpack-cli –g # 全局安装
npm install webpack webpack-cli –D # 局部安装

Webpack的默认打包

在目录下直接执行 webpack 命令，生成一个dist文件夹，里面存放一个main.js的文件，就是我们打包之后的文件
当我们运行webpack时，webpack会查找当前目录下的 src/index.js作为入口；如果当前项目中没有存在src/index.js文件，那么会报错；

可以通过配置来指定入口和出口

npx webpack --entry ./src/main.js --output-path ./build

创建局部的webpack

第一步：创建package.json文件，用于管理项目的信息、库依赖等

npm init

第二步：安装局部的webpack

npm install webpack webpack-cli -D

第三步：使用局部的webpack（默认会寻找 node_modules\.bin\webpack ）

npx webpack

第四步：在package.json中创建scripts脚本，执行脚本npm run build 打包即可

"scripts": {
    "build": "webpack"
  }

Webpack配置文件

根目录下创建一个webpack.config.js文件，执行脚本npm run build 打包即可

const path = require('path');
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "bundle.js"
  }
}

可以通过 --config 来指定对应的配置文件

"scripts": {
    "build": "webpack --config wk.config.js"
  }