前端模块化打包工具
webpack 可以处理模块之间的依赖关系，并进行打包处理
除了js文件，css、图片、json文件等都可以被当作模块来使用
打包就是将webpack中的各种资源块进行打包合并成一个或多个包(Bundle)，过程中，对资源进行处理 如压缩、语法转换
gulp和webpack的区别

  • gulp更加强调的是前端流程的自动化，模块化不是它的核心
  • webpack更加强调模块化开发管理，文件压缩合并、预处理等 都是它附加的功能。

webpack依赖node环境

按照老师的安装的是3.6.0版本的webpack

打包过程

  1. install webpack
    1. npm install webpack@3.6.0 --save-dev
  2. 在项目中建立文件夹和文件

|——————————————-
|————dist
|————src
|——main.js
|——mathUtils.js
|——index.html

  1. mathUtils.js ```javascript function add(num1, num2) { return num1+num2; } function mul(num1, num2){ return num1*num2; } // CommonJS的形式 module.exports = { add, mul };

// ES6语法 export const name = ‘nakamura’;

  2. 4. main.js
  3. ```javascript
  4. // CommonJS的形式
  5. const {add, mul} = require('./mathUtils')
  7. console.log(add(23, 34)); 
  8. console.log(mul(43, 2)); 
  10. // ES6语法
  11. import {name} from './mathUtils';
  12. console.log(name);

  1. index.js

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. <title>Document</title>
    8. </head>
    9. <body>
    10. <h2>index.html</h2>
    12. <script src="./dist/bundle.js"></script>
    13. </body>
    14. </html>

  2. 在终端输入指令webpack ./src/main.js ./dist/bundle.js ，执行打包

  3. 运行程序，报错。好像不能混着写，单独写某一种导入导出语法都是可以的

配置webpack的入口和出口文件

  • 在项目根目录新建一个文件 webpack.config.js
  • 键入内容 ```javascript const path = require(“path”);

module.exports = { entry: ‘./src/main.js’, output: { path: path.join(__dirname, ‘dist’), filename: ‘bundle.js’ } }

  2. - 再打包时，就可以直接用`webpack`指令，省去后面的两个出入口文件
  4. **指令映射**
  6. - 在项目的`package.json`文件中的`scripts`一项里面，加入`"build": "webpack"`
  7. - 之后再打包时，就可以通过执行`npm run build`，即 npm run 键名
  9. 在终端使用原始指令，都会首先找全局的包<br />通过package.json添加指令映射，执行指令时，首先查找的是局部环境下的包，最好在项目中要使用的包都安装在局部环境下，并指定需要的版本
  11. - 在安装时的指令后面加上`--save-dev`，就把安装的包放在package.json的`devDependencies` （开发时依赖的包）。
  14. <a name="PiqDb"></a>
  15. # 样式打包
  17. 1. css-loader，解析CSS文件后，加载，返回CSS代码
  18.    1. 按照不报错的版本 `npm install css-loader@0.28.11 --save-dev`
  19. 2. style-loader，将模块的导出作为样式添加到DOM中
  20.    1. 对应版本 `npm install style-loader@0.23.1 --save-dev` 
  21. 3. 在`main.js`入口文件中添加对CSS文件的依赖`require('./css/normal.css')`
  22. 3. 在 webpack.config.js 配置文件中需要添加一项导出
  23. ```javascript
  24. module: {
  25.     rules: [
  26.       {
  27.         test: /\.css$/,
  28.         use: [ 'style-loader', 'css-loader' ]    // webpack从右向左读
  29.       }
  30.     ]
  31.   }
  1. 打包，执行

类似地，对于less文件，安装包、添加配置、添加依赖，打包

