webpack+express를 사용하여 다중 페이지 사이트 개발을 구현하는 단계-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

webpack+express를 사용하여 다중 페이지 사이트 개발을 구현하는 단계

php中世界最好的语言

Apr 13, 2018 pm 05:31 PM

web 성취하다

이번에는 webpack+express 다중 페이지 사이트 개발 구현 단계를 알려드리겠습니다. webpack+express 다중 페이지 사이트 개발 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

webpack 입문 튜토리얼을 공부한 후, webpack+react, webpack+vue 등과 같은 단일 페이지 애플리케이션에 맞게 맞춤 제작될 수 있다고 느꼈습니다. 이는 종속성 로딩 및 패키징 문제를 해결할 수 있습니다. 다양한 자원. CSS도 js에 패키지되어 있으며 dom 문서에 동적으로 추가됩니다.

그렇다면 여러 페이지가 있는 일반 웹 사이트를 원한다면 CSS는 독립적이고 js 로딩에는 모듈이 필요합니까?

프로젝트 주소: webpackDemo_jb51.rar

프로젝트 초기화, 종속성 설치

package.json

"devDependencies": {
  "css-loader": "^0.23.1",
  "extract-text-webpack-plugin": "^1.0.1",
  "file-loader": "^0.8.5",
  "html-loader": "^0.4.3",
  "html-webpack-plugin": "^2.9.0",
  "jquery": "^1.12.0",
  "less": "^2.6.0",
  "less-loader": "^2.2.2",
  "sass-loader": "^4.0.2",
  "style-loader": "^0.13.0",
  "url-loader": "^0.5.7",
  "webpack": "^1.12.13",
  "webpack-dev-server": "^1.14.1"
}

로그인 후 복사

디렉터리 구조 (나는 Express 프레임워크를 사용하고 다른 것들은 개인적인 필요에 따라 다름)

- webpackDemo
  - src        #代码开发目录
    - css      #css目录，按照页面（模块）、通用、第三方三个级别进行组织
      + page
      + common
      + lib
    - js       #JS脚本，按照page、components进行组织
      + page
      + components
    + template      #HTML模板
  - node_modules    #所使用的nodejs模块
  - public            #express静态资源文件
    - dist            #webpack编译打包输出目录，无需建立目录可由webpack根据配置自动生成
      + css        
      + js
    + img      #图片资源
  + view            #express静态资源文件（webpack编译打包输出view目录）
  package.json      #项目配置
  webpack.config.js  #webpack配置

로그인 후 복사

개발 페이지

src/js/page 디렉터리에 index.js 파일을 만들고 src/view 디렉터리에 index.html 파일을 만듭니다. js 항목은 템플릿 파일 이름에 해당합니다.

index.html의 내용은 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <!--
    描述：head中无需再引入css以及facicon，webpack将根据入口JS文件的要求自动实现按需加载或者生成style标签
  -->
</head>
<body>
  <!--
    描述：body中同样无需单独引入JS文件，webpack会根据入口JS文件自动实现按需加载或者生成script标签，还可以生成对应的hash值
  -->
</body>
</html>

로그인 후 복사

매우 간단한 HTML 템플릿입니다. CSS나 JS를 도입하지 마세요. 웹팩 패키징을 통해 자동으로 도입될 수 있습니다.

index.js의 내용은 다음과 같습니다.

//引入css
require("../../css/lib/base.css");
require("../../css/page/index.scss");
$('body').append('<p class="text">index</p>');

로그인 후 복사

page1.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>page1</title>
</head>
<body>
</body>
</html>

로그인 후 복사

page1.js:

//引入css
require("../../css/lib/base.css");
require("../../css/page/page1.less");
$('body').html('page1');

로그인 후 복사

웹팩 구성(저는 Express 프레임워크를 사용하고 다른 프레임워크는 개인 요구에 따라 다름)

