初见webpack

初见webpack
webpack

什么是webpack
- 官方解释
  
  At its core,webpack is a static module bundler for modern javaScript applications
  - 从本质上来讲，webpack是一个现代的JavaScript的静态模块打包工具
- 何谓模块？
  - 现在大多数前端模块化的方案：AMD、CMD、CommonJS、ES6，在ES6之前我们要想进行模块化开发，必须借助于其他工具，让我们进行模块化开发，并且在模块化开发完成了项目后，需要处理模块间的各种依赖，并且进行整合打包。
  - 而webpack就是可以帮我们处理模块间的依赖关系，并且还可以将CSS、图片、json文件等等在webpack当作模块来使用
- 何谓打包？
  - 就是将各种模块进行打包整合并成一个或多个包，还可以对资源进行处理，比如：压缩图片、将scss转成css、将ES6语法转成ES5语法等
- webpack与grunt/gulp有什么区别
  - 如果仅仅只是打包整合，grun/gulp更适合，更适合前端流程自动化，对于模块化并非它的核心。
  - webpack更强调模块化开发，同时也会对资源进行打包整合
webpack的安装
- 安装webpack 需要先安装node.js,Node.js自带了软件包管理器（npm）。-- 由于NPM下载包需要越墙下载，不使用国内的源会很慢，这里建议换好国内的源再使用Npm
- 全局安装webpack：npm install webpack -g
webpack的使用
- 准备工作-文件夹的解析
  - dist文件夹：用于存放打包后的文件
  - src文件夹：用于存放我们写的源文件
    
    main.js：项目入口的文件，模块化入口
  - index.html：浏览器打开展示的首页
  - package.json：通过npm init生成的，npm包管理的文件
- js文件的打包
  - 没有打包工具之前，我们通常是在index.html引入js文件，这种方法会很麻烦且因为引入顺序的关系，一些代码无法识别。
  - 所以我们只需要通过将main.js打包成一个文件，这样的话引入时就会方便很多。
  - webpack打包指令
    
    webpack src/main.js dist/bundle.js
webpack的配置
- 我们通常情况下不会直接使用webpack原生的打包指令，会显得麻烦，且直接指定位置会很不方便。
  - 我们可以新建一个webpack.config.js文件来写上需要打包的文件和打包好的文件-即入口和出口
```
//因为path需要绝对路径，所以我们需要这个包来动态获取路径
//在导入这个包前需要 npm init，init完成后会出现package.json
const path = require('path')

module.exports = {
  //入口：可以是字符串、数组、对象，这里入口只有一个，所以写作字符串
  entry: './src/main.js',
  output: {
  //出口：通常是一个对象，里面有两个重要属性：path和filename
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
}
```
- 大部分项目都会有一个本地安装的webpack来进行运行项目，那么怎样使用本地的webpack而不是全局的webpack呢？
  1. 如果项目中没有本地webpack则需要安装
  - 在项目文件夹下运行命令
```
npm install webpack@版本号 --save-dev
```
  1. 之后就需要更改package.json中的scripts来修改build的运行命令："webpack"
  2. 此时运行npm run build就可以执行本地的webpack
- webpack loader的使用
  - 通常情况下，webpack对一些我们需要打包的css、图片、ES6转ES5等打包文件是不支持，所以我们需要Lader来进行配置
    
    查看webpack官网对应Loader使用方法，进行配置
    
    通过npm来下载对应loader
    
    在webpack.config.js的modules关键字来进行配置
    
    注意：modules中对loader的加载是从右往左加载，所以对应需要先加载的要放右边。
    
    然后在入口处把对应的文件引入即可。
  - 图片loader使用注意：
    
    在图片loader的使用中，有两种方式：
    
    url-loader：一种是够小（webpack.config.js中对应options中limit大小以下）的图片直接以base64的方式发送到网页上。
    
    file-loader:大于url-loader我们就需要直接将图片打包上传，但在打包中图片会返回原有的路径经行储存
    
    所以我们需要在output下的publicPath:'指定一个文件夹'
    
    还需要在对应option下对name:'img/指定文件名'放在该位置下并且重命名
    
    [指定文件名]中变量写法：
    
    name:获取图片原来的名字，放在该位置
    
    hash:8：为了防止图片名称冲突，依然使用hash，但我们只保留8位
    
    ext：使用图片原来的扩展名
- webpack配置Vue
  1. 使用Vue.js必须引入Vue.js。
```
npm install vue --save
```
  1. 经过上一步仍然不能完成，因为Vue构建的版本不同，默认运行的是runtime-only 的Vue这个版本不能运行template.所以修改
    webpack.config.js 中
```
resolve: {
// alias: 别名
alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
}
```
  1. 最后一步依然需要引入loader使webpack可以打包Vue文件
```
npm install vue-loader vue-template-compiler --save-dev
//并配置
{
  test: /.vue$/,
  use: ['vue-loader']
}
```
- webpack配置plugin
  - plugin 主要是对现有架构进行的扩展
  - 使用步骤：
    
    通过npm安装所需要使用的plugins
    
    在webpack.config.js中的plugins配置插件
```
plugins: [
    //配置打包 html 的 htmlwebpackPlugin
    new HtmlWebpackPlugin({
      //以现有的文件为模板来打包
      template: 'index.html'
    }),
    new UglifyjsWebpackPlugin()
],
```
- 利用webpack 搭建本地服务器
  1. 安装服务器模块
```
所下载的服务器模块版本需要对应webpack的版本
npm install webpack-dev-server --save-dev
```
  1. 修改webpack.config.js中文件配置
```
devServer: {
//为哪个文件夹提供本地服务，默认为根文件夹
contentBase: './dist',
//是否为实时刷新
inline: true
}
```
  1. 如果直接使用原生命令会全局寻找，所以我们继续配置package.json
```
"dev": "webpack-dev-server --open"
```
```
npm run dev
```
相关阅读:
saltstack（master迁移）
saltstack（主机改名）
saltstack-部署
 redis部署
 lvs+keepalived
android适应屏幕
 Android 网络编程
 使用pdb调试python
python zookeeper 学习笔记
 Python 守护进程
原文地址：https://www.cnblogs.com/chuncode/p/12984779.html

webpack

什么是webpack

webpack的安装

webpack的使用

webpack的配置