webpack学习笔记

webpack学习笔记

定义

模块打包工具

模块引入规范

CommonJS

AMD

CMD

全局安装和局部安装

全局安装

//不推荐，要是不同项目的webpack版本不同，就会造成项目无法运行

npm install webpack -g

局部安装

webpack-cli使webpack能在命令行里运行

npm install webpack webpack-cli -D //在当前目录下安装
npx webpack -v //npx 可以使用webpack命令，并且是在当前项目的webpack

安装指定版本

npm install webpack@版本号

初步构建

请看wbepack-demo1

index文件引入其他文件后

npx webpack index.js//就可以打包index文件

然后将打包好的main.js文件引入html中，就正常访问了

配置

在无配置项的时候打包

npx webpack index.js//告诉webpack哪个是入口文件

自己配置

配置文件

webpack.config.js

const path = require("path")
module.exports = {
    entry:"./index.js",
    output:{
        filename :" bundle.js",
        path:path.resolve(__dirname,"bundle")
    }
}

npx webpack //就可以直接找到要打包的文件

修改默认配置名

npx webpack --config (文件名)