webpack4.0学习记录

时间:2021-11-12 08:33:17

2019/04/28  

1.本质上,webpack基于node  node跟webpack为最新稳定版,才能更好,更快的打包

安装

  1.卸载node  直接在控制面板  卸载  

  2.安装 从官网下载 然后自定义安装在非C盘中 需要配置环境变量 (高级系统配置 -》环境变量 )

   webpack4.0学习记录

  然后保存 就可以 全局 node -v 查看版本了

   (创建一个文件夹 并 遵循 node规范)

  webpack4.0学习记录

  安装 webpack   npm install webpack webpack-cli -g  (全局安装 不推荐 要是安装不成功 手机分享一个wifi) 

  查看版本号 webpack -v     

  全局安装的缺陷  两个项目用的不同webpack

  推荐局部安装 !

    1.卸载全局安装的webpack (npm uninstall webpack webpack-cli -g)

    2.当前文件夹下安装 (npm install webpack webpack-cli -D 等价于 npm install webpack webpack-cli --save-dev )

    3.局部查看webpack版本 npx webpack -v(它会在当前目录moudel下面找webpack)

    4.npm info webpack 查看webpack版本信息  另一个文件夹中安装另外一个版本 例如npm install webpack@4.16.5 webpack-cli -D(npx webpack -v 查看版本)

    5.这就是局部安装的优点

 -------------------------------------------华 丽 分 割 线 -------------------------------------------------------------- 

   2019/04/29

  webpack index.js (全局命令)

  npx webpack index.js(局部)  打包指定的js

  (在没有配置webpack.config.js 的情况下 用的是默认的配置 但是必须指定文件名 不然直接 npx webpack报错 

  后来看文档的时候试了一下 你如果按照默认配置放在src/index.js下  也不会报错 因为这是默认配置)

  index.js 中

  webpack4.0学习记录

  其他js中

  webpack4.0学习记录

  如何自定义编写webpack配置文件?

  1.手动创建 webpack.config.js

  webpack4.0学习记录

  npx webpack(流程: 执行 -》找webpack.config.js  -》打包入口index.js)

   如果 没有手动创建 webpack.config.js,你将指定其他文件名进行打包

  npx webpack --config [name].js 

  2.如何优化打包命令?

    在package.json -》scripts 配置 

    webpack4.0学习记录

    然后 执行 npm run bundel 就相当于 npx webpack

  3.webpack-cli的作用?

    作用是能在命令中使用webpack npx webpack等

 

 -------------------------------------------华 丽 分 割 线 --------------------------------------------------------------