webpack_01 (init)

安装webpack

?

1 2	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文件，那么会报错；

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

?

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

创建局部的webpack

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

?

1

npm init

第二步：安装局部的webpack

?

1	npm install webpack webpack-cli -D

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

?

1	npx webpack

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

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

Webpack配置文件

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

?

1 2 3 4 5 6 7 8

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

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

?

1 2 3

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