現代JavasScript應用程序的模塊打包器(module bunder)

webpack的兩大特點：1、模塊化 2、打包

手動創(chuàng)建WebPack項目

一、創(chuàng)建項目目錄

• 1、/src

• 2、創(chuàng)建webpack.config.js配置入口（出口）文件

二、創(chuàng)建項目

初始化：npm init -y 自動保存到package.json項目描述文件

三、安裝webpack依賴包

npm i webpack -g 保存webpack到全局npm

npm i webpack-cli -g 保存webpack-cli到全局

四、入口--出口配置

const path = require('path');  //nodejs內置模塊

module.exports = {
  /**
   * 入口
   */
  entry: './src/main.js',
  /**
   * 出口
   */

  output: {
    path: path.resolve(__dirname, 'dist'),  // d://webpakc/dist
    filename: 'bundle.js'   // d://webpakc/dist/bundle.js
  },
}

五、打包執(zhí)行

• 1、webpack --mode development 生成/dist/bundle.js文件

• 2、webpack.json 文件配置

  "bulid":".\\node_modules\\.bin\\webpack --mode development"

  打包：npm run bulid

運行html

一、babel-loader

• 1、安裝

  webpack 3.x | babel-loader 8.x | babel 7.x

  npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

• 2、webpack.config.js 文件配置（規(guī)則）

  module: {
      rules: [
          {
          test: /\.js$/,  
          exclude: /(node_modules|bower_components)/,
          use: {
              loader: 'babel-loader',
              options: {
                  presets: ['@babel/preset-env'] 
                  }            
              }
          }
      ]
  }
  

二、HtmlWebpackPlugin安裝（簡化了HTML文件的創(chuàng)建，為webpack包提供服務）

• 1、安裝

  npm install --save-dev html-webpack-plugin

• 2、配置

  plugins: [new HtmlWebpackPlugin({
      filename: 'index.html',
      template: __dirname + "/public/index.html"
  })]
  

• 修改后每次打包才能運行

三、loader安裝（模塊的源代碼進行轉換）

• 1、css解析

  npm install style-loader --save-dev 依賴style-loader

  npm install --save-dev css-loader css-loader

  {
     test: /\.css$/,
     use: [ 'style-loader', 'css-loader' ]
   }
  

• 2、圖片解析

  npm install --save-dev url-loader依賴file-loader

  npm install --save-dev url-loader url-loader

  {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            //圖片大小小于8192b時，圖片解析為base64編碼嵌入到js中，減少請求次數
            limit: 8192  
          }
        }
      ]
    }
  

  添加img節(jié)點后，img不能直接設置src屬性

四、本地服務-->開發(fā)中 Server(devServer)

瀏覽器解析為location：8080

• 安裝
  npm install webpack-dev-server --save-dev

• 配置

    devServer: {
      contentBase: path.join(__dirname, "dist"),
      compress: true,
      port: 9000,
      historyApiFallback: true, //不跳轉
      inline: true //實時刷新
  },
  

• package.json 設置

  "serve":".\\node_modules\\.bin\\webpack-dev-server"

  運行：npm run serve

  執(zhí)行緩存，實際運行還是需要打包（npm run bulid）

五、Vue使用

將 vue-loader 和 vue-template-compiler 一起安裝

(Vue官方文檔)[https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E8%AE%BE%E7%BD%AE]

• 安裝

  npm install -D vue-loader vue-template-compiler

• 配置->webpack.config.js

  引入：

  const VueLoaderPlugin = require('vue-loader/lib/plugin') 
  

  配置：

  module: {
      rules: [
      // ... 其它規(guī)則
      {
          test: /\.vue$/,
          loader: 'vue-loader'
      }
      ]
  },
  plugins: [
  // 請確保引入這個插件！
  new VueLoaderPlugin()
  ]
  

• 使用

  1、新建App.vue文件

  2、main.js引入vue和App.vue并實例化

  import Vue from 'vue'
  import App from './App.vue'
  
  new Vue({
      el: '#app',
      render: createElements => createElements(App)
  })
  

六、router使用

• 安裝
  npm i vue-router -S

• 引用

  新建/router/index.js文件

import Vue from 'vue' //集成vue
import Router from 'vue-router'//引用vue-router

//vue使用Router插件
Vue.use(Router);

// 創(chuàng)建路由數組
const routes = [
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        name: 'login',
        component: () => import('../views/Login.vue'),
    },
    {
        path: '/main',
        name: 'main',
        component: () => import('../views/Main.vue'),
    }
]
// Router對象中使用配置
const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes, //一定是routes（routes是Router里面的屬性）
})
// 暴露router
export default router;

• main.js 中引用

  import router from './router/index.js'

  new Vue({
      el: '#app',
      router,
      render: createElements => createElements(App),
  }) 
  

七、element-ui使用

• 安裝

  npm i element-ui -S

• main.js 文件引入

  // 全局引入
  import Element from 'element-ui'
  //樣式一定要引入
  import 'element-ui/lib/theme-chalk/index.css';
  Vue.use(Element);
  

• 配置字體圖標

  {
      test: /\.(ttf|eot|woff|woff2|svg)/,
      use: ['file-loader']
  },
  

  如果不配置會出現element-ui 字體文件fonts/element-icons.ttf | fonts/element-icons.woff 加載報404

• html文件中直接使用就可以