2.1.4 用webpack开始一次打包-源码

Posted 2021-03-11 SlightFly

1、命令行直接打包，不使用配置文件  webpack-cli --entry ./app.js --output bundle.js  项目下生个bundle.js文件（依赖等都被打包进来）

2、利用配置文件打包，命令行 -- webpack      webpack.config.js(默认配置文件名，如果为告诉webpack配置文件名，webpack会自动查找改文件名 )   

　　1）直接以当前目录下webpack.config.js的文件作为配置文件进行打包

　　2）指定了一个文件作为配置文件打包，则 webpack --config configfile 

3、局部webpack与全局webpack　　

　　1）全局webpack  通过npm install webpack -g安装， -g指令就是在npm全局目录下安装包

作用：
    全局webpack是必须要安装的，我们在命令行直接执行webbpack指令时，使用的就是全局的webpack去完成的

安装：
    通过npm install webpack -g安装， -g指令就是在npm全局目录下安装包

 

　　2）局部webpack  在当前项目文件夹下安装的webpack，即安装在项目文件夹里的node_modules里

作用：
    全局的webpack有且只有一个，但是实际中，不同项目的webpack版本可能完全不同，当我们项目需求的webpack版本呢和我们全局的webpack不一致时，就需要安装局部的

安装：
    进入到项目的文件夹下  npm install webpack@3.10.0 --sava

4、利用局部的webpack打包

　　局部安装  -->  配置package.json文件  -->  命令行运维package.json定义的命令

　　配置package.json文件 ，在scripts属性值设置，默认先使用项目中配置的webpack版本，没有配置会去全局找

//打包命令  npm run build
{
  "name": "vue-element-admin",
  "version": "4.2.1",
  "description": "设置打包命令为 npm run build",
  "author": "Pan <[e-mail]>",
  "license": "MIT",
  "scripts": {
    "build": "webpack", //名字可以随意起 ，属性值为webpack
  }
}