webpack学习_npm install webpack -g为什么安装成功了,但是看不到文件夹(1)

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

文章目录

• 一、认识webpack
• 二、webpack安装
• 三、webpack的基本使用
• • 1. js模块化
    • 2. css模块化
    • 3. 处理less文件
    • 4. 处理图片文件
    • 5. ES6语法处理
• 四、webpack中配置Vue
• • 1. 引入vue.js
    • 2. el和template的区别
    • 3. 处理.vue文件
• 五、plugin使用
• • 1. loader和plugin的区别：
    • 2. plugin的使用
    • 3. 添加版权的plugin
    • 4. 打包html的plugin
    • 5. js压缩的plugin
• 六、搭建本地服务器
• 七、webpack.config.js的分离

一、认识webpack

webpack和node、npm的关系

二、webpack安装

要先安装node
全局安装webpack：npm install webpack@3.6.0 -g
局部安装（之后再用）：npm install webpack@3.6.0 --save-dev
为什么全局安装之后，还需要局部安装呢？

• 在终端直接执行webpack命令，使用的是全局安装的webpack
• 在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

三、webpack的基本使用

1. js模块化

使用命令：webpack ./src/main.js ./dist/bundle.js进行打包
注意：如果在webpack.config.js中定义了入口出口，就可以直接使用webpack命令执行上述功能

并在index.html中引入bundle.js文件即可。

注意
在终端输入的webpack都是使用的是全局安装的webpack，但是在项目开发中，我们需要在本地下载一个webpack，方便项目的进行，多人开发时也不依赖错误的webpack版本，因此一般使用本地的webpack。
安装：

• npm init：使用node前最好要先有一个package.json文件记录依赖
• npm install webpack@3.6.0 --save-dev：安装本地webpack依赖，–save-dev表示开发依赖，放在devDependencies中
• 这时候，在scripts中写命令简写可以方便我们运行，例如可以使用npm run builld 来代替webpack命令。这样做还有一个好处，就是当我们执行npm run build 时，优先执行本地安装的webpack，而不是全局的，避免打包时因为依赖发生错误
  

2. css模块化

需求：对css进行模块化，在index.html文件中不引入css文件，只有main.js一个入口时，在main.js文件中先引入css文件，然后下载相应loader，然后在webpack.config.js的modules下配置loader

配合文档查询使用：webpack中文文档

步骤：

• 引入css
  
• 下载loader
  npm install --save-dev css-loader@2.0.2
npm install --save-dev style-loader@0.23.1
• 配置loader
  
• 运行：npm run build
  此时，打开index.html文件可以看到normal.css中编写的样式生效了

3. 处理less文件

步骤：

• 引入less
  
• 下载loader
  npm install --save-dev less-loader@4.1.0 less
• 配置loader
  
• 运行：npm run build
  此时，打开index.html文件可以看到special.less中编写的样式生效了
  反正我是报错了，可能与版本有关，之后有机会再解决这个问题

4. 处理图片文件

步骤：

• 引入图片文件
  
• 下载loader
  npm install --save-dev url-loader
• 配置loader
  从官方文档复制就好
  
  8kb的limit是8192
  当加载的图片小于limit时，会将图片编译成base64字符串形式，原图片是不会打包进dist里面的。
  当图片大于limit时，需要使用file-loader模块进行加载：npm install --save-dev file-loader
  这时候图片会被打包进dist里面，要注意修改文件路径，还要注意对图片的命名
  
  
• 运行：npm run build

5. ES6语法处理

将es6语法转成es5，需要babel-loader，使用步骤同前（还要babel-core babel-preset-env）

• 下载：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
• 配置：
  
• 运行：npm run build，bundle.js中都是es5语法

四、webpack中配置Vue

1. 引入vue.js

安装vue的三种方式：

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

c81891.png)

前端面试题汇总