웹팩 프로젝트 구성 정보

이 글은 주로 다중 페이지 Vue 프로젝트의 webpack 컴파일 구성 문제에 대한 자세한 설명을 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 공유하고 참고하겠습니다. 에디터를 따라가서 살펴보겠습니다

이 글에서는 주로 다중 페이지 Vue 프로젝트를 컴파일하는 웹팩의 구성 문제를 소개하고 이를 모든 사람과 공유합니다.

일반적으로 Vue 프로젝트를 빌드하는 단계는 다음과 같습니다.

1. nodejs 환경 설치

2, vue-cli

cnpm install vue-cli -g

3 설치, vue 프로젝트

vue init webpack-simple vue-cli-multipage-demo

4 빌드, 프로젝트 종속성 패키지

cnpm install

5 설치, 개발 환경에서 프로젝트 실행:

npm run dev

위의 단계를 통해 간단하게 vue 프로젝트의 개발 환경은 기본적으로 설정되었으며, 다음 단계는 코드를 작성하는 것입니다.

최근 프론트엔드 코드를 리팩토링할 때 이 스캐폴딩을 사용하여 빌드한 프로젝트가 내 요구 사항을 충족할 수 없다는 문제를 발견했습니다. 실제로 이 요구 사항은 Vue가 개발하는 단일 페이지의 원래 의도와 약간 반대됩니다. 응용 프로그램(SPA), 여기에서는 여러 페이지의 효과를 얻으려면 그 사람이 필요합니다. 그것은 무엇을 의미합니까? 예를 들어, 웹 페이지를 개발할 때 때때로 링크를 클릭하면 브라우저가 새 탭 페이지를 열어 콘텐츠를 표시합니다. 이때 새로 열린 페이지는 실제로 이미 여러 페이지입니다. (SPA)은 실제로 라우팅을 사용하여 기본 페이지에 여러 페이지를 표시하기 전에는 우리에게 속하지 않습니다. 다만, 이번에 새롭게 오픈된 페이지는 메인페이지와 분리되었습니다.

vue-cli 스캐폴딩을 통해 구축된 프로젝트의 webpack 구성 파일은 단일 페이지 애플리케이션 개발을 지원합니다. 그리고 결국 한 페이지만 생산될 것이다. 내 요구 사항을 충족하고 동시에 여러 페이지에 편리하게 webpack을 만들 수 있습니까? 실제로 webpack을 약간만 수정하면 괜찮습니다.

먼저 빌드 파일 아래 utils.js 파일의 폴더에 있는 파일 경로를 가져오는 메소드를 추가해야 합니다. 이 메소드는 대상 파일을 객체 형태로 구문 분석합니다.
utils.js

var glob = require("glob");//分析文件夹中文件路径的第三方模块
exports.getEntry = function(globPath) {
 var entries = {},
 basename, tmp, pathname;
 if (typeof (globPath) != "object") {
 globPath = [globPath]
 }
 globPath.forEach((itemPath) => {
 glob.sync(itemPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  if (entry.split('/').length > 4) {
  tmp = entry.split('/').splice(-3);
  pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
  entries[pathname] = entry;
  } else {
  entries[basename] = entry;
  }
 });
 });
 return entries;
}

그런 다음 wenpack.base.conf.js 파일을 수정하고 원본 파일은 단일 파일입니다. 이제 단일 파일 항목을 다중 파일 항목으로 변경해야 합니다.

webpack.dev.conf.js

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
var glob = require('glob');
var entries = utils.getEntry(['./src/module/**/*.js']); // 获得多页面的入口js文件
var env = process.env.NODE_ENV
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
module.exports = {
 entry: entries,//这是通过前面新增的方法获取的文件路径对象
 output: {
 path: config.build.assetsRoot,
 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
 filename: '[name].js'
 }
 ...
}

여기서 webpack.dev 및 conf.js 파일을 수정해야 합니다. 여기에서 원래 구성된 홈페이지를 수정하는 것이 주요 목적입니다.

webpack. dev.conf.js

var path = require('path');
var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var utils = require('./utils')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
 baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
 ...
});
//新增
var pages =utils.getEntry(['./src/module/*.html','./src/module/**/*.html']);
for (var pathname in pages) {
 // 配置生成的html文件，定义路径等
 var conf = {
 filename: pathname + '.html',
 template: pages[pathname], // 模板路径
 inject: true,    // js插入位置
 chunksSortMode: 'dependency'
 };
 if (pathname in module.exports.entry) {
 conf.chunks = ['manifest', 'vendor', pathname];
 conf.hash = true;
 }
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

여기서 새로운 HtmlWebpackPlugin의 conf 객체를 변경하면 원래 구성은 단일 html이었는데, 이제 페이지 객체를 반복하여 여러 html 구성 객체가 생성됩니다.

위 구성을 통해 npm run dev를 실행하면 webpack은 여러 페이지를 동시에 활성화한 후 wenpack.base.conf.js에 구성된 js 파일을 해당 html 페이지에 삽입할 수 있습니다.

이제 npm run dev 프로젝트를 실행하면 다른 페이지에 액세스할 수 있습니다. 여기서는 여러 페이지를 관리해야 하기 때문에 src 아래에 특별히 다른 페이지에 액세스할 수 있는 디렉터리를 만들어야 한다는 점에 유의해야 합니다. 이렇게 하면 프로젝트 구조가 더 명확해 보이고 유지 관리가 더 쉬워집니다.

제가 작성한 데모 주소입니다. 관심 있으신 분은 내려서 vue-cli-multi-page를 살펴보시면 됩니다.

실행 후 http://localhost:8080/module/index를 방문해 주세요. .html을 클릭한 다음 새 페이지 열기 버튼을 클릭합니다.

위 구성은 개발 환경에만 해당됩니다. 마지막으로 프로덕션 환경의 구성 파일인 webpack.prod.conf.js도 프로덕션 중에 dist에 여러 개의 html 파일이 동시에 생성될 수 있도록 수정해야 합니다. 포장.

webpack.prod.conf:

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CleanPlugin = require('clean-webpack-plugin')//webpack插件，用于清除目录文件
var env = config.build.env
var webpackConfig = merge(baseWebpackConfig, {
...
}
//这里是修改的部分，和webpack.dev.conf.js的修改是一样的
module.exports = webpackConfig
var pages =utils.getEntry(['./src/module/**/*.html']);
for (var pathname in pages) {
 // 配置生成的html文件，定义路径等
 var conf = {
 filename: pathname + '.html',//生成 html 文件的文件名
 template: pages[pathname], // 根据自己的指定的模板文件来生成特定的 html 文件。这里的模板类型可以是任意你喜欢的模板，可以是 html, jade, ejs, hbs, 等等，但是要注意的是，使用自定义的模板文件时，需要提前安装对应的 loader，
 inject: true,    // 注入选项。有四个选项值 true, body, head, false.true:默认值，script标签位于html文件的 body 底部,body:同 true,head:script 标签位于 head 标签内,false:不插入生成的 js 文件，只是单纯的生成一个 html 文件
 // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 chunksSortMode: 'dependency'
 };
 if (pathname in module.exports.entry) {
 conf.chunks = ['manifest', 'vendor', pathname];
 conf.hash = true;
 }
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vuejs에서 모듈식으로 개발

VUE에서 배열 업데이트 기능을 구현하는 방법

Vue 프로젝트를 최적화할 때 주의해야 할 사항은 무엇인가요?

위 내용은 웹팩 프로젝트 구성 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!