ディレクトリを作成します
プロジェクト名：VUE-のinit
- アプリ
- CSS
- reset.sass
- JS
- 家
- index.vue
- ルータ
- index.js
- main.js
- App.vue
- 家
- 景色
- index.htmlを
- CSS
インストールのWebPACK
npm i -D webpackプロフィールを作成
webpack.config.js
基本構成
- エントリーエントリー
- モジュールモジュール
- プラグインプラグイン
- 出力出力
高度な設定
- 決意
- devtool
- devServer
- ...
基本構成
まず書かれた基本的な機関
module.exports = {
enter: {},
module: {},
plugins: [],
output: {}
}
main.jsとしてファイルエントリパッケージへの入口の構成ファイル
enter: {
app: './app/js/main.js'
}主に様々なローダーを設定するために使用されるコンフィギュレーション・モジュール、
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader'
}
]
},
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader'
}
]
},
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
module: true
}
},
{ loader: 'sass-loader' },
]
},
]
},- バリューZhengce発現テストは、ファイル拡張子と一致し、対応を示してどのような書類ローダー
- 右から左への複数ローダー、解決順序を使用する必要がSASS
options: { module: true }オープンCSSモジュール
再構成後のプラグインは、configure出力
//在webpack.config.js顶部引入path
const path = require('path'); output: {
filename: '[name].min.js',
path: path.resolve(_dirname, 'dist')
}
}
- ファイル名は、出力ファイル名の後にパッケージを表し、
- [名]は、対応する値であるenter.app
- パス出力パスをパッキング
- path.resolve（）WebPACKの実行環境ノード、ここでパスは、オブジェクトがファイルパスとディレクトリパスを処理するために使用されるノードであります
さて、私たちは、インストール構成ローダーを開始します
npm i -D html-loader vue-loader style-loader css-loader sass-loader失敗した単一ローダのインストールがある場合は、それをインストールするか、またはcnpmに切り替えてください
基本的な構成コード
次のように私たちの基本的な設定が行われているこの時点で、コードは次のとおりです。
module.exports = {
enter: {
app: './app/js/main.js'
},
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader'
}
]
},
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader'
}
]
},
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
module: true
}
},
{ loader: 'sass-loader' },
]
},
]
},
plugins: [],
output: {
filename: '[name].min.js',
path: path.resolve(_dirname, 'dist')
}
}高度な設定
使用devServer
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}- contentBaseはカタログからコンテンツを提供するサーバに指示します。
- 圧縮圧縮
- スタートポート番号ポート
さて、私たちは、インストールを開始するように設定し
npm i -D webpack-dev-serverテスト
テストのためにいくつかのコードを追加します。
ホーム/ index.vue
<template>
<div id="home">
<h1>首页</h1>
<p>123123<p>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.home {
color: red;
font-size: 80px;
p {
color: blue
}
}
</style>ルータ/ index.js
import Vue from "vue"
import Router from "vue-router"
import Home from "../home/index.vue"
Vue.use(Router);
export default new Router({
routes: [{
path: '/',
name: 'home',
component: Home
}]
})App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
};
</script>
<style lang="scss" scoped>
</style>main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount("#app")また、インストールする必要がありますし、VUE VUEルータ
npm i vue vue-routerdevServerがアップし実行してみましょう
また、次の2つの依存関係をインストールする必要があります
npm i -D html-webpack-plugin clean-webpack-plugin次のコードトップwebpack.config.jsを追加
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 注意这里的写法， 这样写 const CleanWebpackPlugin 会报错HTML-のWebPACK - プラグイン
公式サイトのドキュメントには説明していますHtmlWebpackPlugin簡素化HTMLファイルの作成をごWebPACKのパッケージにサービスを提供するために。これは、ファイル名のハッシュを変更します各コンパイルに含まれているのWebPACKバンドルするのに特に有用です。あなたはプラグインテンプレートは、独自のテンプレートをlodash提供したり、独自のローダを使用して使用して、HTMLファイルを生成させることができます。また、あなたはgithubのでプロジェクトの詳細な構成を表示することができます。
各建物におけるクリーンのWebPACK - プラグイン/ distのフォルダをクリーニングする前に、これが唯一使用されているファイルを生成します。
プラグインの設定
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './views/index.html'
})
],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>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>package.json加入 "スタート"： "のWebPACK-devのサーバを--open"
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open"
},エラーFOUNDの多くを完了
- あなたはこれらのローダーの結果を処理するために、追加のローダーが必要な場合があります。ヴュー・ローダーのバージョンを15 *はVUEローダに使用された後はVueLoaderPlugin関連する必要があります
npm i vue-loader-plugin -S
webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// ...
plugins: [
new VueLoaderPlugin()
]
}- モジュール「ノード-SASS見つけることができません 」
、インストールが終了すると、プロジェクトの最終的な成功を我々は実行を開始NPM
使用px2rem
npm install -D px2rem-loadermodule: {
rules: [
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'px2rem-loader',
options: {
remUnit: 75,
remPrecision: 6
}
},
'sass-loader'
]
},
]
},
VueLoader> - >単一ファイルの生成- - >高度なユーザーのために、なぜこのように、Aの構成セクションには、公式ドキュメントのVueを参照して、ある
元webpack3.xの必要性はVUEローダとのconfigure px2rem下configureとSASS CSSに。
使用CSSのモジュール
// ...
{
test: /\.scss$/,
use: [
'vue-style-loader',
+ {
+ loader: 'css-loader',
+ options: {
+ modules: true,
+ localIdentName: '[local]_[hash:base64:8]'
+ }
+ },
{
loader: 'px2rem-loader',
options: {
remUnit: 75,
remPrecision: 6
}
},
'sass-loader'
]
},
>単一ファイルの生成 - - >高度なユーザーの場合 - > VueLoader - > CSSモジュールあなたは、CSSモジュールを使用する方法がわからない場合は、公式ドキュメントのVueを参照してください。
CSSエキス
npm install -D mini-css-extract-plugin{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true
}
},
{
loader: 'px2rem-loader',
options: {
remUnit: 75,
remPrecision: 6
}
},
'sass-loader'
]
},plugins: [
// ...
new MiniCssExtractPlugin({
filename: 'style.css'
})
]本番環境と開発環境を区別するために、
webpack3
私たちは、DefinePluginのWebPACKのを使用して、コンパイル時に設定することができるグローバル定数を作成する必要があります。WebPACKのwebpack.config.js頭で導入
const webpack = require('webpack');我々は値を変更し次にmodule.exportsは、パラメータのenvを渡し、機能を矢印します
module.exports = env => {
if (!env) { env = {} }
return {
// 原来的配置
}
}レッツは、例を行う、私たちは、CSSを必要としない開発環境で、たとえば抽出します
module.exports = env => {
if (!env) { env = {} }
let plugins = [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './views/index.html'
}),
new VueLoaderPlugin(),
];
if (env.production) {
plugins.push(
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: 'production'
}
}),
new MiniCssExtractPlugin({
filename: 'style.css'
})
)
}- 処理の目的は、グローバル変数ノードに属し
- 我々は唯一のプラグインが必要な場合env.production MiniCssExtractPlugin生産環境の次のプラグインの配列にプッシュした後、合格する必要があります
对应的我们还有修改部分原来的代码{
試験：/.scss$/、
使用：[
]env.production?MiniCssExtractPlugin.loader:'vue-style-loader', { loader: 'css-loader', options: { modules: true } }, { loader: 'px2rem-loader', options: { remUnit: 75, remPrecision: 6 } }, 'sass-loader'
}、
以及原来的plugins配置我们直接将它的值变为我们上面定义的plugins。
package.json中我们需要添加命令 "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open",
"watch": "webpack --watch",
"build" : "webpack --env.production"
},私たちは、私たちは環境を区別するために、この引数を使用している渡されたパラメータをWebPACKのことに注意してください。
npm start
私たちは、コンソール見ることができる
プラグインがMiniCssExtractPluginを実行していないことを示す、挿入、および抽出されていないスタイルタグにCSSスタイルを
npm run buildindex.htmlにリンクタグを挿入するための包装、CSSスタイルの後に実行し、説明したCSSは単一のファイルに抽出され、生産運転の説明MiniCssExtractPluginウィジェット
webpack4
上記のアプローチのルックスをより良く理解され、私たちが直接、開発環境と本番環境を区別するモードを使用することができますwebpack4。我々はDefinePluginに依存する必要がないので、私たちは、WebPACKの頭を導入する必要はありません。
新しいコンフィギュレーション：
mode: 'development' //默认是 developmentmodule.exports = (env, argv) => {
if (argv.mode === 'production') {
//...
}
return config;
};使用eslint
npm i eslint -D直接package.jsonコンフィギュレーションの書き込みをサポートしながらeslintは、コンフィギュレーション・ファイル・フォーマットの様々なサポートし、我々はそれを直接設定する方法、package.jsonに書くのか？
VUE VUEプロジェクトは直接公式推奨プラグインを使用することができます
npm i eslint-plugin-vue -Dpackage.jsonは以下を追加します。
{
// 其他配置
"eslintConfig": {
"root": true,
"parserOptions": {
"ecmaVersion": 2017
},
"extends": [
"mysticatea",
"mysticatea/modules",
"plugin:vue/recommended"
],
"plugins": [
"node"
],
"env": {
"browser": false
},
"globals": {
"applicationCache": false,
"atob": false,
"btoa": false,
"console": false,
"document": false,
"location": false,
"window": false
},
"rules": {
"node/no-extraneous-import": "error",
"node/no-missing-import": "error",
"node/no-unpublished-import": "error",
"vue/html-indent": [
"error",
4
],
"vue/max-attributes-per-line": "off"
}
},
"eslintIgnore": [
"node_modules",
"webpack.config.js"
]
}