15 前端模块化 & webpack

7/3/2021 vue

# 原始的模块化写法(利用函数自己的作用域)

// my-module.js

;
var my-module = (function() { 
   var export = {};

   let flag = true;
   function sum(num1, num2) => num1+num2;

   export.flag = flag;
   export.sum = sum;
   return export;
})()

# CommonJS 与 ES6 模块化基础语法

CommonJS 与 ES6 模块化基础语法 - J.晒太阳的猫 - 博客园 (opens new window)

# webpack

webpack 中文文档 | webpack 中文网 (opens new window)

将 .sass, CommonJS代码 等内容,打包输出成浏览器认识的 HTML/CSS/JS。

不再直接面向浏览器编程,而是可以使用更多的高级工具进行开发。

安装

npm install webpack --save-dev

NPM 中文文档 (opens new window) npm install丨阿西河 (opens new window)

# webpack - output

path 需要使用绝对路径

输出(output) | webpack 中文网 (opens new window)

如果 url 路径不对,需要考虑设置 publicPath 的值

const path = require('path')

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

# webpack - loader

loader | webpack 中文网 (opens new window)

使用多个loader时, 是从右向左

  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
              // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
              limit: 13000,
              // [GitHub - webpack-contrib/file-loader: File Loader](https://github.com/webpack-contrib/file-loader )
              name: 'img/[name].[hash:8].[ext]' // 指定文件的目录和命名方式
            },
          }
        ]
      },

# webpack - babel-loader

ES6 -> ES5

babel-loader | webpack 中文网 (opens new window)

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

# webpack 集成 vue

npm install vue --save

需要处理 Runtime-Compiler 和 Runtime-Only 的编译配置

Runtime-Compiler和Runtime-Only的区别 (opens new window)

使用Vue脚手架构建项目时Runtime + Compiler和Runtime-only的区别 - SegmentFault 思否 (opens new window)

Explanation-of-Different-Builds — Vue.js (opens new window)

生产环境部署 — Vue.js (opens new window)

# vue 模块化的过程

  • el 和 template 区别

如果Vue实例中同时指定了 el 和 template,那么 template 模板的内容会替换掉挂载的对应 el 的模板。

  • 抽取子组件
import App from './vue/my-app'
new Vue({
  el: '#app',
  template: '<App></App>',  // 使用子组件 
  components: {
    App // 注册子组件
  }
})

子组件的定义 my-app.js

export default {
  template:  `
  <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
  </div>
  `,
  data() {
    return {
      message: 'Hello Webpack',
      name: 'coderwhy'
    }
  },
  methods: {
    btnClick() {
    }
  }
}
  • 抽取成 vue 文件

App.vue

<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
    <Cpn/> <!-- 使用导入的组件 -->
  </div>
</template>

<script>
  import Cpn from './Cpn' // 导入其它的 vue 组件(定义在同目录的 Cpn.vue 文件中)
  export default {
    name: "App",
    components: {
      Cpn // 注册组件
    },
    data() {
      return {
        message: 'Hello Webpack',
        name: 'coderwhy'
      }
    },
    methods: {
      btnClick() {
      }
    }
  }
</script>

<style scoped>
  .title {
    color: green;
  }
</style>

使用

// import App from './vue/my-app'  // 不使用 js 文件
import App from './vue/App.vue'  // 使用 vue 文件
new Vue({
  el: '#app',
  template: '<App></App>',  // 使用子组件 
  components: {
    App // 注册子组件
  }
})

但是,webpack 并不认识 vue 文件,需要配置 loader

生产环境部署 — Vue.js (opens new window)

Introduction · vue-loader (opens new window)

安装 vue loader

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

// webpack 配置

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

# webpack plugin

插件(plugins) | webpack 中文网 (opens new window) HtmlWebpackPlugin | webpack 中文网 (opens new window)

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {},
  module: {
    rules: [{},{},{}]
  },
  plugins: [
      new webpack.BannerPlugin('最终版权归aaa所有'), // 输出文件添加版权申明
      new HtmlWebpackPlugin({
        template: 'index.html' // 基于指定的模版生成
      }),
      new UglifyjsWebpackPlugin()
  ],
  devServer: { // webpack-dev-server 的配置
    contentBase: './dist',
    inline: true
  }
}

# 搭建本地服务器 webpack-dev-server 实时编译渲染

webpack-dev-server - npm (opens new window)

DevServer | webpack 中文文档 (opens new window)

# webpack 配置文件分离

生产环境构建 | webpack 中文网 (opens new window)

webpack-merge - npm (opens new window)

更新时间: Sunday, July 4, 2021 15:59