webpack+express를 사용하여 다중 페이지 사이트 개발을 구현하는 단계
- php中世界最好的语言원래의
- 2018-04-13 17:31:012341검색
이번에는 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 명령을 실행하여 프로젝트 패키징을 완료합니다.
이때 생성된 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은 어떻게 항목 파일을 자동으로 검색하고 해당 템플릿을 구성합니까? 스타일 및 스크립트의 자동 도입을 직접 처리하는 방법은 무엇입니까? 다음 코드는 위와 비슷합니다. 본질적인 차이점은 관련된 모든 파일을 메소드를 통해 객체에 넣어 자동 도입 효과를 완성한다는 것입니다!
위 내용은 모두 Mac OSX 시스템의 구성이며, win7 경로는 다를 수 있습니다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 중국어 웹사이트의 다른 관련 기사에 주목하세요!
추천 도서:
네이티브 JS와 여러 스크롤 막대를 동기화하는 방법vue2-webpack2 프레임워크를 구축하는 방법
위 내용은 webpack+express를 사용하여 다중 페이지 사이트 개발을 구현하는 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Webpack 프레임워크 사용 요약다음 기사：Webpack 프레임워크 사용 요약