webpack的安装和基础配置

最近在学vue，因为vuecli（vue的脚手架）是基于webpack进行搭建的，涉及到webpack的安装和基础配置，记录一下学习的内容

一、webpack 的安装

1. webpack是用npm进行安装的，所以先检查下自己是否已安装node；打开cmd输入node–version以及npm --version 若没有则需要在自己电脑先安装node
2. 在检查自己电脑已安装node好时，打开cmd 输入命令：npm install webpack webpack-cli -g 进行全局安装，因为webpack在执行打包时是依赖我们的webpack-cli的，而webpack-cli代码执行时才是真正利用webpack进行编译和打包的过程，所以我们这里同时安装了webpack-cli，完成以上步骤webpack就已经安装完成了。

二、生成package.json 文件以及配置webapck的基础数据

3. 进入到项目的根目录输入命令：npm init 就可以生成package.json文件

4. webpack打包时默认的入口文件是src下的index.js文件，所以在你没有配置入口文件这些的时候输入webpack进行打包并不会报错。但是你想把入口文件设置成其他文件的时候，你可以在项目的根目录下创建webpack.config.js配置文件进行配置 如下图：
   

5. 配置完成后，在package.json文件的“scripts”中配置

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

配置完成后打开终端输入：npm run build 就可以进行打包了

当项目和全局安装的webpack和webpack-cli的版本不同时，可以在项目目录下安装局部webpack ，前提是要生成package.json文件（npm install web pack web pack-cli -D）,当安装好想使用局部的webpack时，输入命令 ./node_module/.bin/webpack或者命令npx webpack（npx 命令时优先使用本地）或者 在package.json 文件中的 scripts 属性中加入 “build”：“webpack”，当执行脚本命令会自动在局部的module中找到文件