webpack.config.js和package.json配置

webpack.config.js配置

入口 和出口

如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦。只需要将两个参数写到配置 中，就可以 解决。

const path = require('path')
module.exports = {
    //入口：可以是字符串/数组/对象，这里我们入口只有一个，所有写一个字符串即可
    entry:'./src/main.js',					//打包入口路径
    //出口：通常是一个对象，里面至少包含两个重要属性，path和filename
    output:{								//打包后的文件   注意：path通常是一个绝对路径
        path:path.resolve(__dirname,'dist'),     //__dirname 是node里面的全局路径 path.resolve 是拼接两个地址
        filename:'bundle.js'	            //打包后的文件名称						
    }
}

配置完成后，就可以直接使用webpack打包（webpakc用的是全局的）

webpack

只要是在命令行执行webpack，那执行的就是全局的

局部安装webpack

目前我们使用的webpack是全局的webpack。

为什么要使用局部webpack？

因为一个项目往往依赖特定的webpack版本，全局的版本可能很跟这个项目的webpack版本不一致，导致打包出现问题 。所以通常一个项目，都有自己局部的webpack

安装步骤：

第一步：（项目中安装自己的局部的webpack）

这里我们先局部安装webpack3.6.0，Vue CLI3中已经升级到webpack4，但是它将配置文件隐藏了起来，所有查看起来不是很方便。

npm install webpack@3.6.0 --save-dev

第二步：(通过node_modules/.bin/webpack启动webpack打包)

package.json配置启动

package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。

首先，会寻找本地的node_modules/.bin/路径中对应的命令。

如果没有找到，会去全局的环境变量中寻找。

1.先初始化项目

 npm init

2.设置scripts

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"                        //添加这一行    
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {       	//开发时依赖
    "webpack": "^3.6.0"       
  }
}

3.启动局部webpack打包：（如果局部没有，会去全局里面找）

npm run build