webpack配置项

一、SPA

（一）描述

SPA的全称是单页Web应用,就是整个工程只有一个web页面, 什么是web页面,简单来说就是可以通过浏览器进行浏览代码的文件,譬如HTML、JAVASCRIPT、CSS、VIDEO,抽象点描述就是图形、文字、声音、视像。单页应用程序是加载单个页面并在用户与应用程序交互时动态更新该页面的web应用程序。浏览器一开始会加载必须的HTML、CSS以及JAVASCRIPT,所有的操作都在这张页面上完成,都由JAVASCRIPT动态控制。SPA衍生出了打包工具webpack,语法构建工具babel。

（二）优势

开发速度快,用户体验好

经典的MVVM模式, 前后端各付其责

可以通过路由进行内容切换,却不会重新加载web页面

二、模块

（一）概念

模块是实现特定功能的文件,譬如JAVASCRIPT,CSS,TIFF,MD

（二）SCRIPT标签

1．概念

通过SCRIPT标签定义JAVASCRIPT代码,以及引入封闭的JS文件,封闭的JS文件是由立即执行函数包装起来的代码。

2．同步引入

<script type=’text/javascript’ src=’index.js’></script>

3．异步引入

  <script type=’text/javascript’ src=’index.js’ defer></script>

<script type=’text/javascript’ src=’index.js’ async></script>

4．封闭性

                  ;(function(global){})(window);

5．动态引入

const script = document.createElement(‘script’);

script.type=’text/javascript’;

script.src=’index.js’;

script.onload=function(){};

script.onerror=function(){};

（三）COMMONJS

1．定义

module.exports = {};

module.exports = function(){};

exports = {};

2．引用

require(‘welcome.js’);

3．适用者

nodeJS

4．优势

对于基本数据类型，属于复制。即会被模块缓存。同时，在另一个模块可以对该模块输出的变量重新赋值。

对于复杂数据类型，属于浅拷贝。由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块

当使用require命令加载某个模块时，就会运行整个模块的代码

当使用require命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值。也就是说，CommonJS模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存

（四）ES6

1．定义

export {};

export default function(){};

2．引入

import welcome from ‘welcome.js’;

        import {welcome} from ‘welcome.js’;

三、Webpack

（一）概念

Webpack是一个现代Javascript应用程序的静态模块打包器。当Webpack处理应用程序时,他会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将这些文件打包成一个或者多个文件。

（二）思维导图

 

（三）配置项

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 将打包后的js、css文件自动绑定到html文件中

const MiniCssText = require('mini-css-extract-plugin'); // css提取到单独的文件中

const CleanWebpack = require('clean-webpack-plugin').CleanWebpackPlugin; // 清楚原先打包的文件夹

const CopyWebpackPlugin = require('copy-webpack-plugin'); // 拷贝文件到特定的文件夹下

const CustomPlugin = require('./plugin/customplugin');

const uglifyjs = require('uglifyjs-webpack-plugin'); // 对css, html, js等文件进行压缩

 

const DIST_PATH = path.resolve(__dirname, 'dist');

const ROOT_PATH = path.resolve(__dirname);

 

module.exports = {

  mode: 'development', // 打包模式,分为开发模式(development),生产模式(production),测试模式(none)

  devtool: 'eval-source-map', // 打包调试

  entry: { // 入口路径

    app: './src/index.js' // 单路径

    vendor: ['./src/index.js', './src/main.js'] // 多路径

  },

  output: {

    path: DIST_PATH, // 输出路径

    publicPath: '/', // 部署到webapp下的路径

    filename: '[name].[hash:5].js' // 输出文件名称

  },

  module: { // 模块解析

    rules: [ // 规则

      {

        test: /\.js$/, // js语法处理loader

        use: {

          loader: 'babel-loader',

          options: {

            "presets": [

              [

                '@babel/preset-env', {

                  "targets": {

                    "ie": "11"

                  }

                }

              ]

            ]

          }

        }

      },

      {

        test: /\.(c|le)ss$/, // css提取loader

        use: [{

          loader: MiniCssText.loader,

          options: {

            publicPath: './../'

          }

        }, 'css-loader', 'less-loader']

      },

      {

        test: /\.less$/, // less提取loader

        use: [{

          loader: path.resolve('./loader/customloader.js'),

          options: {

          }

        }]

      },

      {

        test: /\.jpg$/, // 图片处理loader

        use: [

          {

            loader: 'file-loader',

            options: {

              name: '[name].[ext]',

              outputPath: 'images/'

            }

          }

        ]

      },

      {

        test: /\.(ttf|eot|svg|woff|woff2)$/, // 字体处理loader

        use: [

          {

            loader: 'url-loader',

            options: {

              name: '[name].[ext]',//设置抽离打包图片的名称--[ext]用来获取图片的后缀

              outputPath: 'fonts'//设置输出文件夹名称，这个文件夹会与主入口文件在同一路径下

            }

          }

        ]

      }

    ]

  },

  resolve: {

    alias: { // 处理路径别名

      '@projects': './../projects'

    },

    aliasFields: ['browser'],

    cacheWithContext: true,

    enforceExtension: false, // 解析拓展文件

    enforceModuleExtension: false, // 模块是否要加拓展

    extensions: [".js", ".json"] // 自动解析确定的拓展

  },

  optimization: { // webpack核心配置

    splitChunks: { // 拆分较大的文件

      cacheGroups: {

        styles: {

          name: 'styles', // 文件名称

          test: /\.((c|le)ss|vue)$/, // 目标文件：css、less、vue-style

          chunks: 'all', // 所有的块

          enforce: true // 强制执行

        }

      }

    }

  },

  plugins: [ // 插件

    // new uglifyjs(), // 图片,js,css压缩插件

    new CleanWebpack({ // 清除打包路径插件

      dry: 'dist'

    }),

    new MiniCssText({ // css提取插件

      filename: "css/css"

    }),

    new CopyWebpackPlugin({ // 文件拷贝插件

      patterns: [

        {

          from: path.join(__dirname, 'src', 'text'),

          to: 'text'

        }

      ]

    }),

    new CustomPlugin(), // 自定义插件

    new HtmlWebpackPlugin({ // html编译插件

      template: ROOT_PATH + '/index.html',

      filename: DIST_PATH + '/index.html',

      title: 'webpack',

      inject: true

    }),

  ],

  devServer: { // webpack服务器配置

    port: 8082, // 端口号

    contentBase: './dist', // 内存指向的路径

    host: 'localhost', // 主机地址

    open: false, // 是否自动打开网页

    historyApiFallback: true, // 出错是否回滚到html页面

  },

}