WebPack创建项目

现代JavasScript应用程序的模块打包器(module bunder)

webpack的两大特点：1、模块化 2、打包

手动创建WebPack项目

一、创建项目目录

• 1、/src

• 2、创建webpack.config.js配置入口（出口）文件

二、创建项目

初始化：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
  },
}

五、打包执行

• 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 文件配置（规则）

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

二、HtmlWebpackPlugin安装（简化了HTML文件的创建，为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节点后，img不能直接设置src属性

四、本地服务-->开发中 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

  执行缓存，实际运行还是需要打包（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: [
      // ... 其它规则
      {
          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);

// 创建路由数组
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文件中直接使用就可以