English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
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를 포함하지 않고 webpack을 통해 패키지할 수 있습니다. 자동으로 포함시켜줍니다.
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');
webpack 설정(저는 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 플러그인, 워크백에서 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/', //템플릿, 스타일, 스크립트, 이미지 등의 자원에 대한 서버 상의 경로
filename: 'js/[이름].js', //각 페이지에 해당하는 주 js 생성 설정
chunkFilename: 'js/[id].chunk.js' //chunk 생성 설정
},
모듈: {
로더스: [ //로더, 각 로더의 파라미터 설정에 대해 구글을 통해 검색할 수 있습니다.
{
test: /.css$/,
//css의 추출기, 로더를 설정합니다.-loader'는 생략할 수 있습니다
loader: ExtractTextPlugin.extract('style-loader', 'css-loader)
test: /.less$/,
//less의 추출기, 로더를 설정합니다. 중간 !에 대해 설명이 필요합니다.
//오른쪽에서 왼쪽으로의 순서로less, css 로더를 차례대로 호출하여, 이전의 출력은 다음의 입력이 됩니다
//당신은 자신의 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:data를 설정하면-src를 모두 처리할 수 있습니다-src를 참조하는 자원을 다루면 다음과 같이 됩니다
test: /.html$/,
로더: "html?attrs=img:src img:data-src"
//파일 로더는 정적 자원을 처리합니다
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.0-9]\.0-9))?$/,
로더: '파일-loader?name=./fonts/[이름].[확장자]"
//이미지 로더, 파일과 동일-로더는 이미지에 더 적합합니다. 작은 이미지를 base로 변환할 수 있습니다64，http 요청을 줄입니다
//如下配置，小于8192바이트의 이미지를 base로 변환합니다64코드
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'), //CSS를 단독으로 link 태그를 사용하여 로드하고 경로를 설정합니다. 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-서버, 개발 효율성을 높입니다
// devServer: {
// contentBase: '.',/',
// host: 'localhost',
// port: 9090, //기본8080
// inline: true, //js 변화를 모니터링할 수 있습니다
// hot: true, //핫 시작
// }
};
좋아요, 이러한 설정을 완료한 후 webpack 패키지 명령어를 실행하여 프로젝트 패키지를 완료합니다.
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
이때, views 디렉토리 아래로 이동하여 생성된 index.html 파일을 확인하세요. 예를 들어:
<!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>
생성된 파일은 원래 템플릿의 내용을 유지하면서도, index.js 파일의 정의에 따라 필요한 CSS와 JS 파일, favicon을 자동으로 추가하고, 또한 해당 hash 값을 추가합니다.
두 가지 문제
var path = require('path');
var webpack = require('webpack');
var glob = require('glob');
/*
extract-text-webpack-plugin 플러그인
이 플러그인을 사용하면 스타일을 별도의 CSS 파일로 추출할 수 있습니다.
엄마가 더 이상 스타일이 JS 파일에打包될 걱정을 안할 필요가 없다.
*/
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
html-webpack-plugin 플러그인, 워크백에서 HTML을 생성하는 중요한 플러그인
자세히 확인할 수 있는 곳 https://www.npmjs.com/package/html-webpack-plugin
*/
var HtmlWebpackPlugin = require('html-webpack-plugin');
/**
*공통 모듈을 추출하여 'commons' chunk을 생성합니다
*/
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
//축소
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
//개발 모드�断별
var debug = process.env.NODE_ENV !== 'production';
var getEntry = function(globPath, pathDir) {
var files = glob.sync(globPath);
var entries = {},
entry, dirname, basename, pathname, extname;
for (var i = 0; i < files.length; i++) {
entry = files[i];
dirname = path.dirname(entry); //파일 디렉토리
extname = path.extname(entry); //확장자 이름
basename = path.basename(entry, extname); //파일 이름
pathname = path.join(dirname, basename);
pathname = pathDir & #63; pathname.replace(new RegExp('^', '')); + pathDir, '') : pathname;
entries[pathname] = ['./ + entry]; //이것은 osx 시스템에서 이렇게 씁니다 win7 entries[basename]
}
console.log(entries);
return entries;
}
//엔트리(모든 페이지 엔트리 파일을 getEntry 메서드를 통해 가져옵니다)
var entries = getEntry('src/js/page/**/*.js', 'src/js/page/');
//entries에서 공통 부분을 추출하는 것을 결정합니다
var chunks = Object.keys(entries);
//템플릿 페이지(모든 템플릿 페이지를 getEntry 메서드를 통해 가져옵니다)
var pages = Object.keys(getEntry('src/template/**/*.html', 'src/template/'));
console.log(pages)
var config = {
entry: entries,
output: {
path: path.join(__dirname, '.',/public/dist/'),//출력 디렉토리 설정, 템플릿, 스타일, 스크립트, 이미지 등의 자원 경로 설정은 이에 대한 상대 경로입니다
publicPath: '/dist/', //템플릿, 스타일, 스크립트, 이미지 등의 자원에 대한 서버 상의 경로
filename: 'js/[이름].js', //각 페이지에 해당하는 주 js 생성 설정
chunkFilename: 'js/[id].chunk.js?[chunkhash]' //chunk 생성 설정
},
모듈: {
로더스: [ //로더
{
test: /.css$/,
로더: ExtractTextPlugin.extract('style', 'css')
test: /.less$/,
로더: ExtractTextPlugin.extract('css!less')
test: /.html$/,
로더: "html?-최소화 //html을 압축하지 않도록,https://github.com/webpack/html-로더/이슈/50
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.0-9]\.0-9))?$/,
로더: '파일-loader?이름=글꼴/[이름].[확장자]"
test: /\.(png|jpe?g|gif)$/,
loader: 'url-loader?limit=8192&name=imgs/[name]-[hash].[ext]'
}
}),
},
plugins: [
new webpack.ProvidePlugin({ //jq를 로드합니다
$: 'jquery'
},
new CommonsChunkPlugin({
name: 'commons', // 공통 모듈을 추출하여 'commons' chunk을 생성합니다
chunks: chunks,
minChunks: chunks.length // 모든 entry가 공통으로 필요한 모듈을 추출합니다
},
new ExtractTextPlugin('css/[name].css'), //CSS를 단독으로 link 태그를 사용하여 로드하고 경로를 설정합니다. output 설정의 publickPath에 상대적으로
debug ? function() {} : new UglifyJsPlugin({ //코드 압축
compress: {
warnings: false
},
except: ['$super', '$', 'exports', 'require'] //제외 키워드
},
}),
};
pages.forEach(function(pathname) {
var conf = {
filename: '../../views/ + pathname + '.html', //생성된 HTML을 저장할 경로, path에 상대적으로
template: 'src/template/ + pathname + '.html', //HTML 템플릿 경로
inject: false, //js 삽입 위치, true/'head'/'body'/false
/*
* 이 부분에서는 html-minify를 설정하면 압축 중에 많은 HTML 문법 검사 문제가 발생할 수 있습니다.
* HTML 태그 속성에 {{...}} 표현식을 사용하면 많은 경우에 이 설정을 압축할 필요가 없습니다.
* 또한, UglifyJsPlugin은 코드를 압축할 때 함께 HTML을 압축합니다.
* HTML을 압축하지 않으려면 html-loader에 'html?-minimize'을 설정하면 loaders의 html-loader 설정.
*/
// minify: { //HTML 파일을 압축합니다
// removeComments: true, //HTML에서 주석을 제거합니다
// collapseWhitespace: false //비어 있는 공백 및 줄 바꿈을 제거합니다
// }
};
if (pathname in config.entry) {
favicon: '.',/src/favicon.ico', //favicon 경로, webpack을 통해 도입하고 hash 값을 생성할 수 있습니다
conf.inject = 'body';
conf.chunks = ['commons', pathname];
conf.hash = true;
}
config.plugins.push(new HtmlWebpackPlugin(conf));
});
module.exports = config;
아래의 코드는 위의 것과 비슷하지만, 모든 관련 파일을 하나의 객체에 모아 자동 로드 효과를 완성하는 메서드를 사용하는 것이 본질적인 차이입니다!
이것들은 모두 mac osx 시스템의 구성입니다. win7경로가 다를 수 있습니다
glob: 여기서 파싱된 것은 다릅니다:
하지만 최종
entries:
{
index: ['./src/template/index.js'],
page1: ['./src/template/page1.js']
}
pages:
['index', 'page1']
개인 컴퓨터의 구성에 따라 적절히 변경해야 합니다
이것이 이 문서의 전체 내용입니다. 많은 도움이 되길 바랍니다. 또한,呐喊 교재에 많은 지지를 부탁드립니다.
언급: 이 문서의 내용은 인터넷에서 가져왔으며, 원저자에게 속합니다. 인터넷 사용자가 자발적으로 기여하고 업로드한 내용이며, 이 사이트는 소유권을 가지지 않으며, 인공 편집을 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 위반이 의심되는 내용을 발견하면, notice#w로 이메일을 보내 주세요.3codebox.com에 이메일을 보내면 (#을 @으로 변경하십시오) 신고하시고 관련 증거를 제공하십시오. 실제로 확인되면, 이 사이트는 즉시 위반 내용을 제거합니다.