var path = require('path');
var webpack = require('webpack');
/*
extract-text-webpack-plugin插件，
有了它就可以将你的样式提取到单独的css文件里，
妈妈再也不用担心样式会被打包到js文件里了。
 */
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
html-webpack-plugin插件，重中之重，webpack中生成HTML的插件，
具体可以去这里查看https://www.npmjs.com/package/html-webpack-plugin
 */
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: { //配置入口文件，有几个写几个
    index: './src/js/page/index.js',
    page1: './src/js/page/page1.js'
  },
  output: { 
    path: path.join(dirname, './public/dist/'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
    publicPath: '/dist/',        //模板、样式、脚本、图片等资源对应的server上的路径
    filename: 'js/[name].js',      //每个页面对应的主js的生成配置
    chunkFilename: 'js/[id].chunk.js'  //chunk生成的配置
  },
  module: {
    loaders: [ //加载器，关于各个加载器的参数配置，可自行搜索之。
      {
        test: /\.css$/,
        //配置css的抽取器、加载器。'-loader'可以省去
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader') 
      }, {
        test: /\.less$/,
        //配置less的抽取器、加载器。中间!有必要解释一下，
        //根据从右到左的顺序依次调用less、css加载器，前一个的输出是后一个的输入
        //你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
        loader: ExtractTextPlugin.extract('css!less')
      }, {
        test: /\.scss$/,
        //配置scss的抽取器、加载器。中间!有必要解释一下，
        //根据从右到左的顺序依次调用scss、css加载器，前一个的输出是后一个的输入
        //你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
        loader: ExtractTextPlugin.extract('css!scss')
      }, {
        //html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源
        //比如你配置，attrs=img:src img:src就可以一并处理src引用的资源了，就像下面这样
        test: /\.html$/,
        loader: "html?attrs=img:src img:src"
      }, {
        //文件加载器，处理文件静态资源
        test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader?name=./fonts/[name].[ext]'
      }, {
        //图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
        //如下配置，将小于8192byte的图片转成base64码
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({ //加载jq
      $: 'jquery'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'commons', // 将公共模块提取，生成名为`commons`的chunk
      chunks: ['index','page1'], //提取哪些模块共有的部分
      minChunks: 2 // 提取至少2个模块共有的部分
    }),
    new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath
    
    //HtmlWebpackPlugin，模板生成相关的配置，每个对于一个页面的配置，有几个写几个
    new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
      favicon: './src/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
      filename: '../../views/index.html', //生成的html存放路径，相对于path
      template: './src/template/index.html', //html模板路径
      inject: 'body', //js插入的位置，true/'head'/'body'/false
      hash: true, //为静态资源生成hash值
      chunks: ['commons', 'index'],//需要引入的chunk，不配置就会引入所有页面的资源
      minify: { //压缩HTML文件  
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: false //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
      favicon: './src/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
      filename: '../../views/page1.html', //生成的html存放路径，相对于path
      template: './src/template/page1.html', //html模板路径
      inject: true, //js插入的位置，true/'head'/'body'/false
      hash: true, //为静态资源生成hash值
      chunks: ['commons', 'list'],//需要引入的chunk，不配置就会引入所有页面的资源
      minify: { //压缩HTML文件  
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: false //删除空白符与换行符
      }
    })
    // new webpack.HotModuleReplacementPlugin() //热加载
  ],
  //使用webpack-dev-server，提高开发效率
  // devServer: {
  //   contentBase: './',
  //   host: 'localhost',
  //   port: 9090, //默认8080
  //   inline: true, //可以监控js变化
  //   hot: true, //热启动
  // }
};

로그인 후 복사

자, 위의 구성을 완료한 후 webpackpackage 명령을 실행하여 프로젝트 패키징을 완료합니다.

rreee

이때 생성된 index.html 파일을 보려면 views 디렉터리로 이동하면 다음과 같습니다.

Hash: e6219853995506fd132a
Version: webpack 1.14.0
Time: 1338ms
        Asset    Size Chunks       Chunk Names
     js/index.js 457 bytes    0 [emitted] index
     js/page1.js 392 bytes    1 [emitted] page1
    js/commons.js   306 kB    2 [emitted] commons
    css/index.css  62 bytes    0 [emitted] index
    css/page1.css  62 bytes    1 [emitted] page1
   css/commons.css 803 bytes    2 [emitted] commons
     favicon.ico  1.15 kB     [emitted]
../../view/index.html 496 bytes     [emitted]
../../view/page1.html 499 bytes     [emitted]
  [0] ./src/js/page/index.js 170 bytes {0} [built]
  [0] ./src/js/page/page1.js 106 bytes {1} [built]
  + 7 hidden modules
Child html-webpack-plugin for "../../view/page1.html":
    + 1 hidden modules
Child html-webpack-plugin for "../../view/index.html":
    + 1 hidden modules
Child extract-text-webpack-plugin:
    + 2 hidden modules
Child extract-text-webpack-plugin:
    + 2 hidden modules
Child extract-text-webpack-plugin:
    + 2 hidden modules

로그인 후 복사

원본 템플릿의 콘텐츠를 유지하는 것 외에도 생성된 파일은 항목 파일 index.js의 정의에 따라 파비콘뿐만 아니라 도입해야 하는 CSS 및 JS 파일도 자동으로 추가하는 것을 볼 수 있습니다. 또한 해당 해시 값을 추가합니다.

두 가지 질문

webpack은 어떻게 항목 파일을 자동으로 검색하고 해당 템플릿을 구성합니까? 스타일 및 스크립트의 자동 도입을 직접 처리하는 방법은 무엇입니까? 다음 코드는 위와 비슷합니다. 본질적인 차이점은 관련된 모든 파일을 메소드를 통해 객체에 넣어 자동 도입 효과를 완성한다는 것입니다!
glob: 여기의 분석은 다릅니다:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页</title>  
<link rel="shortcut icon" href="/dist/favicon.ico" rel="external nofollow" ><link href="/dist/css/commons.css?e6219853995506fd132a" rel="external nofollow" rel="stylesheet"><link href="/dist/css/index.css?e6219853995506fd132a" rel="external nofollow" rel="stylesheet"></head>
<body>
  <script type="text/javascript" src="/dist/js/commons.js?e6219853995506fd132a"></script><script type="text/javascript" src="/dist/js/index.js?e6219853995506fd132a"></script></body>
</html>

로그인 후 복사

개인용 컴퓨터 구성에 따라 해당 변경을 수행하세요

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7514

Cakephp 튜토리얼

1378

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까? Mar 24, 2024 am 11:27 AM

Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까? 소셜 미디어의 등장으로 WeChat은 사람들의 일상 생활에 없어서는 안될 커뮤니케이션 도구 중 하나가 되었습니다. 그러나 많은 사람들이 동일한 휴대폰에서 동시에 여러 WeChat 계정에 로그인하는 문제에 직면할 수 있습니다. Huawei 휴대폰 사용자의 경우 듀얼 WeChat 로그인을 달성하는 것은 어렵지 않습니다. 이 기사에서는 Huawei 휴대폰에서 듀얼 WeChat 로그인을 달성하는 방법을 소개합니다. 우선, 화웨이 휴대폰과 함께 제공되는 EMUI 시스템은 듀얼 애플리케이션 열기라는 매우 편리한 기능을 제공합니다. 앱 듀얼 오픈 기능을 통해 사용자는 동시에

PHP 프로그래밍 가이드: 피보나치 수열을 구현하는 방법 Mar 20, 2024 pm 04:54 PM

프로그래밍 언어 PHP는 다양한 프로그래밍 논리와 알고리즘을 지원할 수 있는 강력한 웹 개발 도구입니다. 그중 피보나치 수열을 구현하는 것은 일반적이고 고전적인 프로그래밍 문제입니다. 이 기사에서는 PHP 프로그래밍 언어를 사용하여 피보나치 수열을 구현하는 방법을 소개하고 구체적인 코드 예제를 첨부합니다. 피보나치 수열은 다음과 같이 정의되는 수학적 수열입니다. 수열의 첫 번째와 두 번째 요소는 1이고 세 번째 요소부터 시작하여 각 요소의 값은 이전 두 요소의 합과 같습니다. 시퀀스의 처음 몇 가지 요소

Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법 Mar 24, 2024 pm 06:03 PM

Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법 소셜 소프트웨어의 인기와 개인 정보 보호 및 보안에 대한 사람들의 강조가 높아지면서 WeChat 복제 기능이 점차 주목을 받고 있습니다. WeChat 복제 기능을 사용하면 사용자가 동일한 휴대폰에서 여러 WeChat 계정에 동시에 로그인할 수 있으므로 관리 및 사용이 더 쉬워집니다. Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 것은 어렵지 않습니다. 다음 단계만 따르면 됩니다. 1단계: 휴대폰 시스템 버전과 WeChat 버전이 요구 사항을 충족하는지 확인하십시오. 먼저 Huawei 휴대폰 시스템 버전과 WeChat 앱이 최신 버전으로 업데이트되었는지 확인하세요.

PHP 게임 요구 사항 구현 가이드 Mar 11, 2024 am 08:45 AM

PHP 게임 요구사항 구현 가이드 인터넷의 대중화와 발전으로 인해 웹 게임 시장이 점점 더 대중화되고 있습니다. 많은 개발자는 PHP 언어를 사용하여 자신만의 웹 게임을 개발하기를 원하며 게임 요구 사항을 구현하는 것이 핵심 단계입니다. 이 문서에서는 PHP 언어를 사용하여 일반적인 게임 요구 사항을 구현하는 방법을 소개하고 특정 코드 예제를 제공합니다. 1. 게임 캐릭터 만들기 웹게임에서 게임 캐릭터는 매우 중요한 요소입니다. 이름, 레벨, 경험치 등 게임 캐릭터의 속성을 정의하고, 이를 운용할 수 있는 방법을 제공해야 합니다.

Golang이 어떻게 게임 개발 가능성을 가능하게 하는지 마스터하세요 Mar 16, 2024 pm 12:57 PM

오늘날의 소프트웨어 개발 분야에서 효율적이고 간결하며 동시성이 뛰어난 프로그래밍 언어인 Golang(Go 언어)은 점점 더 개발자들의 선호를 받고 있습니다. 풍부한 표준 라이브러리와 효율적인 동시성 기능으로 인해 게임 개발 분야에서 주목받는 선택이 되었습니다. 이 기사에서는 게임 개발에 Golang을 사용하는 방법을 살펴보고 특정 코드 예제를 통해 Golang의 강력한 가능성을 보여줍니다. 1. 게임 개발에서 Golang의 장점 Golang은 정적인 유형의 언어로서 대규모 게임 시스템을 구축하는 데 사용됩니다.

Golang에서 정확한 나눗셈 연산을 구현하는 방법 Feb 20, 2024 pm 10:51 PM

Golang에서 정확한 나눗셈 작업을 구현하는 것은 특히 재무 계산과 관련된 시나리오 또는 고정밀 계산이 필요한 기타 시나리오에서 일반적인 요구 사항입니다. Golang에 내장된 나눗셈 연산자 "/"는 부동 소수점 수에 대해 계산되며 때로는 정밀도가 손실되는 문제가 있습니다. 이 문제를 해결하기 위해 타사 라이브러리나 사용자 정의 기능을 사용하여 정확한 분할 작업을 구현할 수 있습니다. 일반적인 접근 방식은 분수 표현을 제공하고 정확한 나눗셈 연산을 구현하는 데 사용할 수 있는 math/big 패키지의 Rat 유형을 사용하는 것입니다.

조종석 웹 UI에서 관리 액세스를 활성화하는 방법 Mar 20, 2024 pm 06:56 PM

Cockpit은 Linux 서버용 웹 기반 그래픽 인터페이스입니다. 이는 주로 신규/전문가 사용자가 Linux 서버를 보다 쉽게 관리할 수 있도록 하기 위한 것입니다. 이 문서에서는 Cockpit 액세스 모드와 CockpitWebUI에서 Cockpit으로 관리 액세스를 전환하는 방법에 대해 설명합니다. 콘텐츠 항목: Cockpit 입장 모드 현재 Cockpit 액세스 모드 찾기 CockpitWebUI에서 Cockpit에 대한 관리 액세스 활성화 CockpitWebUI에서 Cockpit에 대한 관리 액세스 비활성화 결론 조종석 입장 모드 조종석에는 두 가지 액세스 모드가 있습니다. 제한된 액세스: 이는 조종석 액세스 모드의 기본값입니다. 이 액세스 모드에서는 조종석에서 웹 사용자에 액세스할 수 없습니다.

웹 개발에서 PHP는 프런트엔드인가요, 백엔드인가요? Mar 24, 2024 pm 02:18 PM

PHP는 웹 개발의 백엔드에 속합니다. PHP는 주로 서버 측 로직을 처리하고 동적 웹 콘텐츠를 생성하는 데 사용되는 서버 측 스크립팅 언어입니다. 프런트엔드 기술과 비교하여 PHP는 데이터베이스와의 상호 작용, 사용자 요청 처리, 페이지 콘텐츠 생성과 같은 백엔드 작업에 더 많이 사용됩니다. 다음으로, 백엔드 개발에서 PHP 적용을 설명하기 위해 특정 코드 예제가 사용됩니다. 먼저 데이터베이스에 연결하고 데이터를 쿼리하기 위한 간단한 PHP 코드 예제를 살펴보겠습니다.

See all articles

webpack+express를 사용하여 다중 페이지 사이트 개발을 구현하는 단계

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제