webpack을 사용하여 vue.js 단일 페이지 애플리케이션을 구축하는 방법
- 伊谢尔伦원래의
- 2016-11-21 13:09:391605검색
현재 개발중인 프로젝트에서는 프론트엔드와 백엔드의 별도 개발을 이루기 위해 최근 출시된 vue.js 2.0과 koa 2.0을 사용하기로 하였고, webpack을 프런트엔드 패키징 도구에 대해 자세히 알아보세요. 웹팩을 더 잘 익히기 위해 연습을 통해 웹팩에 대한 이해를 강화할 계획입니다. 다음으로, 우리는 심층적인 연습을 하고 개발 과정에서 관련 기술에 대한 일련의 기사를 작성할 것입니다.
이 글의 주요 목적은 프로젝트 개발 및 자체 실습에서 webpack의 사용을 요약하는 것입니다. 이 기사에서는 vue.js 단일 페이지 프런트엔드 애플리케이션을 개발할 때 패키징을 위해 webpack을 사용하는 방법을 소개합니다. 이 기사는 또한 이전 반응 기사 시리즈의 연속입니다.
전체 데모로서 기사 시리즈의 전체 프로젝트는 파일 업로드 및 관리를 위한 단일 페이지 웹 애플리케이션을 구현합니다.
1 종속성 패키지 설치
다음에서 사용됩니다. 프로젝트 vue.js, webpack, gulp, Ele.me의 오픈소스 elementUI를 사용합니다. es2015를 사용하기 때문에 es6 js 코드를 es5로 변환하려면 babel을 도입해야 합니다.
반드시 사용해야 하는 의존성은 다음과 같습니다
"dependencies": {
"babel-core": "^6.18.2",
"babel-preset-es2015": "^6.18.0",
"config": "^1.24.0",
"element-ui": "^1.0.0",
"es6-promise": "^4.0.5",
"vue": "^2.0.5",
"vue-router": "^2.0.1"
},
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-loader": "^6.2.7",
"vue-loader": "^9.8.1",
"style-loader": "^0.13.1",
"extract-text-webpack-plugin": "^1.0.1",
"gulp": "^3.9.1",
"webpack": "^1.13.3",
},또한 gulp-cli, webpack, babel-cli, npm install -g webpack의 경우 전역 설치를 사용하는 것이 가장 좋습니다. , 명령줄에서 편리하게 사용할 수 있는 사용법 명령입니다. 또한, npm의 설치 및 다운로드 속도도 비판적인 문제입니다. 종속 패키지 설치 속도를 향상시키기 위해 현재 cnpm을 직접 설치할 수 있습니다.
2 webpack 구성 파일
dependency 패키지를 설치한 후 webpack 명령을 사용하여 직접 패키징할 수 있으며 webpacke.config.js 구성 파일을 통해 어떤 규칙에 따라 webpack을 지시할 수 있습니다. 그것은 건설되어야합니다.
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: "./client/main.js",
resolve: {
extensions: ['', '.js', '.vue', '.scss','.css'],
},
output: {
path: path.join(__dirname, "./build/assets/"),
filename: '[name].[chunkhash:8].js',
chunkFilename: '[id].js',
publicPath: '/assets/',
},
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue'},
{
test: /\.js$/,
exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-API\//,
loader: 'babel'
}
]
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({
names: ['bundle']
}),
]
};
설명:
항목: 진입점, webpack은 진입점에서 설정된 js 파일에서 프로젝트 빌드를 시작합니다. 프로세스 중에 모든 진입점은 가져오기를 통과합니다. 또는 require 종속 패키지는 출력에 지정된 파일과 경로로 패키징됩니다.
출력: 패키징된 파일의 출력 경로와 파일 이름을 설정합니다.
모듈: 주로 로더, 로더는 패키징을 위해 webpack에서 사용하는 파서. CSS, vue, babel 및 scss는 모두 npm을 사용하여 해당 로더를 설치해야 webpack이 이 형식의 파일을 구문 분석하고 처리할 수 있습니다.
플러그인: webpack 패키징 중 일부 구문 분석된 언어에 관계없이 플러그인은 구성을 지원하고 풍부한 추가 기능을 제공하는 데 사용됩니다.
3 파일 파싱
항목부터 종속 모듈을 파싱하는 과정에서 webpack은 css, sass를 지원하며 사용되는 다양한 외부 글꼴 파일은 Webpack 자체에 모두 내장되어 있지는 않습니다. 프로젝트의 실제 요구에 따라 다양한 로더를 설치하고 구성하여 처리 기능을 달성하고 웹팩은 다양한 애플리케이션을 구문 분석하고 패키징할 수 있습니다.
es6 코드를 es5로 컴파일하는 것도 babel-loader를 설치하여 수행됩니다. 템플릿/스크립트/스타일을 파일에 넣는 vue.js의 구문을 구문 분석하려면 vue-loader도 필요합니다.
style-loader, css-loader, sass-loader를 사용하여 webpack은 scss 파일을 구문 분석하는 기능을 가질 수 있습니다. 다음 예에서 볼 수 있듯이 로더의 구문은 다양한 방법으로 작성할 수 있습니다.
loaders: [
{ test: /\.vue$/, loader: 'vue'},
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.js$/,
exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
loader: 'babel'
},
{
test : /\.(ttf|eot|svg|svg|woff|woff(2))(\?t\=[0-9]+)?$/,
loader : 'file'
}
] 4 맞춤형 패키징 규칙
실제 프로젝트 요구 사항에 따라 일부 웹팩 플러그를 사용합니다. gulp나 grunt를 따로 사용하지 않고도 ins를 조합하면 강력한 기능을 구현할 수 있습니다.
4.1 해시 지문 생성
프런트엔드 정적 리소스의 증분 업데이트를 수행하려면 webpack에 포함된 기능을 사용하여 생성된 파일을 설정하여 번들 파일에 대한 해시 지문을 생성합니다. 출력 규칙의 이름은 해시 지문이 포함된 번들 파일을 생성하는 데 사용될 수 있습니다. 예는 다음과 같습니다.
output:{
...
//filename: '[name].[hash:8].js',
filename: '[name].[chunkhash:8].js',
//filename: '[name].[contenthash:8].js',
...
} Webpack은 hash/chunkhash/contenthash의 3세대 규칙을 제공합니다. [hash:8]의 8은 해시의 자릿수입니다.
Hash: 컴파일 시간 리소스에 해당하는 컴파일 프로세스를 기반으로 해시 값을 계산
Chunkhash: 모듈 내용을 기반으로 해시 값을 계산
Contenthash: 계산 파일 내용을 기반으로 한 해시 값
4.2 독립적인 js 종속성 패키지를 공급업체에 패키징
프로젝트에서 require를 지원하지 않는 jquery, bootstrap, fetch 또는 기타 js 파일을 사용하는 경우 webpack을 사용하여 이러한 파일을 별도의 공급업체 파일로 패키징하여 정적 파일의 배포 및 로드를 최적화할 수 있습니다.
이 작업은 다른 모듈로 패키지된 CommonsChunkPlugin 플러그인을 사용하여 항목에서 구성하여 수행됩니다. 구성은 다음과 같습니다.
...
entry: {
Bundle: ['./client/main.js'],
// 규칙은 다음과 같습니다. 참조 필요
공급업체: ['whatwg-fetch','jquery']
},
...
플러그인:[
new webpack.optimize.CommonsChunkPlugin({
이름: ['bundle','vendor']
}),
]
...
코드 복사
4.3 将样式打包成独立的css文件
同样是因为部署的需要，我们可以使用 ExtractTextPlugin 插件，将引用到的样式打包成单独的css或其他样式文件；同样可以生成hash指纹。
...
module: {
loaders: [
...
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.scss$/,
loaders: ExtractTextPlugin.extract("style-loader", "css-loader","sass-loader")
}
...
]
},
...
plugins:[
new ExtractTextPlugin("[name].[contenthash:8].css", {
allChunks: true
}),
]
... 4.4 在html文件中引入带hash指纹的bundle文件
最后我们需要类似gulp-rev的功能，自动在html文件中，引入打包编译好的带hash指纹的bundle和vendor文件；这个过程可以由webpack自动完成，使用的是 HtmlWebpackPlugin 插件。如果需要对js文件进行压缩，可以使用 UglifyJsPlugin 插件，插件配置如下：
plugins:[
...
new HtmlWebpackPlugin({
title: 'My App',
template: 'index.html',
filename: '../index.html'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
] 5 配合gulp使用
除了使用之前的gulp-webpack插件，还可以直接在gulp中require('webpack')的方式，来配合gulp使用webpack。配置比较简单
webpack(require("./webpack.config.js"), function(err, stats) {
if(err) throw new gutil.PluginError("webpack:build", err);
gutil.log("[webpack:build]", stats.toString({
colors: true
}));
callback();
});6 源代码
最后，整个项目的源代码在 github 上；稍后的其他文章，会跟项目同时更新。
// 使用gulp调用webpack打包，打包好的代码在build目录下 npm run build // 运行有watch自动刷新触发webpack编译的静态服务器 // http://localhost:3333 npm run dev