손잡이 가르쳐줄게요.

12272 단어
저는 cli가 만든 vue 프로젝트가 하나 있는데 여러 페이지 응용 프로그램을 만들고 싶어요. 어떡해요. 쓸데없는 말은 하지 않고 바로 훑어볼게요.
약속: 새 코드 부분은//add와//end 사이에서 삭제(주석) 코드 부분은//del과/end 사이에서 많은 것들이 주석에 적혀 있습니다
첫 번째 단계: vue 프로젝트 cli
새 vue 프로젝트, 홈페이지:
vue init webpack demo
cli는 기본적으로 웹 패키지의 dev-server 서비스를 사용합니다. 이 서비스는 한 페이지를 만들 수 없습니다. 사복을 수동으로 만들어야 합니다. 보통 dev.server나 dev.client라고 부릅니다.
2단계: 출구 입구 파일을 처리하는 두 가지 방법을 추가합니다(SPA는 기본적으로 죽은 것으로 작성됨)
방금 만든 vue 프로젝트를 시작하려면:
cd demo

디렉터리 아래에서 ·build/utils를 찾습니다.js·파일, 부분utils.js:
'use strict'

const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
//add
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');
   //  :  html   js    js  html
const pagePath = path. resolve(__dirname, '../src/views/' );
  //     ,       views,                 src   views        
//end 
exports. assetsPath = function(_path) {
    const assetsSubDirectory = process.env.NODE_ENV ==='production'
        ?config.build.assetsSubDirectory
        : config.dev.assetsSubDirectory
    return path posix.join(assetsSubDirectory,_path)
}
exports.cssLoaders = function (options) {
    options = options || {}
    const cssLoader = {
       loader: 'css-loader',
       options:  {
           sourceMap: options.sourceMap
      }
  }
const postcssLoader = {
    loader: 'postcss-loader',
    options: {
         sourceMap: options.sourceMap
    }
}
// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    if (loader) {
       loaders.push({ 
          loader:  loader + '-loader',
          options: Object.assign({}, loaderOptions, {
              sourceMap: options. sourceMap
             })
      })
}
  // Extract CSS when that option is specified
  // (which is the case during production build)
  if (options.extract) {
      return ExtractTextPlugin.extract({
          use: loaders,
          fallback: 'vue-style-loader'
      })
  } else {
       return [ 'vue-style-loader' ].concat(loaders)    
  }
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
   return {
      css: generateLoaders(),
      postcss: generateLoaders(),
      less: generateLoaders('less'),
      sass: generateLoaders('sass', { indentedSyntax: true }), 
      scss: generateLoaders('sass'),
      stylus: generateLoaders('stylus'),
      styl: generateLoaders('stylus')
    }
}
// Generate loaders for standalone style files (outside of .vue)
exports. styleLoaders = function (options) {
    const output = []
    const loaders = exports. cssLoaders(options)
    for (const extension in loaders) {
        const loader = loaders[extension]
        output. push({
            test: new RegExp('\\.' + extension + '$' ),
            use: loader
        })
  }
  return output
}
exports. createNotifierCallback = () => {
    const notifier = require('node-notifier')
    return ( severity, errors) => {
      if (severity !== 'error') return
      const error = errors[ 0 ]
      const filename = error. file && error. file. split('!').pop()
      notifier.notify({
         title: packageConfig.name,
         message: severity + ': ' + error.name,
         subtitle: filename || ' ',
         icon: path. join(__dirname, 'logo.png')
       })
    }
}
//add              (           ,          )
exports. createEntry = () => {
   let files = glob. sync(pagePath + '/**/*.js');
   let entries = {};
   let basename;
   let foldername;
   files. forEach(entry => {
      // Filter the router.js
        basename = path. basename(entry, path. extname(entry), 'router.js');
        foldername = path.dirname(entry).split('/'). splice(-1)[0];
          // If foldername not equal basename, doing nothing
          // The folder maybe contain more js files, but only the same name is main
         if (basename === foldername) {
           entries[basename] = [
                'webpack-hot-middleware/clientnoInfo=true&reload=true&path=/__webpack_hmr&timeout=20000',
                 entry];
         }
     });
    return entries;
};
//end
//add      
exports. createHtmlWebpackPlugin = () => {
let files = glob sync(pagePath + '/**/*.html', {matchBase: true});
let entries = exports.createEntry();
let plugins = [];
let conf;
let basename;
let foldername;

files.forEach(file => {
 basename = path. basename(file, path. extname(file));
 foldername = path. dirname(file). split('/'). splice(-1). join(' ');    
  if ( basename === foldername) {
      conf = { 
          template: file,
          filename: basename + '.html',
          inject: true,
          chunks: entries [basename] ? [basename]: []
         };
        if (process. env. NODE_ENV  !== 'development') {
             conf. chunksSortMode = 'dependency' ;
             conf minify = {removeComments: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true
           };   
       }
       plugins. push(new HtmlWebpackPlugin(conf));
    }
  });
  return plugins;
};
//end

