WebPACKの手動Vueのプロジェクトをビルドします
プロジェクトを初期化します
新しいディレクトリを作成し、プロジェクトを初期化します
npm init
复制代码
以下は、package.jsonに依存して追加されました
// dependencies是指在使用npm i -save [modules] 的时候安装的,执行 npm install --production 的时候会安装
"dependencies": {
"vue": "^2.6.10"
},
// devDependencies是指在使用npm i -save-dev [modules] 的时候安装的,执行 npm install --production 的时候不会安装
"devDependencies": {
// 安装babel相关的
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
// 插件:每次build的时候清空旧文件
"clean-webpack-plugin": "^3.0.0",
// css处理
"css-loader": "^2.1.1",
// 处理CSS兼容
"postcss-loader": "^3.0.0",
"autoprefixer": "^9.6.0",
// 添加sass支持
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
// 插件
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
// 添加webpack打包
"webpack": "^4.33.0",
"webpack-cli": "^3.3.3",
// 提供web容器,可在本地访问http://localhost:port
"webpack-dev-server": "^3.7.1",
// 提供配置文件的合并
"webpack-merge": "^4.2.1",
// 添加vue-loader
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
}
复制代码
より多くの依存をインストール
npm install
复制代码
設定bable
ルートディレクトリに新しいファイルを作成します。.babelrc
{
"presets": [
"@babel/preset-env",
]
}
复制代码
postcss.config.jsのルートディレクトリに増加
module.exports = {
plugins: {
'autoprefixer': {browsers: 'last 5 version'}
}
}
复制代码
WebPACKの新しいwebpack.base.config.js構成のための基礎としてルートディレクトリに
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
// 入口文件
entry: './src/index.js',
output: {
filename: 'bundle.[hash].js',
path: path.join(__dirname, '/dist')
},
module: {
// 配置相应的规则
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader',
],
}, {
test: /\.vue$/,
loader: 'vue-loader'
},
]
},
// 配置相应的插件
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin()
]
};
复制代码
コンフィギュレーションの開発環境としてファイルのルートディレクトリに新しいwebpack.dev.config.js
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js');
module.exports = merge(baseConfig, {
// 设置为开发模式
mode: 'development',
devtool: 'inline-source-map',
// 配置服务端目录和端口
devServer: {
contentBase: './dist',
port: 3000
}
});
复制代码
本番環境の構成とファイルのルートディレクトリに新しいwebpack.product.config.js
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js');
module.exports = merge(baseConfig, {
// 设置为生产模式
mode: 'production'
});
复制代码
コンフィギュレーションスクリプトコマンド
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.config.js",
"build": "webpack --config webpack.product.config.js"
},
复制代码
Src新しいのルートディレクトリにあるディレクトリ、およびindex.htmlを
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack & Vue</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
复制代码
ファイルのsrc index.jsとApp.vueの新エントリー
import Vue from 'vue';
import App from './App.vue';
import './index.scss';
new Vue({
el: '#root',
render: h => h(App),
});
复制代码
<template>
<div id="app">
<h1 class="hello">hello webpack & Vue</h1>
</div>
</template>
<script>
export default {
name: "app"
};
</script>
<style scoped>
</style>
复制代码
srcディレクトリのSCSSの新index.scssファイル、テストファイル
$blog-color-red: #ff0000;
.hello {
color: $blog-color-red;
}
复制代码
プログラムを実行します。
npm run start
复制代码
驚くことではない、そして、それは**こんにちはヴュ&WebPACKのブラウザインタフェースの実行後にジャンプし、そして赤が表示されます!**言葉
パックファイル
npm run build
复制代码
驚くことではないが、その後、ルートディレクトリdistの中にファイルを生成し、あなたは**こんにちはヴュ&WebPACKの赤表示、間のフォルダ内のファイルを開くことができます!**言葉
エピローグ
フレームは一般的に使用される前に、足場は、ドラゴンボートフェスティバルを利用して、ツールが来る時間を持って、見てのWebPACK&ヴューを設定するためのイニシアチブをとる、もちろん、単にいくつかの簡単な設定よりも、より複雑な構成もWebPACKの設定を変更する必要があり、追加するための時間があります。また、コンフィギュレーション&WebPACKのに反応。
GitHubのプロジェクト住所:github.com/kavience/we ...
(終わり)
ます。https://juejin.im/post/5cfb8b82f265da1baf7cde26で再現