WebPack Vue项目中基本使用

一般使用脚手架CLI直接会创建。这里只是理解Vue中是怎样使用和基本运行webpack的。

一、起步

1.1. 安装 nodejs

因为webpack在执行打包压缩的时候是依赖nodejs，所以必须要安装。
CMD（终端）中输入node -v查看版本，存在安装 over！

1.2. 安装 Webpack

1.全局安装（在项目外也可以使用）- 输入npm install webpack -g（因为安装node时带着安装了npm）

2. 局部安装（在项目只能内使用） - 输入npm install webpack --save-dev（全局安装的目的是，后期项目中会有package.js这么一个文件，在整个文件中使用到了Webpack命令）

1.3. Webpack基本使用（demo项目 "/" - 为跟目录 ）

1. 创建文件/src/index.js和/src/js/demo.js文件

// index.js
import {name,age,height} from "./demo.js";
console.log(name);
console.log(age);
console.log(height);

// demo.js
export const name = 'barry';
export const age = '18';
export const height = 1.88;

2. 运行webpack ./src/index.js ./dist/bundle.js（index.js文件中导入ES6模块文件，会自动打包，在html文件中可以直接引用，暂不粘贴代码）

二、 Webpack配置文件

1. 创建配置/webpack.config.js文件

const path = require('path');
module.exports = {
  // 入口
  // 全局变量 _dirname 保存现在的路径
  entry: './src/main.js',
  // 出口
  output: {
    // 需要使用绝对路径
    // __dirname -> node中的变量（动态获取）
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js'
  }
};

2. 初始化npm init配置package.json文件

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    // 在cmd中输入npm run build
    // 会直接自动找本地 webpack 包
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  // 开发时候的依赖
  // 配置本地webpack包：
  // 通过 npm install  webpack@3.6.0 --save-dev 安装后产生
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

三、loader（安装过程可以根据 官网 提示步骤操作）

• 将css、图片、高级的ES6转成ES5代码
• TypeScript转成ES5
• 将scss less转成css
• 将.jsx .vue文件转成 js文件等等

1. 基本代码样式：

module.exports = {
  module: {
    rules: [
      // 配置不同文件使用的loader
      {
        // 文件的样式
        test:/\.xxx$/,
        // 配置上边test对应文件使用相关的loader（可以使用多个）
        use:[]
      },
      {},...
    ],
  },
};

2. CSS依赖文件（还有好多loader，而且内部有注意事项，So暂仅举例一个）
   2.1 webpack.config.js中的代码为：

module.exports = {
  module: {
    rules: [
      // 配置不同文件使用的loader
      ...,
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载图片，小于limit时，会将图片编译成base64字符串形式
              // 当图片大于limit时，需要使用file-loader,将文件放到dist文件中
              // 默认命名是按照32位hash值命名的
              limit: 8192
            }
          }
        ]
      }
    ],
  },
};

2.2 当图片大于limit时，需要使用file-loadernpm install --save-dev file-loader不许要配置，如果是图片会将图片文件打包到dist文件夹中。
2.3 需要修改 webpack.config.js配置文件中出口output，并给图片文件重命名

module.exports = {
  // 入口
  // 全局变量 _dirname 保存现在的路径
  entry: './src/main.js',
  // 出口
  output: {
    // 需要使用绝对路径
    // __dirname -> node中的变量（动态获取）
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js'
    // 设计到URL的文件都会在前边添加 dist/
    // 开发时不会有
    publicPath: 'dist/'
  }
};

module.exports = {
  module: {
    rules: [
      // 配置不同文件使用的loader
      ...,
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
                // 当加载图片，小于limit时，会将图片编译成base64字符串形式
                // 当图片大于limit时，需要使用file-loader,将文件放到dist文件中
                // 默认命名是按照32位hash值命名的
                limit: 7000,
                // 设置默认的图片保存路径、名字以及后缀
                name: 'img/[name].[hash:8].[ext]'
              }
           }
         ]
       }
    ],
  },
};