3단계: 사복 만들기(dev-server 서비스를 사용하지 않고 직접 만들기)
express에서 새 사복을 만들고 설정하기 (build 폴더에서 새로 만듭니다. 웹팩.dev.client.js) 웹팩이라고 합니다.dev.client.js:
'use strict';
const fs = require('fs');
const path = require('path');
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
   //    (      views    )
const webpackHotMiddleware = require('webpack-hot-middleware');
   //   
const config = require('../config');
const devWebpackConfig = require('./webpack.dev.conf');
const proxyMiddleware = require('http-proxy-middleware');
   //  
const proxyTable = config.dev.proxyTable;
const PORT = config. dev. port;
const HOST = config. dev. host;
const assetsRoot = config. dev.assetsRoot;
const app = express();
const router = express. Router();
const compiler = webpack(devWebpackConfig);
let devMiddleware  = webpackDevMiddleware(compiler, {
   publicPath: devWebpackConfig. output. publicPath,
   quiet: true,
   stats: {
      colors: true,
      chunks: false
    }
});
let hotMiddleware = webpackHotMiddleware(compiler, {
  path: '/__webpack_hmr', 
  heartbeat: 2000
});
app.use(hotMiddleware);
app.use(devMiddleware);
Object.keys(proxyTable). forEach(function (context) {
    let  options = proxyTable[context];
    if (typeof options === 'string') {
       options = {
         target: options
       };
   }
    app. use(proxyMiddleware(context, options));
});
//                    vue            
app. use(router)
app. use('/static', express. static(path. join(assetsRoot, 'static')));
let sendFile = (viewname, response, next) => { 
    compiler. outputFileSystem. readFile(viewname,(err, result) => {
        if(err) {
           return (next (err));
        }
        response.set('content-type', 'text/html');
        response.send(result);
        response. end();
      });
};
//    
function pathJoin(patz) {
    return path.join(assetsRoot, patz);
}
/**
 *     (      vue  )
 * */
// favicon
router. get('/favicon.ico', (req, res, next) => {
    res.end();
});
// http://localhost:8080/
router. get('/',(req, res, next)=>{
    sendFile(pathJoin ('index.html'), res, next);
});
// http://localhost:8080/home
router. get('/:home',(req, res, next) => {
    sendFile( pathJoin ( req. params. home + '.html'), res, next);
});
// http://localhost:8080/index
router. get('/:index',(req, res, next) => { sendFile ( pathJoin( req. params. index +'.html'), res, next);
});
module. exports = app. listen(PORT, err => {
    if (err){    
       return
     }
  console.log(`Listening at http://${HOST}:${PORT}
`); })

사복이 만들어져서 의존을 설치합니다.구덩이가 있다.
웹팩이랑 핫로드 버전이 너무 높고 낮아도 안 돼요.
npm install [email protected] --save-dev
npm install webpack-dev-middleware --save-dev
npm install [email protected] --save-dev
npm install http-proxy-middleware --save-dev

4단계: 설정 수정 웹팩.base.conf.js:
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
    module:{
         rules: utils. styleLoaders({ sourceMap: config.dev. cssSourceMap. usePostCSS: true })  
},
// cheap-module-eval-source-map is faster for development
  devtool:
  config.dev.devtool,
    // these devServer options should be customized in /config/index.js
  devServer: {
     clientLogLevel:'warning', 
     historyApiFallback: {
         rewrites: [
                { from: /.*/, to: path. posix.join(config. dev. assetsPublicPath, 'index.html')},
          ],
  },
  hot:true, 
  contentBase: false,
  // since we use CopyWebpackPlugin.
  compress: true,
  host: HOST || config. dev. host,
  port:PORT || config. dev. port, open:
 config. dev. autoOpenBrowser, overlay:
 config. dev.errorOverlay    
    ? { warnings: false,  errors: true}
     : false, 
  publicPath: config. dev. assetsPublicPath,
  proxy: config. dev.proxyTable,
  quiet: true, // necessary for FriendlyErrorsPlugin
  watchOptions: {
       poll: config. dev. poll,
  }
},
plugins: [ 
  new webpack. DefinePlugin({  'process.env': require('../config/dev.env')    
}),
new webpack. HotModuleReplacementPlugin(),
new webpack. NamedModulesPlugin(),
// HMR shows correct file names in console on update.
new webpack. NoEmitOnErrorsPlugin(), 
// https://github.com/ampedandwired/html-webpack-plugin
//del      spa                 
 
// new HtmlWebpackPlugin({
    
//   filename: 'index.html',
    
//   template: 'index.html',
    
//   inject: true
 
// }),
  
//end

// copy custom static assets

new CopyWebpackPlugin([
      {
          from: path. resolve(__dirname,  '../static'),
          to: config. dev. assetsSubDirectory,
          ignore:['.*']     
       }   
  ])
]

//add

.concat(utils. createHtmlWebpackPlugin ())
//end
})
//del


webpack.dev.conf.js:
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require( './webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require( 'portfinder')
const HOST = process env.HOST
const PORT = process.env.PORT &&Number (process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
    module: {  rules: utils. styleLoaders({ sourceMap: config.dev.cssSourceMapusePostCSS: true})  
},
// cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool, 
// these devServer options should be customized in /config/index.js
//del    SPA    


좋은 웹페이지 즐겨찾기