ホームページ > 記事 > ウェブフロントエンド > Node.jsでのnpmとwebpackの設定方法を詳しく解説
Node.jsでのnpmとwebpackの設定方法を詳しく解説
- 小云云オリジナル
- 2018-01-24 10:40:012008ブラウズ
Node.js は、Chrome V8 エンジンに基づいた JavaScript 実行環境であり、JavaScript 言語を使用してサーバー側のコードを記述することができます。 npm と webpack の設定について詳しく説明します。必要な方は参考にしていただければ幸いです。
1. ノードを使用して http サーバーを実装します
ポート 8787 のサーバーが以下で作成されます。これは、php や Java などとは異なり、php サーバーに基づいており、node.js を使用することもできます。コードを使ってサーバーをすばやく構築しました。
// 引入http模块
var http = require("http");
// 调用http的接口创建服务器；回调--->异步；
var server = http.createServer(function(req,res){
// request:浏览器提交给服务器相关；response:服务器到浏览器；
console.log(111);
// 设置编码格式
res.setHeader("Content-type","text/html;charset=utf8");
res.write("<h1>hello world 11233</h1>");
res.write("你好世界");
res.end();
})
server.listen(8787);
モジュール性
1. CommonJS は JS のパフォーマンスの仕様を定めることです。船内を閲覧します。
2. 独自のモジュールを作成します
node.jsの名前空間は独立しています
requireを使用して別のモジュールのメソッドまたは変数を1つのモジュールに導入します
• fnDataモジュールを導入します
require("./fnData" );
•インポートとエクスポート (変数または関数のエクスポート)
module.exports = {
myFn:test.myFn,
a:test.a
}
2. 組み込みモジュール
nodejs の組み込みモジュールは次のとおりです: バッファー、C/C++アドオン、子プロセス、クラスター、コンソール、Cr
ypto 、デバッガー、DNS、ドメイン、エラー、イベント、ファイル システム、
グローバル、HTTP、HTTPS、モジュール、ネット、OS、パス、プロセス、P unycode、クエリ文字列、Readline、REPL、ストリーム、文字列デコーダー、タイマー、 TLS/SSL、TTY、UDP/データグラム、URL、ユーティリティ、V8、VM、ZLIB; 組み込みモジュールをインストールする必要はありません。
3. npm
1.モジュール (ノードのパッケージ管理です) 次の npm 一般的に使用されるターミナル コマンド1. ノード モジュールをインストールしますnpm install moduleNames パッケージをグローバル環境にインストールします npm installmodule.exports = {
// 当前执行文件的路径
// 输入
entry:__dirname+"/app/index.js",
// 输出
output:{
path:__dirname+"/build",
filename:"bundle.js"
},
module:{
loaders:[{
test:/\.css$/,
loader:"style-loader!css-loader"
}]
},
watch:true,
devServer: {
contentBase: "./build",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
}3. 次のターミナル コマンドを使用して初期化し、自動的に作成します。 package.json ファイルを押すだけですnpm init4.package.json ファイルがこのプロジェクトに依存パッケージとしてインストールされます
// 安装Webpack npm install --save-dev webpack次に、そのフォルダー内に新しいアプリを作成してフォルダーを構築します。その中にアプリフォルダーを置きます。 js、css、その他のモジュールファイルを書き込むには、webpack パッケージ化によって生成された js ファイルと、index.html をビルドに置きます。このときのディレクトリ構造は次のとおりです。自動生成されたバンドルを inex.html ファイルに導入します。js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p class="p1"></p> <!--webpack/gulp/grount--> </body> <script src="bundle.js"></script> </html>module1.js でいくつかの変数とメソッドを定義し、exports を使用してモジュールとしてエクスポートします
console.log("我是module1.js");
var a = "我是a变量";
var fn = function(){
console.log("我是fn函数");
}
module.exports = {
a,
fn
}index.js で require を使用して、 module.js
var res = require("./module1");
require("./index.css");
console.log("我是index.js");
console.log(res.a);
res.fn();6. ターミナルで webpack を実行します webpack7. package-loack.json でスクリプトを設定します
npm を設定した後、コマンド ラインで簡単な npm start コマンドを使用して webpack を置き換えることができます。コマンド
次のように構成した後、npm dev で npm webpack -dev-server --open コマンドを置き換えることができます
{
"dependencies": {
"css-loader": "^0.28.8",
"style-loader": "^0.19.1",
"webpack": "^3.10.0"
},
"devDependencies": {
"webpack-dev-server": "^2.11.0"
},
"scripts": {
"start": "webpack",
"dev": "webpack-dev-server --open"
}
}
この時点で npm start を入力してファイルをパッケージ化します
関連推奨事項:
vue-cli最適化されたWebpackの構成の詳細な例の説明
ReactとWebpackの構築とパッケージ化の最適化の例の詳細な説明
以上がNode.jsでのnpmとwebpackの設定方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。