图片处理

  1. url-loader，

    1. 按照低版本的，npm install url-loader@1.1.2 --save-dev

    2. 添加配置，webpack.config.js

      1. 在rules里面加上
      2. {
      3. test: /\.(png|jpg|gif)$/,
      4. use: [
      5. {
      6. loader: 'url-loader',
      7. options: {
      8.   limit: 8192
      9. }
      10. }
      11. ]
      12. }

    3. 配置里面的limit用来设置可以加载的图片的大小，可以自己设置

      1. 超过这个大小，就需要file-loader来加载
      2. 小于这个大小，会将图片编译成base64字符串形式
  2. file-loader
    1. 安装相应版本 npm install url-loader@2.0.0 --save-dev
    2. 因为页面使用的图片等通过url访问的资源，都会被放在dist目录下，所以需要在 webpack.config.js 配置文件的 output 一项中添加publicPath: '/dist'
    3. 放在dist目录下的资源，都会被自动取一个随机的名字，因此要设置一个与原文件相关的名字，且在dist里面建立图片目录，需要添加配置 在limit的下面，添加**name: 'img/[name].[hash:8].[ext]'**，自定义命名规范。

Babel loader

将ES6的语法转为ES5的语法
根据老师的版本，安装npm install --save-dev babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1
添加配置，webpack.config.js

  1. rules里面
  2. {
  3.   test: /\.js$/,
  4.   exclude: /(node_modules|bower_components)/,    // 不转化这些目录
  5.   use: {
  6.     loader: 'babel-loader',
  7.     options: {
  8.       // presets: ['@babel/preset-env']
  9.       presets: ['es2015']
  10.     }
  11.   }
  12. }

重新打包，bundle.js文件里面的内容就变成了ES5的语法

配置 Vue

为了使项目中可以通过 import Vue from 'vue' 来使用Vue，需要通过npm安装Vue
根据老师的版本 npm install vue@2.5.21 --save
使用：

  1. // 在main.js文件中
  2. import Vue from 'vue';
  3. new Vue({
  4.   el: "#app",
  5.   data: {
  6.     message: 'naka'
  7.   }
  8. });

打包 执行，报错
vue有两种使用版本：

  1. runtime-only，代码中不能有任何的template，默认的根组件app都不行
  2. runtime-compiler，代码中可以有template，因为compiler可以用于编译template

解决，添加一个配置，webpack.config.js

  1. // 与module同级
  2. resolve: {
  3.   alias: {
  4.     'vue$': 'vue/dist/vue.esm.js'   // 使用vue时，指定版本
  5.   }
  6. }

webpack的plugin

打包html的plugin

将index.html也打包进dist目录，最终发布项目时，只发布dist文件夹中的内容。需要 HtmlWebpackPlugin 插件

  • 自动生成一个index.html文件
  • 将打包的js文件 自动通过script标签插入到body中

安装 npm install html-webpack-plugin@3.2.0 --save-dev
配置 webpack.config.js ，并给它一个生成html的模板文件

  1. // 与module同级
  2. plugins: [
  3.   new VueLoaderPlugin(),
  4.   new HtmlWebpackPlugin({
  5.     template: 'index.html'
  6.   })
  7. ]

还得把之前设置的一个给删掉，也在这个配置文件中，删掉output里面的 publicPath: 'dist/'
打包 执行

js压缩的plugin

将打包的js文件进行压缩处理（删除空格与空行，简写参数形式等）
安装 npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
配置 webpack.config.js 在plugins里面，添加new uglifyJsPlugin()
打包 执行

使用本地服务

使用webpack提供的一个本地服务，让开发程序时，可以使浏览器自动刷新显示修改之后的效果。再在程序开发完之后，使用build打包程序。
安装 npm install webpack-dev-server@2.9.3 --save-dev
配置 webpack.config.js

  1. // plugins同级
  2. devServer: {
  3.   contentBase: './dist',    
  4.   inline: true    // 页面实时刷新
  5. }

映射指令 package,json 。--open是让它自动打开浏览器

  1. "dev": "webpack-dev-server --open"

就可以通过 npm run dev 来执行程序，默认使用端口8080，通过localhost:8080就可访问