基于webpack开发环境搭建，以及常用JS配置模块使用

1，webpack开发环境搭建，以及常用的JS配置模块

 官网: https://webpack.docschina.org/

a、用法：作用以及用法

  webpack是一个平台，可以进行项目运行和项目打包的一个功能

  它提供了一些生命周期，外部框架可以根据生命周期来实现自己的loader：vue的编译器是什么？vue-loader

b、做项目时必须依赖

   webpack依赖：webpack-cli脚手架、webpack核心库、webpack-dev-server开发服务器

  项目依赖：框架依赖（vue-loader、react-loader）、html依赖、less/scss依赖、图片依赖

c、安装依赖

    webpack 5.x 和 4.x 的一个主要提升是摇树机制：

     对A文件进行打包，A文件对B文件进行了引入，如果A文件没有用到B文件中的某些方法，这个时候，打包的时候，不应该把方法打包到A文件，所以需要对A文件引用进行优化 - - 优化过程称为摇树机制

  使用4.x 版本

  cnpm i -D webpack-cli@3 webpack@4 webpack-dev-server@3

d、实现一个开放项目

  配置项目开发启动命令：npm start

  开发文件确定要有src文件夹 和index.js文件 ->没有则就新建文件   否则会报错  未找到 ‘./src’文件模块

    2.如果要设置主要文件为main.js入口文件

    就需要对devServer进行配置，在vue脚手架中使用的是vue.config,js来配置，

   在webpack中使用什么？webpack.config.js

     1.配置开发端口

     2.配置是否打开浏览器

  e.实现页面配置

      安装一个html插件：cnpm i -D html-webpack-plugin@4

  f.实现js入口文件配置

  g.实现样式配置及提取

     安装less-loader : cnpm i -D less less-loader@7

    还需要安装：cnpm i -D css-loader@3 style-loader@1

  h、实现打包功能

 

二、面试题

  你在项目中都怎么使用了webpack? 你对webpack有哪些了解？

   在项目中都是使用的脚手架，在vue中使用vue.config.js来进行webpack配置，使用publicPath -- 手机应用打包的时候修改公共路径，

  devServer进行配置，对请求代理进行配置，还可以通过pages配置实现MPA应用

   在后来的时候，看webpack 5的官方文档的时候，了解到一个队webpack 4 的打包摇钱机制优化的理论