【webpack4.0】---webpack的基本使用(一)

 

1、初识webpack

    

一、什么是webpack?

    WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用

 

二、webpack工做的方式

    把你的项目当作一个总体，经过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的全部依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件

 

三、做用

    模块化：让咱们能够把复杂的程序细化为小的文件;

    打包：能够把多个Javascript文件打包成一个文件，减小服务器压力和下载带宽。

    转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。

    优化：前端变的愈来愈复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化

    和提高性能的责任。

 

2、webpack与gulp、Grunt的区别

 

    webpack和另外两个并无太多的可比性，Gulp/Grunt是一种可以优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优势使得Webpack在不少场景下能够替代Gulp/Grunt类的工具

 

3、webpack的打包流程

 

    webpack是创建在module之上进行打包的

 

4、webpack基本配置

 

 

 

5、webpack4.0的安装

    

    一、全局安装

cnpm install webpack webpack-cli -g

 

注意：不建议全局安装。

 

    二、局部安装

npm init //初始化项目​cnpm install webpack webpack-cli -D // -D等价于--save-dev

    

    三、webpack-cli的做用

        可让咱们在命令行中正确的使用webpack  以及npx webpack 等命令 若是不安            装则没法使用

 

    四、文件编译

npx webpack index.js

    

    五、npx

    npx :会帮助咱们在当前目录下面的node_modules包中找到webpack进行使用

    

npx webpack -v //查看webpack版本号​npx info webpack //查看webpack以往的一些版本号​npx webpack <文件名称> //文件编译

 

6、预热：文件编译

 

    一、webpack默认是基于webpack.config.js进行打包的，若是须要指定其余文件名称

         进行打包能够按照以下这样书写

npx webpack --config <文件名称>

    

    二、npm scripts

       若是在npm scripts中使用webpack的状况下会优先在工程目录下面的                               node_modules中找相关的依赖

 

        若是咱们的编译命令过于复杂那么咱们能够在package.json中的scripts中进行简化

        配置

 

{ "name": "myapp", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }}

 

        运行命令的时候只须要npm run <命令名称便可>

 

    三、webpack打包环境

module.exports = { mode:"production" //生产环境 model:"development"//开发环境}

 

    

    四、预热打包配置

        一、npm init -y 生成一个node包

        二、局部安装webpack

        三、创建webpack.config.js

        四、配置webpack.config文件

output:{ //占位符 知足线上地址的需求 publicPath:'html://cdn.com/'}

 

7、什么是开发环境、测试环境、生产环境

    一、开发环境：项目尚且在编码阶段，咱们的代码通常在开发环境中 不会在生产环

     境中，生产环境组成：操做系统 ，web服务器 ，语言环境。  php 。 数据库 等等

 

    2：测试环境：项目完成测试，修改bug阶段

 

    3：生产环境：项目数据前端后台已经跑通，部署在阿里云上以后，有客户使用，

    访问，就是网站正式运行了。

 

三个环境也能够说是系统开发的三个阶段：开发->测试->上线

 

    4：--save && --save-dev的区别

      可分别将依赖（插件）记录到package.json中的dependencies和                                  devDependencies    下面。

 

    dependencies下记录的是项目在运行时必须依赖的插件，常见的例如react jquery         等即及时项目打包好了、上线了，这些也是须要用的，不然程序没法正常执行

 

    devDependencies下记录的是项目在开发过程当中使用的插件，一旦项目打包发布、          上线了以后，devDependencies中安装的东西就都没有用了

​

    若是模块是在开发环境中使用，那么咱们安装依赖的时候须要--dev

 

飞机票：https://mp.weixin.qq.com/s/g6tUSLy0f40pmFnfO3QykA