webpack.config.js配置和package.json配置

一、入口和出口

将入口参数和出口参数写到配置文件里,运行时直接读取
创建一个webpack.config.js文件

const path =require('path')
module.exports = {
    //入口:可以是字符串/数组/对象
    entry: './src/main.js',
    //出口:通常是对象,里面至少包含两个重要属性path和filename
    output: {
        path:path.resolve(__dirname,'dist'),//path通常是一个绝对路径
        filename:'bundle.js'
    }
}

path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径
__Dirname:保存的是当前所在文件的路径(前面是两条下划线)
package.json :通过npm init生成的,npm包管理的文件

二、局部安装webpack

1.项目中局部安装webpack3.6.0

npm install webpack@3.6.0 --save-dev

–save-dev是开发时依赖,项目打包后不需要继续使用的(save前面是两个-)

全局安装

npm install webpack@3.6.0 -g

2.通过node_modules/.bin/webpack启动webpack打包
也可在package.json的script中定义自己的执行脚本

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

执行build指令

npm run build
  • package.json的script脚本在执行时,会按照一定的顺序寻找命令对应的位置
    首先,会寻找本地的node_modules/.bin路径中对应的webpack文件
    如没有找到,就会去全局的环境变量中找
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值