이 글은 주로 Vue 프로젝트 템플릿 파일 webpack 패키징 구성을 소개합니다. 필요한 친구들은 참고하시면 됩니다
1, github
github 주소: https://github.com/MengFangui/VueProjectTemplate
2. Webpack 구성
(1) 기본 구성 webpack.base.config.js
const path = require('path'); //处理共用、通用的js const webpack = require('webpack'); //css单独打包 const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { //入口文件 entry: { main: './src/main', vendors: './src/vendors' }, output: { path: path.join(__dirname, './dist') }, module: { rules: [ //vue单文件处理 { test: /\.vue$/, use: [{ loader: 'vue-loader', options: { loaders: { less: ExtractTextPlugin.extract({ //minimize 启用压缩 use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'], fallback: 'vue-style-loader' }), css: ExtractTextPlugin.extract({ use: ['css-loader', 'autoprefixer-loader', 'less-loader'], fallback: 'vue-style-loader' }) } } }] }, //iview文件夹下的js编译处理 { test: /iview\/.*?js$/, loader: 'babel-loader' }, //js编译处理 { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, //css处理 { test: /\.css$/, use: ExtractTextPlugin.extract({ //minimize 启用压缩 use: ['css-loader?minimize', 'autoprefixer-loader'], fallback: 'style-loader' }) }, //less处理 { test: /\.less/, use: ExtractTextPlugin.extract({ use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'], fallback: 'style-loader' }) }, //图片处理 { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=1024' }, //实现资源复用 { test: /\.(html|tpl)$/, loader: 'html-loader' } ] }, resolve: { //自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名 extensions: ['.js', '.vue'], //模块别名定义,方便后续直接引用别名,无须多写长长的地址 alias: { 'vue': 'vue/dist/vue.esm.js' } } };
(2) 개발 환경 구성 webpack.dev.config.js
//处理共用、通用的js const webpack = require('webpack'); //处理html模板 const HtmlWebpackPlugin = require('html-webpack-plugin'); //css单独打包 const ExtractTextPlugin = require('extract-text-webpack-plugin'); //合并配置 const merge = require('webpack-merge'); const webpackBaseConfig = require('./webpack.base.config.js'); //fs模块用于对系统文件及目录进行读写操作 const fs = require('fs'); //编译前用node生成一个env.js的文件,用来标明当前是开发(development)还是生产环境(production) fs.open('./src/config/env.js', 'w', function(err, fd) { const buf = 'export default "development";'; fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {}); }); module.exports = merge(webpackBaseConfig, { //打包代码的同时生成一个sourcemap文件,并在打包文件的末尾添加//# souceURL,注释会告诉JS引擎原始文件位置 devtool: '#source-map', output: { //线上环境路径 publicPath: '/dist/', filename: '[name].js', chunkFilename: '[name].chunk.js' }, plugins: [ //css单独打包 new ExtractTextPlugin({ filename: '[name].css', allChunks: true }), //通用模块编译 new webpack.optimize.CommonsChunkPlugin({ //提取的公共块的块名称(chunk) name: 'vendors', //生成的通用的文件名 filename: 'vendors.js' }), new HtmlWebpackPlugin({ //输出文件 filename: '../index.html', //模板文件 template: './src/template/index.ejs', //不插入生成的 js 文件,只是单纯的生成一个 html 文件 inject: false }) ] });
(3) 온라인 환경 구성 webpack.prod. config.js
//处理共用、通用的js const webpack = require('webpack'); //处理html模板 const HtmlWebpackPlugin = require('html-webpack-plugin'); //css单独打包 const ExtractTextPlugin = require('extract-text-webpack-plugin'); //合并配置 const merge = require('webpack-merge'); const webpackBaseConfig = require('./webpack.base.config.js'); //fs模块用于对系统文件及目录进行读写操作 const fs = require('fs'); //编译前用node生成一个env.js的文件,用来标明当前是开发(development)还是生产环境(production) fs.open('./src/config/env.js', 'w', function (err, fd) { const buf = 'export default "production";'; fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer){}); }); module.exports = merge(webpackBaseConfig, { output: { //线上环境路径 publicPath: 'dist/', filename: '[name].[hash].js', chunkFilename: '[name].[hash].chunk.js' }, plugins: [ new ExtractTextPlugin({ //css单独打包 filename: '[name].[hash].css', allChunks: true }), //通用模块编译 new webpack.optimize.CommonsChunkPlugin({ //提取的公共块的块名称(chunk) name: 'vendors', //生成的通用的文件名 filename: 'vendors.[hash].js' }), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), //js压缩 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new HtmlWebpackPlugin({ //输出文件 filename: '../index_prod.html', //模板文件 template: './src/template/index.ejs', //不插入生成的 js 文件,只是单纯的生成一个 html 文件 inject: false }) ] });
(4) package.json 파일
{ "name": "iview-project", "version": "2.1.0", "description": "A base project with Vue.js2、Vue-Router、webpack2 and with iView2.", "main": "index.js", "scripts": { "init": "webpack --progress --config webpack.dev.config.js", "dev": "webpack-dev-server --content-base ./ --open --inline --hot --compress --history-api-fallback --config webpack.dev.config.js", "build": "webpack --progress --hide-modules --config webpack.prod.config.js" }, "repository": { "type": "git", "url": "git+https://github.com/iview/iview-project.git" }, "author": "Aresn", "license": "MIT", "dependencies": { "vue": "^2.2.6", "vue-router": "^2.2.1", "iview": "^2.0.0-rc.8" }, "devDependencies": { "autoprefixer-loader": "^2.0.0", "babel": "^6.23.0", "babel-core": "^6.23.1", "babel-loader": "^6.2.4", "babel-plugin-transform-runtime": "^6.12.0", "babel-preset-es2015": "^6.9.0", "babel-runtime": "^6.11.6", "css-loader": "^0.23.1", "extract-text-webpack-plugin": "^2.0.0", "file-loader": "^0.8.5", "html-loader": "^0.3.0", "html-webpack-plugin": "^2.28.0", "less": "^2.7.1", "less-loader": "^2.2.3", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "vue-hot-reload-api": "^1.3.3", "vue-html-loader": "^1.2.3", "vue-loader": "^11.0.0", "vue-style-loader": "^1.0.0", "vue-template-compiler": "^2.2.1", "webpack": "^2.2.1", "webpack-dev-server": "^2.4.1", "webpack-merge": "^3.0.0" }, "bugs": { "url": "https://github.com/iview/iview-project/issues" }, "homepage": "https://www.iviewui.com" }
ps: webpack을 사용하여 Vue 프로젝트를 패키징하는 방법을 알아볼까요?
1. nodejs 설치: 패키징을 위해 webpack을 사용하려면 npm이 필요합니다. npm(노드 패키지 관리자)은 nodejs의 패키지 관리자이며 노드 플러그인 관리(설치, 제거, 종속성 관리 등 포함)에 사용됩니다. )이므로 먼저 nodejs를 설치해야 합니다. 설치가 완료된 후 npm -v를 사용하여 설치가 완료되었는지 확인하세요.
2. cnpm 설치(이 단계는 필요하지 않음): npm 설치 플러그가 필요하기 때문입니다. in은 외국 웹사이트에서 다운로드되기 때문에 네트워크 영향으로 쉽게 나타날 수 있습니다. 예외적으로 cnpm은 완전한 npmjs.org 미러입니다. 동기화 빈도는 현재 1회입니다. 공식 서비스와 최대한 동기화되도록 10분 간격으로 진행됩니다. npm install -g cnpm --registry=https://registry.npm.taobao.org를 사용하여 설치한 다음 npm 대신 cnpm을 사용할 수 있습니다.
3 vue-cli 스캐폴딩을 전역적으로 설치합니다. npm install -g vue-cli(-g를 추가하지 않고 현재 디렉터리에 설치, -g를 사용하여 시스템의 노드 디렉터리에 설치), vue -V를 사용하여 webpack을 기반으로 새 프로젝트를 만듭니다. 템플릿(템플릿 다운로드), vue init webpack my-project(프로젝트 폴더 이름)를 사용하면 vue 템플릿이 다운로드됩니다.
5.cd my-project를 사용하여 npm install을 사용하세요. package.json 파일을 설치하는 명령은 프런트엔드 프로젝트의 종속성에 따라 관련 구성 요소를 다운로드하여 프로젝트 디렉터리의 node_modules 폴더에 저장합니다.
6. npm run dev 명령을 사용하여 프로젝트를 시작합니다(dev는 package.json 파일 중간에 구성되어 있음).
위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.
관련 기사:
Angular를 사용하여 국제화를 구현하는 방법(상세 튜토리얼) JQuery를 사용하여 양식 유효성 검사를 구현하는 방법, 구체적으로 무엇을 해야 합니까? Vue를 사용하여 여러 클래스를 설정하는 방법위 내용은 웹팩 패키징 구성(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!