Webpack パッケージ化で発生した問題を解決する

webpackのパッケージ化

ソフトウェア vscode
ファイルの保存場所とファイル
ここに画像の説明を挿入

index.html コード
その後、webpack を使用して、bundle.js ファイルをパッケージ化して正常に生成します。

<!-- 注意：不推荐直接在这里引用任何包和任何css文件 ,改用导入main-->
<script src="./main.js"></script>

<ul>
    <li>这是第1个li</li>
    <li>这是第2个li</li>
    <li>这是第3个li</li>
    <li>这是第4个li</li>
    <li>这是第5个li</li>
    <li>这是第6个li</li>
    <li>这是第7个li</li>
    <li>这是第8个li</li>
    <li>这是第9个li</li>
    <li>这是第10个li</li>
</ul>

main.js コード
//この main.js はプロジェクトの JS エントリファイルです
//1. JQuery をインポートします
import $ from 'jquery'
// const と同等 $ = require('jquery') import *** from が含まれていますES6 モジュールのインポート方法
//ES6 のコードが高度すぎてブラウザが解析できないので、エラーを報告したらどうすればいいですか: webpack を使用
$(function(){ $('li:odd') .css('backgroundColor',' lightblue') $('li:even').css('backgroundColor',function(){ return '#' + 'D97634' }) })

まず、node、npm、および webpack をインストールする必要があります。webpack
-v を使用して、インストールされている webpack のバージョンをテストできます。

Index.htmlとmain.jsを書いたらパッケージ化してみましょう

最初のパッケージ化では、最初にコンソールで npm init -y を実行する必要があり、

この時点で、package.json 構成ファイルがプロジェクトに表示されます。
このファイルで「scripts」ノードを見つけて次を追加します:
"dev": "webpack --modedevelopment", // 開発環境

"build": "webpack --modeproduction" // 本番環境
ここに画像の説明を挿入

最後に、webpack.config.js ファイルを手動で追加します (パッケージングコマンドを簡略化するために webpack コマンドを入力するだけです
)
ファイルパス
コード:
const path=require('path')
// 構成オブジェクトを外部に公開しますノードモジュール操作
module.exports={ entry:path.join(__dirname,'./src/main.js') ,//パッケージファイル出力:{ path:path.join(__dirname,'./dist'), / /パッケージファイルの格納先アドレスfilename:'bundle.js' //パッケージファイル名}, mode :'development' //モードを設定}

注: ここに次の内容を追加する必要があります: mode: 'development' // モードを設定します。
4. 最後に、ターミナルで webpack とコマンド
da da da da da を入力すると、成功します。
ここに画像の説明を挿入
最後に、新しいbundle.jsファイルがdistに現れていることがわかります。

ああ、ちなみに、プロジェクトのターミナルでもこのコマンドを実行しました
npm i jquery -s install jQuery
command webpack ./src/mian.js ./dist/bundle.js は、webpack を実行して main.js を処理することを意味しますファイルに保存され、/bundle.js という名前の新しいファイルの ./dist に保存されます。

ベジちゃん頑張ってます。ああ、さあ！

Webpack パッケージ化で発生した問題を解決する

webpackのパッケージ化

おすすめ