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

Posted SlightFly

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2.1.4 用webpack开始一次打包-源码相关的知识,希望对你有一定的参考价值。

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 <panfree23@gmail.com>",
  "license": "MIT",
  "scripts": {
    "build": "webpack", //名字可以随意起 ,属性值为webpack
  }
}

 

以上是关于2.1.4 用webpack开始一次打包-源码的主要内容,如果未能解决你的问题,请参考以下文章

webpack 启动代码源码解读

如何解决webpack打包后,dist文件过大的问题

如何解决webpack打包后,dist文件过大的问题

记一次webpack打包的问题

Webpack打包流程细节源码解析(P2)

记一次webpack4+react+antd项目优化打包文件体积的过程