ホームページ > 記事 > ウェブフロントエンド > Webpack を使用してプロジェクトを開発する方法
今回は、Webpack を使用してプロジェクトを開発する方法と、Webpack を使用してプロジェクトを開発するための注意事項について説明します。実際の事例を見てみましょう。
1. 一般的なパッケージ化ツールの紹介
パッケージ化ツールの中で、一般的なものには、RequireJS、browserify、webpack が含まれます。そのうちの RequireJS は、ADM (非同期モジュール定義) に基づく2. ツールの使用
(1) RequireJS として。 npm パッケージは、コマンド ラインから実行できる実行可能な r.js ツールを提供します。使用方法は次のとおりです。npm install -g requirejs r.js -o app.build.js(2) browserify が提供するコマンド ライン ツールは、次のように使用します。 ) webpackの使い方は以下の通りです:
npm install -g browserify browserify main.js -o bundle.js上記のコマンドラインでは、webpackの簡単なグローバルインストールとmain.jsファイルのパッケージ化を実行しました。
3. プロジェクトの構築
フロントエンド プロジェクトの場合、webpack はコードの依存関係ではなく、ビルド ツールの役割を果たします。インストールするには、次のコマンドを使用します。 この例では、2 つの js モジュールを含む単純なアプリケーションを構築します
1.「Hello world」というテキストを生成する hello モジュール (hello.js)
npm install webpack -g webpack main.js -o bundle.js
2. ) テキスト
npm install webpack --save-dev
と、フロントエンドブラウザでコンテンツを表示するために使用されるindex.htmlファイルを出力します
module.exports = 'Hello world';
上記のsrcパスに導入されたbundle.jsファイルは、まだ作成されていないため存在しません。 webpack を使用して js ファイルを作成およびパッケージ化し、次のコマンドで作成します:
var text = require('./hello'); console.log(text);
上記のコマンドを実行すると、ブラウザ コンソールに印刷結果 Hello world
が表示されます
このように、簡単なプロジェクトの実装原理を達成しました。パッケージ化されたコンテンツはbundle.jsであり、パッケージ化されたコンテンツを確認できるため、ここではコードを投稿しません
もちろん、次のようにビルドするコードを記述した場合。これでは意味がありません。Webpack のもう 1 つの利点、それは 設定ファイルHello world
这样,我们就实现了简单项目的实现原理,打包内容为bundle.js,我们能够看到打包之后的内容,在这里就不贴代码了.
当然,如果我们写代码都是这样去构建,那么,作用意义也不大,这就不得不提及webpack的另外一个优点了,那就是配置文件的使用,在使用配置文件之前,我们在进行安装样式加载器,如下面命令:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="./bundle.js"></script> </body> </html>
通过上面的配置,我们就能够进行样式的加载
然后我们进行webpack配置文件设置,需要首先在项目下创建文件webpack.config.js文件,其中内容如下所示:
webpack ./index.js bundle.js
在上面代码中,
* entry: 表示项目的入口文件
* output: 表示构建打包之后的结果输出,在输出的对象中仍有多项配置比如上面所使用的输出路径和输出文件名
* module.loaders是对于模块中的loader使用的配置,值为一个数组,数组的每一项指定一个规则,规则的test字段是正则表达式,若被依赖模块的ID符合该正则表达式,则对依赖进行使用loader转换.这样,我们就能够使用webpack命令进行代码的转换
更多详细说明请参见(http://www.jb51.net/article/136710.htm)
如下面命令行命令就可以进行代码的打包工作webpack
、設定ファイルを使用する前に、次のコマンドのようなスタイルローダーをインストールしています:
npm install style-loader css-loader --save-dev
上記の設定を通じて、スタイルをロードできます
次に、webpack設定ファイルを設定します。まず、プロジェクトの webpack.config.js ファイルの下にファイルを作成します。その内容は次のとおりです。
var path = require('path'); module.exports = { entry: path.join(dirname, 'index'), output: { path: dirname, filename: 'bundle.js' }, module:{ loaders: [ { test: /\.css$/, loaders: ['style-loader', 'css-loader'] } ] } };
上記のコードでは、
* エントリ: プロジェクトの エントリ ファイル
では、依存するモジュールの ID が正規表現と一致する場合、ローダーを使用して依存関係が変換されます。このようにして、webpack コマンドを使用してコードを変換できます
詳細な手順については、(http://www.jb51.net/article/136710.htm) を参照してください
webpack
Passed 上記のコマンドを実行すると、ファイルをパッケージ化することもでき、ファイルを表示するときにスタイルも表示できます。これは、スタイルが実際に導入できることを証明するためです。では、index.css ファイルを作成します。その内容は次のとおりです。 🎜body { background-color: darkgray; }🎜その後、前に作成した Index.js に導入され、変更されたコードは次のとおりです。 🎜
// import style from './index.css'; var style = require('./index.css'); var text = require('./hello'); console.log(text);🎜 上記のコードで、コメントアウトされている部分は次のとおりです。はノードモジュールのインポート形式であり、使用されるのは CommonJS の使用仕様です。同じものを使用します。 コマンドがパッケージ化されると、ブラウザーで次の効果が確認できます:🎜🎜🎜 🎜🎜つまり、スタイルは次のとおりです。表示されます。🎜
当然,webpack也能够通过webpack-dev-server进行项目的实时构建.
使用如下命令进行webpack-dev-server的安装:
npm install webpack-dev-server --save-dev
在安装之后,我们能够配置使用服务器,首先,我们的package.json文件将会更为下面这样,新增内容为:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start":"webpack-dev-server --inline" },
在添加完这行命令之后,我们就可以使用下面命令进行启动webpack-dev-server服务器了,
npm run start
之后完整的package.json为如下:
{ "name": "react-basics-review", "version": "1.0.0", "description": "a practise of react study ", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start":"webpack-dev-server --inline" }, "repository": { "type": "git", "url": "git+https://github.com/suwu150/react-basics-review.git" }, "author": "jkwu", "license": "ISC", "bugs": { "url": "https://github.com/suwu150/react-basics-review/issues" }, "homepage": "https://github.com/suwu150/react-basics-review#readme", "devDependencies": { "babel-plugin-transform-object-rest-spread": "^6.23.0", "babel-preset-es2015": "^6.24.1", "css-loader": "^0.28.5", "lodash": "^4.17.4", "mocha": "^3.5.0", "react": "^15.6.1", "style-loader": "^0.18.2", "webpack": "^3.5.5", "webpack-dev-server": "^2.7.1" }, "dependencies": { "lodash": "^4.17.4" } }
webpack配置文件修改为如下内容:
devServer中常用的配置对象属性如下:
* 1. contentBase:”./” // 本地服务器在哪个目录搭建页面,一般我们在当前目录即可;
* 2. historyApiFallback:true // 当我们搭建spa应用时非常有用,它使用的是HTML5 History Api,任意的跳转或404响应可以指向 index.html 页面;
* 3. inline:true // 用来支持dev-server自动刷新的配置,webpack有两种模式支持自动刷新,一种是iframe模式,一种是inline模式;使用iframe模式是不需要在devServer进行配置的,只需使用特定的URL格式访问即可;不过我们一般还是常用inline模式,在devServer中对inline设置为true后,当我们启动webpack-dev-server时仍要需要配置inline才能生效,这一点我们之后再说;
* 4. hot:true // 启动webpack热模块替换特性,这里也是坑最多的地方,不少博客都将hot设置了true,这里其实如果单单设置为true是不起作用,会报错误的,错误如下图所示:
这是因为在使用的过程中没有使用插件的原因,只需要将下面命令添加到配置文件即可:
plugins:[ new webpack.HotModuleReplacementPlugin(), ],
也就是调用webpack的热模块插件处理.
*5 .port:端口号(默认8080) ;
*6.其他配置信息
–quiet 控制台中不输出打包的信息
–compress 开启gzip压缩
–progress 显示打包的进度
–open 自动打开浏览器
var path = require('path'); const webpack = require ("webpack"); module.exports = { entry: path.join(dirname, 'index'), output: { path: dirname, filename: 'bundle.js', publicPath: "/assets/", }, module:{ loaders: [ { test: /\.css$/, loaders: ['style-loader', 'css-loader'] } ] }, plugins:[ new webpack.HotModuleReplacementPlugin(), ], devServer:{ //我们在这里对webpack-dev-server进行配置 contentBase: "./", historyApiFallback:true, inline:true, hot:true } };
index.html文件的内容修改为下面面格式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>身在山中不知山高</p> <script src="assets/bundle.js"></script> </body> </html>
也就是将路径进行修改,因为在webpack.config.json文件中进行了服务器路径的配置,修改了 publicPath: "/assets/",
项,在命令行执行npm run start
能看到服务器正常启动,然后我们去浏览器进行访问,如下所示结果:
至此,我们完成了webpack实时构建的配置,当我们进行修改某一样式文件或者js文件的时候,项目就会重新打包,并且自动刷新加载到浏览器中.
如下面链接提示:,进行实时构建的搭建webpack-dev-server实时搭建
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上がWebpack を使用してプロジェクトを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。