ホームページ > 記事 > ウェブフロントエンド > Vue2.X、Webpack2.Xを利用したSPAアプリケーション開発のための環境構築方法
Vue2.X、Webpack2.Xを利用したSPAアプリケーション開発のための環境構築方法
- 巴扎黑オリジナル
- 2017-07-22 15:40:301176ブラウズ
[目次]
1. 開発環境の準備
1.1 Nodejsをインストールします
最初にNodejsをインストールし、nodejsの公式Webサイトに直接アクセスしてダウンロードします。Npmはデフォルトでインストールされるため、ここで別途インストールする必要はありません。
1.2 淘宝網 Npm ミラーを使用する
国内ネットワークの理由により、Npm を直接使用して依存関係パッケージをインストールすると、ネットワークと壁の理由により失敗します。幸いなことに、淘宝網は使用できるミラーを提供してくれました。アドレスは: [使用説明書] に従って、イメージをインストールします。
1.3 IDE の準備
現在、フロントエンド開発で最も人気のある IDE は、Jetbrain の WebStorm です。公式 Web サイトからダウンロードします。インストール後、30 日間の試用期間があります。不安な場合は、オンラインでアクセスしてください。 find a crash. 私が利用した登録情報を公開しています。もちろん、一番良いのはお金を払うことです
2. Webpack プロジェクトを構築します
2.1 新しいプロジェクト
開発環境の準備ができたら、以下に示すように、WebStorm を開いて新しい空のプロジェクトを作成できます。 Webstorm を使用する利点の 1 つは、以下に示すように、IDE でコンソールを直接起動することです。
コンソールに「npm init」と入力して、プロジェクトを初期化します。コンソールでは、次の情報の入力を求められます。ここではデフォルトで Enter キーを押し、最後にプロンプトに従って「yes」と入力すると、初期化が完了します。
このとき、プロジェクトのルートディレクトリに package.json が生成されます。ファイルを開くと、次のようにコンソールに入力した情報が表示されます。
package.json ファイルは、次のリストです。 Nodejs と Npm によって検出される依存関係 詳細については、このドキュメントを参照してください:2.2 を使用した Webpack のインストールWebpack の概念と機能については、このブログ投稿を参照してください: https://llp0574.github。 io/2016/11/29/getting-started-with-webpack2/?utm_source=tuicool&utm_medium=referral および
。適切な英語については、公式 Web サイトを直接参照してください: http://webpack.github.io/webpack を使用する目的は、コードをよりモジュール化し、メンテナンスと管理を容易にすることです。 Java でパッケージを管理するための maven 。
2.2.1 インストール
まず、コンソールにコマンド npm install webpack を入力します。このコマンドの機能は、npm に webpack を node_modules の下にインストールさせることです (ディレクトリは自動的に生成されます)。
- 実稼働環境では、コマンドの後に --save を追加します (例: npm install webpack --save)。これは、node_modules の下に webpack をインストールし、package.json ファイルの依存関係を更新することを意味します。
- 開発環境では、npm install webpack --save-dev を使用して、Node_modules の下に webpack をインストールし、package.json の devDependency を更新します。
- ここでは開発環境のコマンドを使用します。
2.2.2 構成
1 まず、プロジェクト ディレクトリに新しい src ディレクトリを作成し、新しい hello.js ファイルを作成します。 src の下に次のコードをファイルに書き込みます:
export default function () {const hello = document.createElement("div");hello.textContent = "Hello Webpack!"return hello;}
export は外部に公開されるインターフェイスを定義し、default はエクスポート用のデフォルト出力を提供します。これにより、インポート時にエクスポートで変数名を指定する代わりに、インポート時に変数名をカスタマイズできます。したがって、このコードは次のことを意味します: デフォルトで匿名関数を入力します。
2. 次に、hello.js と同じレベルに main.js を作成し、次の内容を入力します。
import Hello from "./hello";document.getElementById("app").appendChild(Hello());
3. 次のように、プロジェクトのルート ディレクトリに新しいパブリック フォルダーを作成し、新しい Index.html ファイルを作成します。
次に、ID アプリを使用して Html ファイルに div を作成し、スクリプトの最後にスクリプトを導入します。以下に示すように、本文:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Webpack Example</title><body><div id="app" ></div><script type="text/javascript" src="bundle.js?1.1.11"></script></body></html>
module.exports = {entry: __dirname + "/src/main.js?1.1.11",output: {path: __dirname + "/public",filename: "bundle.js?1.1.11"}}
__dirname是nodejs中的全局变量，指向当前执行脚本的目录。
module.exports是webpack的对象，其中entry是指定入口文件，这里指定main.js为入口文件。output下的path是输出目录，filename是输出文件名称。通过path和filename组合就可以将我们再代码中引入的模块完整的输出到制定的文件中。
5.在控制台执行webpack命令，就可以看到bundle.js文件已经输出到Public目录下了
这个时候通过浏览器打开Index.html可以看到效果:
3、进阶Webpack
上面我们已经可以用webpack来打包我们的模块，不过这只是刚入门，后面我们会不断的完善webpack.config.js这个文件。
从刚才的例子中，我们需要自己手动的在html页面里面引入bundle.js文件，那么有没有自动帮我们引入文件的功能呢？回答肯定是有的，这里就介绍下Html-webpack-plugin插件。
3.1 常用插件
3.1.1 Html-webpack-plugin插件
插件官方地址是:,这里只是简单讲解使用。
1.要使用html插件，首先需要在项目中引入该模块，在控制台执行命令:
npm install html-webpack-plugin --save-dev
2.编辑webpack.config.js文件，在其中加入以下代码:
var HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: __dirname + "/src/main.js?1.1.11",output: {path: __dirname + "/public",filename: "bundle.js?1.1.11"},plugins: [new HtmlWebpackPlugin()
]}可以看到，使用require引入html-webpack-plugin，然后在配置中的plugins数组中new一个插件对象。
3.这个时候我们把public目录删除，再在控制台执行webpack命令，会看到如下：
注意看红框部分，首先，title已经被修改了插件默认值；其次，id为app的div已经没有了。最后，可看到在body末尾插件帮我们把bundle.js插入。
template属性
看插件官网，插件有一个template属性，可以指定模板文件，插件能按照模板帮我们插入js或者css引用。
官网地址是:。
看官网描述，默认会有一个ejs的loader会解析模板，至于ejs是什么？ejs是一个模板语言，在nodejs开发中经常会用到，这里可以把ejs完全当做一个html格式来用。
所以，在src目录下，我们新建一个index.temp.ejs文件，并把public下的index.html的内容拷贝到该文件中，并修改至如下:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Webpack Example</title><body><div id="app" class="custom"></div></body></html>
可以看到，title已经被我们修改回webpack example了，并且也添加了id为app的div，还删除了script，接着，删除Public下的文件。然后我们再控制台输入webpack，等webpack打包编译完成，这时public下生成了bundle.js和index.html文件，编辑index.html文件，可以看到如下信息：
76c82f278ac045591c9159d381de2c57 100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7Webpack Example6e916e0f7d1e588d4f442bf645aedb2f 3f103fbe71cf3c8496f52de6b1187a2a9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 2cc379576380abd0be39e1d1832e7fc016b28748ea4df4d9c2150843fecfba68 6bbbe3d7ae7fe3978737f0820f53b5b92cacc6d41bbb37262a98f745aa00fbf036cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e
在Body末尾，插件自动给我们把script加上了。
3.1.2 Extract-text-webpack插件
如果我们也想把css文件也自动插入，那么就会用到extract-text-webpack插件。
其官网地址是:。
官网的usage如下：
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css?1.1.11"),
]
}
1.首先还是要先在控制台输入命令：
npm install extract-text-webpack-plugin --save-dev。
这里要注意：官网只提示安装extract插件，其实在编译的时候，还需要style-loader和css-loader，所以还要执行命令:
npm install style-loader --save-dev
npm install css-loader --save-dev
2.然后在webpack.config.js文件上面，require一下这个插件
3.按照官网的用法，编写module节点，最后如下所示:
var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: __dirname + "/src/main.js?1.1.11",
output: {
path: __dirname + "/public",
filename: "bundle.js?1.1.11"
},
module: {
rules: [{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.temp.ejs"
}),
new ExtractTextWebpackPlugin("styles.css?1.1.11")
]
}
注意：
test是正则表达式，不是字符串!!!，没有引号
在webpack2中，module下的loaders改为rules,后者拥有更多的功能
4.接着，我们在src目录下新建一个index.css文件，并编辑编写如下样式:
.custom{
font-size: 18px;
color: bisque;
border: 1px moccasin solid;
padding: 5px;
}
5.然后，编辑index.temp.ejs文件，在div标签加入class="custom"，如下图红框处:
76c82f278ac045591c9159d381de2c57 100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7Webpack Example6e916e0f7d1e588d4f442bf645aedb2f 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 2cc379576380abd0be39e1d1832e7fc016b28748ea4df4d9c2150843fecfba68 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e
6.编辑main.js文件，在其顶部Import刚才新建的index.css文件，如下图:
import Hello from "./hello";
import IndexStyle from "./index.css?1.1.11";
document.getElementById("app").appendChild(Hello());
7.最后，在控制台输入命令
webpack
编译完成后，可以看到public目录下生成了style.css文件，编辑index.html文件，可以看到在Head中引入了Style.css文件,如下图:
76c82f278ac045591c9159d381de2c57 100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7Webpack Example6e916e0f7d1e588d4f442bf645aedb2f 3f103fbe71cf3c8496f52de6b1187a2a9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 2cc379576380abd0be39e1d1832e7fc016b28748ea4df4d9c2150843fecfba68 6bbbe3d7ae7fe3978737f0820f53b5b92cacc6d41bbb37262a98f745aa00fbf036cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e
3.2 开发服务器 - Webpack-dev-server
在开发中，我们会不断的调试页面和参数，如果每次都是执行webpack命令未免太累了，所以这里介绍一个开发服务器webpack-dev-server，它提供一个易于部署的服务器环境，并且具有实时重载的功能。
更多的文档可以参考：。
要使用这个功能，首先还先执行npm的安装命令
npm install webpack-dev-server --save-dev,
执行完成后，编辑package.json文件，添加"start"代码如下：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"webpack-dev-server --progress"}"--progress"参数可以查看当前执行进度，在控制台输入"npm start"控制台会打印日志信息，最后出现编译成功，代表服务启动完成，这时打开http://localhost:8080，可以看到index.html的内容，如下图：
这个时候，编辑hello.js，添加一些字符串如下：
export default function () {
const hello = document.createElement("div");
hello.textContent = "Hello Webpack!This is my example!"
return hello;
}
保存后，打开浏览器不用刷新，就可以看到我们新添加的"This is my example"。
以上がVue2.X、Webpack2.Xを利用したSPAアプリケーション開発のための環境構築方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。