webpack项目打包+Vue组件化开发

0 简介

webpack是一个可以将所有脚本、图片、样式、资源静态模块打包工具，打包模块化方式的源码。

webpack依赖于node，需要先安装nodejs和npm:

$ sudo apt install nodejs
$ sudo apt install npm

npm简单使用：

• npm install [email protected] -g：安装webpack.
  -g 表示全局安装， --save-dev表示局部安装，开发时依赖，打包后不使用。

1 项目结构

• dist文件夹：存放打包之后的文件
• src文件夹：存放项目源文件
• index.html: 项目打开的首页
• package.json: 使用npm init生成，npm包管理配置

2 打包项目

2.1 简单打包

通过简单的

$ webpack ./src/main.js ./dist/bundle.js

命令打包源码，并生成目标代码bundle.js.

然后在html文件中直接通过：

<script src="./dist/bundle.js"></script>

引用。

2.2 配置文件打包

创建webpack.config.js文件进行打包配置：

const path = require('path')

module.exports = {
  // 入口： 可以是字符串、数组或对象
  entry: './src/main.js',
  // 出口：打包后生成的文件信息
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
      	// 样式loader,允许将样式也进行打包
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

因为要将样式也打包，所以要安装一些loader模块:

$ npm install --save-dev css-loader style-loader

然后可以直接通过简单的：

$ webpack

命令进行打包。

2.3 npm配置打包

在2.2中通过webpack命令打包时，虽然打包命令已经很简单了，但如果需要安装其他模块时，还要分别手动使用npm install去安装各个模块，还是有些麻烦。

可以通过配置package.json配置npm依赖以及通过npm脚本去执行webpack命令：

{
  "name": "wevpack_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.5.3",
    "style-loader": "^1.2.1",
    "webpack": "^3.6.0"
  }
}

首先执行

$ npm install

安装所有依赖，然后通过

$ npm run build

进行打包。

注意：通过npm命令执行打包首先会从本地的node_modules/.bin路径寻找相应的命令，而直接用webpack打包是从全局的环境变量中寻找。

3 loader

对于非js的静态资源，需要使用loader来预处理文件。

使用过程：

• 步骤一：通过npm安装需要使用的loader
• 步骤二：在webpack.config.js的modules下进行配置

3.1 样式loader

要打包css样式，需要进行以下配置：
首先安装：

$ npm install --save-dev css-loader style-loader

然后配置：

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

最后导入相关样式:

// 导入样式
require('./css/normal.css')

less文件配置：

$ npm install --save-dev less-loader less

修改配置文件：

{
  test: /\.less$/,
  use: [{
    loader: "style-loader" // creates style nodes from JS strings
  }, {
    loader: "css-loader" // translates CSS into CommonJS
  }, {
    loader: "less-loader" // compiles Less to CSS
  }]
}

3.2 图片资源

图片资源属于文件，主要有url-loader和file-loader两种加载器。

• url-loader配置：

$ npm install --save-dev url-loader

配置文件：

{
  test: /\.(png|jpg|gif|jpeg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192
      }
    }
  ]
}

图片小于limit时，对图片进行base64编码，如果大于limit，则需要用file-loader进行加载：

$ npm install --save-dev file-loader

再次打包会在dist目录下生成对应图片文件：

此时图片并不能正确加载，因为代码中引入的是src目录下的图像，所以需要在webpack.config.js下配置publicPath路径：

// 出口：打包后生成的文件信息
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
  publicPath: 'dist/'	// 使用html模板生成页面时不需要指定该路径
},

另外，因为生成的图片文件名特别长，且和原图片名看不出联系，可以进行配置修改文件名：

{
  loader: 'url-loader',
  options: {
    limit: 8192,
    name: 'img/[name].[hash:8].[ext]'
  }
}

3.3 ES6语法处理

有些浏览器还不支持ES6，可以通过babel将ES6转化为ES5:

$ npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

配置：

{
  // 添加ES6转ES5 babel-loader
  test: /\.m?js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['es2015']
    }
  }
}

4 plugins

插件的使用过程：

• 步骤一：通过npm安装，有些webpack已经内置不用安装
• 步骤二：在webpack.config.js的plugins中传入插件实例。

4.1 添加版权的plugin

BannerPlugin插件是webpack自带的插件，在webpack.config.js中进行配置：

const webpack = require('webpack')

module.exports = {
  ...
  plugins: [
    new webpack.BannerPlguin('最终版权归某某所有')
  ]
}

之后再打包的话，在生成的文件头部都会生成上面那句话。

4.2 打包html的plugin

一般自己的index.html文件放在项目根目录下，在dist文件夹下没有该文件，使用HtmlWebpackPlugin插件可以（指定模板）生成html文件。

先安装插件：

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

修改配置文件：

const webpack = require('webpack')

module.exports = {
  ...
  plugins: [
    new webpack.BannerPlguin('最终版权归某某所有')
  ]
}

5 配置vue

首先安装vue:

$ npm install vue --save

因为程序在运行时也需要使用vue,所有使用--save安装运行时依赖。
在webpack.config.js的module同级层进行配置：

resolve: {
  extensions: ['.js', '.css', '.vue'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
},

之后就可以进行Vue开发。

5.1 原始vue开发

原始vue开发，主要是区分于.vue文件组件化开发。这种模式下，主要分为以下个部分：

• js文件内注册组件：

// 使用Vue进行开发
import Vue from 'vue'

new Vue({
  el: '#app',
  template: `
    <h2>{{message}}</h2>
  `,
  data: {
    message: 'hhhhhhhhh'
  }
})

• html文件内使用组件：

<body>
  <div id="app"></div>

  <script src="./dist/bundle.js"></script>
</body>

注意：当实例内el和templage都存在时，使用组件时会自动用template模板内容替换掉对应el的模板。

5.2 Vue组件化开发

5.2.1 开发环境配置

首先安装：

$ npm install vue-loader vue-template-compiler --save-dev

修改webpack.config.js文件：

const path = require('path')
const {VueLoaderPlugin} = require('vue-loader')

module.exports = {
  // 入口： 可以是字符串、数组或对象
  entry: './src/main.js',
  // 出口：打包后生成的文件信息
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  resolve: {
  	extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  module: {...
  },
  plugins: [
    // plugin for new vue-loader
    new VueLoaderPlugin()
  ]
}

5.2.2 组件开发

然后就可以开发.vue组件：

<template>
  <!-- 组件的模板 -->
</template>

<script>
export default {
  // 组件的构造器对象
  name: 'App',  // 组件标签
  data() {		// 组件data只能是函数
    return {    // 返回对象
    }
  }
}
</script>

<style>
  // 样式
</style>

5.2.3 组件使用

<App/>

6 搭建本地服务器

基于node.js搭建，内部使用express框架，实现浏览器自动刷新修改结果。

首先安装：

$ npm install --save-dev [email protected]

在webpack.config.js的devServer中进行配置：

devServer: {
  contentBase: './dist',	// 启动web项目目录
  inline: true,				// 页面实时刷新
  port: 8080				// 监听端口号
}

在package.json中配置启动脚本：

"dev": "webpack-dev-server --open"

之后使用npm run dev即可启动本地服务器，进行调试。