webpack学习

webpack学习

一、认识webpack

webpack和node、npm的关系

二、webpack安装

要先安装node
全局安装webpack：npm install [email protected] -g
局部安装（之后再用）：npm install [email protected] --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 [email protected] --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 [email protected]
npm install --save-dev [email protected]

• 配置loader
  

• 运行：npm run build
  此时，打开index.html文件可以看到normal.css中编写的样式生效了

3. 处理less文件

步骤：

• 引入less
  

• 下载loader
  npm install --save-dev [email protected] 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的三种方式：

1. 直接下载应用
2. CDN引入
3. npm安装，这里要讲的
   步骤：

• 下载Vue：npm install vue --save，运行时依赖
• 引入Vue：import Vue from 'vue'，它会在node-modules中查找的，然后就可以正常使用
• 打包：npm run build，这时会报错说是runtime-only版本不能使用template，解决：
  
  默认使用vue.runtime.js，现在指定vue.esm.js，使用runtime-compiler版本

注意：Vue有两种版本：
runtime-only：代码中不可以使用template
runtime-compiler：可以有template，因为有compiler可以用于编译template

2. el和template的区别

使用template之后会在编译时把原来的

替换成template当中的内容，而template当中的写法又可以再抽成一个组件单独写（抽到另一个.vue文件中）

3. 处理.vue文件

组织一个组件，使用.vue文件封装，在里面可以直接写结构样式数据等。一个.vue也可以引用另外的组件，通过import Cpn from './Cpn.vue'

下载：npm install --save-dev vue-loader vue-template-compiler
注意这里vue-loader版本大于13可能会要插件plugin
配置：

五、plugin使用

1. loader和plugin的区别：

• loader主要用于转换某些类型的模块，他是一个转换器
• plugin是插件，它是对webpack本身的扩展，是一个扩展器

2. plugin的使用

• 通过npm安装需要使用的plugins（某些webpack已经内置的插件不需要安装）
• 在webpack.config.js中的plugins中配置插件

3. 添加版权的plugin

这是内置的插件，只需要引入webpack就可以

4. 打包html的plugin

5. js压缩的plugin

**注意：**开发阶段不需要进行js的压缩（丑化），在发布时才需要

六、搭建本地服务器

执行时输入：webpack-dev-server，可以在脚本中设置简写方式："dev": "webpack-dev-server"，然后通过npm run dev来运行

注意：这个只需要在开发阶段进行配置，发布时是不需要的

七、webpack.config.js的分离

对于webpack.config.js，我们可以把开发依赖和发布（生产）依赖分离开来，首先把所有公共依赖抽离到base.config.js中，然后单独的开发依赖放入dev.config.js中，单独的生产依赖放入prod.config.js中，然后再合并。
要下载：npm install webpack-merge --save -dev，然后merge


然后在package.json中重新配置