四、配置Vue

直接使用webpack打包.vue文件会报错。
在打包的时候会产生两个版本：

• runtime-only -> 代码中，不可以有任何template
• runtime-compiler -> 代码中，可以有template（因为compile可以用于编译template）

1. 使用npm本地安装vue（npm install vue --save）
2. 在JS入口文件中引用

// 导入vue在node_modules中
import Vue from 'vue';
// 使用vue
const app = new Vue({
  el: '#app',
  data: {
    message: 'hello webpack'
  }
});

3. 在webpack.config.js中指定 runtime-compiler 版本

module.exports = {
  module: {
    // 入口
    // 全局变量 _dirname 保存现在的路径
    entry: './src/main.js',
    // 出口
    output: { },
    // 配置resolve指定vue版本
    resolve:{
      // alias - 别名
      // 指向node_modules文件中vue/dist/vue.esm.js文件
      // 因为vue.esm.js中有runtime-compiler
      alias:{
        'vue$': 'vue/dist/vue.esm.js'
      }
    }
  },
};

4. 配置vue的loadernpm install vue-loader vue-template-compiler --save-dev

{
  // 以xxxx结尾添加$
  test: /\.vue$/,
  use: ['vue-loader']
}

5. package.json 中修改vue-loader 版本 ^13.0.0（^ - 13版本以上的版本，14版本开始需要安装插件麻烦）

"vue-loader": "^13.0.0"

五、Plugin（插件）

将现有的框架进行扩展

添加版权声明

配置webpack.config.js

// 本地导入 webpack
const webpack = require('webpack');
module.exports = {
    ...,
    plugins: [
        // 版权声明扩展
        new webpack.BannerPlugin('最终版权归barry所有')
    ]
}

dist文件夹添加index.html

// 本地导入 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    ...,
    plugins: [
        // 版权声明扩展
        new webpack.BannerPlugin('最终版权归barry所有'),
        // 会将项目目录中的index.html文件作为模板放入dist文件中
        // index.html文件中不需要引入script入口文件（自动引入）
        new HtmlWebpackPlugin({
            template: 'index.html'
        })
    ]
}

代码压缩（代码丑化）

1. 本地安装npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
2. 配置webpack.config.js

// 本地导入 html-webpack-plugin
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    ...,
    plugins: [
        // 版权声明扩展
        new webpack.BannerPlugin('最终版权归barry所有'),
        // 会将项目目录中的index.html文件作为模板放入dist文件中
        // index.html文件中不需要引入script入口文件（自动引入）
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
        new uglifyjsWebpackPlugin()
    ]
}

七、搭建本地服务器

1. 本地安装npm install webpack-dev-server@2.9.3 --save-dev
2. 配置webpack.config.js

module.exports = {
    ...,
    plugins: [
        // 版权声明扩展
        new webpack.BannerPlugin('最终版权归barry所有'),
        // 会将项目目录中的index.html文件作为模板放入dist文件中
        // index.html文件中不需要引入script入口文件（自动引入）
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
        new uglifyjsWebpackPlugin(),
        // 服务于那个文件夹
        devServer: {
            contentBase: './dist',
            // 是否实时监听
            inline: true,
            // 端口号
            port: 8088
        }
    ]
}

3. cmd中输入npm run dev跑服务

"scripts": {
  ...,
  // 会自动打开网页
  "dev": "webpack-dev-server  --open"
},

七、webpack文件合并

将webpack配置文件抽离开 使用webpack-merge将文件和并

1. 安装npm install webpack-merge
2. 在需要合并的 js文件中导入

const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');
// 搭建本地服务器
module.exports = webpackMerge(baseConfig,{
  devServer: {
    contentBase: './dist',
    // 是否实时监听
    inline: true,
    // 端口号
    port: 8088
  }
});