使用 Webpack1.x 搭建（MultiPage Application，MPA）基础框架

yy736044583 发布于2019-08-23 16:54 / 2955人阅读

摘要：初始化项目官方文档项目地址项目搭建简单记录一下命令，网上有很多文章不多做介绍。希望可以提供一个基础的架构。

初始化项目

webpack官方文档：https://www.webpackjs.com/con...
github项目地址：https://github.com/Zhanghongw...

项目搭建简单记录一下命令，网上有很多文章不多做介绍。
希望可以提供一个基础的架构。

持续更新........

执行命令

// 全局安装 webapck、webpack-cli, 之前安装过忽略此步骤

npm install webpack -g 

npm install webpack-cli -g

初始化 npm

npm init

项目目录结构

+dist
+src
++assets
+++images
++common
++page
++view

安装相关依赖，注意版本

npm install xxx@版本号 --save-dev

{
    "css-loader": "^2.1.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "style-loader": "^0.23.1",
    "url-loader": "^0.5.8",
    "webpack": "^1.15.0",
    "webpack-dev-server": "^1.16.5"
  }

webpack.config.js 配置文件

var path = require("path");
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");

// 获取html-webpack-plugin参数的方法 
var getHtmlConfig = function(name){
  return {
      template    : "./src/view/" + name + ".html",
      filename    : "view/" + name + ".html",
      inject      : true,
      hash        : true,
      chunks      : ["common", name]
  };
};

var config = {
  entry: {
    "common":["./src/common/index.js"],
    "index":["./src/page/index/index.js"],
    "home":["./src/page/home/home.js"]
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/dist",
    filename: "js/[name].js"
  },
  module: {
    loaders: [

      // 处理 css
      { test: /.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") },

      // 处理图片
      { test: /.(gif|png|jpg|jpeg)??.*$/, loader: "url-loader?limit=100&name=resoure/[name].[ext]" }

    ]
  },
  plugins: [

    new webpack.optimize.CommonsChunkPlugin({
      // 公共模块提取
        name : "common",
        filename : "js/base.js"
    }),

    // 把css多带带打包到文件里
    new ExtractTextPlugin("css/[name].css"),

    // html 模板处理
    new HtmlWebpackPlugin(getHtmlConfig("index")),
    new HtmlWebpackPlugin(getHtmlConfig("home"))
  ]
};

module.exports = config;

云服务器 GPU云服务器 MultiPage MPA php框架使用 yaf框架使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103481.html

项目:（MPA应用）企业展示目录

项目框架基础框架：https://segmentfault.com/a/11...使用之前 webpack 搭建的框架。项目源码 github 地址：https://github.com/Zhanghongw... 页面开发地址：https://segmentfault.com/a/11...

wenhai.he 2019-08-02 16:13 评论0 收藏0
Webpack中hash的用法

摘要：在的配置项中，可能会见到这样的字符。的情况的可以指定。值是特定于整个构建过程的。。因此，以上两个值中更推荐的是。中的则和前面的一样，指定了结果的截取长度。的情况被引用的通过来得到带的文件。所以，这可能并不是我们想要的。在webpack的配置项中，可能会见到hash这样的字符。当存在hash配置的时候，webpack的输出将可以得到形如这样的文件： page1_bundle_54e8...

苏丹 2019-08-20 18:09 评论0 收藏0
手把手教你从零搭建react局部热加载环境

摘要：有没有办法实现就局部刷新呢当然是有第十步执行为了实现局部热加载，我们需要添加插件。前言用了3个多月的vue自认为已经是一名合格的vue框架api搬运工，对于vue的api使用到达了一定瓶颈，无奈水平有限，每每深入底层观赏源码时候都迷失了自己。遂决定再找个框架学习学习看看能否突破思维局限，加上本人早已对React、RN技术垂涎已久,于是决定找找教程来学习。无奈第一步就卡在了环境搭...

quietin 2019-08-21 17:23 评论0 收藏0
可能是你见过最完善的微前端解决方案

摘要：而从技术实现角度，微前端架构解决方案大概分为两类场景单实例即同一时刻，只有一个子应用被展示，子应用具备一个完整的应用生命周期。为了解决产品研发之间各种耦合的问题，大部分企业也都会有自己的解决方案。原文链接：https://zhuanlan.zhihu.com/p/... Techniques, strategies and recipes for building a modern ...

Kahn 2019-08-26 14:04 评论0 收藏0
WebPack1.x 常用功能介绍

摘要：介绍文件是根据里面描述的内容对一个项目进行打包的。配置文件后缀名，除了，还有等等。大部分的对文件的处理的功能都是通过实现的。下面介绍怎么使用这个功能。注意：本文描述的配置只适用webpack1.x;由于webpack已经推出2.x并有大量更改，特此申明概述 Webpack是一款用户打包前端模块的工具。主要是用来打包在浏览器端使用的javascript的。同时也能转换、捆绑、打包其他...

aervon 2019-08-19 17:15 评论0 收藏0