webpack+vueページ構築概要
4760 ワード
webpack+vueページを利用した説明
使用プラットフォーム:win 7(その他のプラットフォームは自分で関連参考資料を調べてください)
インストールサービス:nodejsをローカルサービスとしてインストールし、対応するnodejsをダウンロードしてインストールした後、cmdコマンドラインにnode-vを入力し、対応するバージョン番号の戻りがあるかどうかを検出して、インストールの成功を確認します.
管理パッケージツールnpm:npm nodejsの下のツール管理パッケージをインストールし、新版のnodejsにnpmが集積されています.インストールに成功した後、cmdコマンドラインにnpm-vを入力し、対応するバージョン番号があるかどうかを確認して、インストールの成功を確認します.
プロジェクト構築: 1.プロジェクトフォルダを作成します. 2.package.jsonファイルを作成する:プロジェクトフォルダを再作成し、このディレクトリに入り、このディレクトリの下でコマンドnpm initを入力してから対応する変更項目の名前と作成者の関連情報を入力します.(もし関連した修正がないなら、ずっと車に戻ってもいいです.)
4.webpack.co nfig.jsの構成(以下は参考とする)は、自分の必要に応じて調整することができます.
使用プラットフォーム:win 7(その他のプラットフォームは自分で関連参考資料を調べてください)
インストールサービス:nodejsをローカルサービスとしてインストールし、対応するnodejsをダウンロードしてインストールした後、cmdコマンドラインにnode-vを入力し、対応するバージョン番号の戻りがあるかどうかを検出して、インストールの成功を確認します.
管理パッケージツールnpm:npm nodejsの下のツール管理パッケージをインストールし、新版のnodejsにnpmが集積されています.インストールに成功した後、cmdコマンドラインにnpm-vを入力し、対応するバージョン番号があるかどうかを確認して、インストールの成功を確認します.
プロジェクト構築: 1.プロジェクトフォルダを作成します. 2.package.jsonファイルを作成する:プロジェクトフォルダを再作成し、このディレクトリに入り、このディレクトリの下でコマンドnpm initを入力してから対応する変更項目の名前と作成者の関連情報を入力します.(もし関連した修正がないなら、ずっと車に戻ってもいいです.)
name:""//
version:"<1.0.0>"//
description:""//
entry point://
author:""//
license:// (isc ， )
"dependencies": {
"vue": "^1.0.28",
"vue-router": "^0.7.13"
},
"devDependencies": {
"autoprefixer-loader": "^2.0.0",
"babel": "^6.3.13",
"babel-core": "^6.3.21",
"babel-loader": "^6.2.0",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-preset-es2015": "^6.18.0",
"babel-runtime": "^5.8.34",
"css-loader": "^0.16.0",
"file-loader": "^0.8.5",
"html-loader": "^0.3.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"node-sass": "^3.4.2",
"style-loader": "^0.12.3",
"url-loader": "^0.5.6",
"vue-html-loader": "^1.2.0",
"vue-loader": "^7.2.0",
"webpack": "^1.12.0",
"webpack-dev-server": "^1.14.0"
}
4.webpack.co nfig.jsの構成(以下は参考とする)は、自分の必要に応じて調整することができます.
var path = require('path');
var webpack = require('webpack');
// NodeJS Path ， ， 。
//
module.exports = {
// ， ，
entry: './src/main',
//
output: {
path: path.join(__dirname, './dist'),
// ，
filename: '[name].js',
//[name] webpack
publicPath: './dist/'
//
},
// ， !
devServer: {
historyApiFallback: true,
hot: false,
inline: true,
grogress: true,
},
//
module: {
//
loaders: [
// .vue
{ test: /\.vue$/, loader: 'vue'},
// ES6
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
//{ test: /\.js$/, loader: 'babel'},
// css css
{ test: /\.css$/, loader: 'style!css!autoprefixer'},
//.less ，less ！
//install css-loader style-loader less-loader --save-dev
{ test: /\.less$/, loader: 'style!css!less?sourceMap'},
// ， 8K base64
{ test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
//html ？
//{ test: /\.(html|tpl)$/, loader: 'html-loader' },
]
},
// .vue 。 ， --
vue: {
loaders: {
css: 'style!css!less!autoprefixer',
}
},
// es5
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
},
resolve: {
// require ， ：require('module') module.js
extensions: ['', '.js', '.vue'],
// ，
alias: {
filter: path.join(__dirname, './src/filters'),
components: path.join(__dirname, './src/components')
}
},
// source-map，webpack source-map，
//devtool: 'eval-source-map'
devtool: 'cheap-source-map'
};