webpack~_html/css_WEB-ITnose

おっと…長い間ブログを更新していなかったので、記事が増えすぎているように感じますが、それでも更新したいと思っています。 update...

期末試験に向けて準備を進めていますが、まだ新しいフロントエンド技術を学習中ですが、なかなか書く時間がありません。学んだ興味深い内容を記録していきます。ここ~

1 webpack の理解 (webpack でどのような問題を解決できるか)

私はいつも html、次に css、js を書いてきましたが、その後、あらゆる種類のリンクやスクリプトが入ってきました。何か問題があったとは思えません。Webpack に慣れていないので混乱しますが、フロントエンド エンジニアリングがトレンドになっているので仕方ありません。

Webpack の問題点

* は、nodejs と同じようにフロントエンドで書くことができます。 js ファイルのさまざまなエクスポートと要件、css、画像もモジュールとして読み込まれます。 .

* ローダーを使用して、sass ファイル、coffeescript、jsx、ES6 などをロードできます。自動的に翻訳を実行します...

* さまざまなパッケージ化と圧縮...

2 Webpack の構文 (使い方)

(1) Webpack は npm パッケージの下にあるパッケージなので、npm install webpack -g によってグローバルにインストールできます。 .

(2) 構成ファイル webpack.config.js 、これは単純なプロジェクトでの私の構成です:

強調する必要があるのは、エントリ ファイルを宣言するために使用されるということです。平たく言えば、エントリ ファイルには、次のようなさまざまな require js および require css が含まれています。

次に、さまざまなローダー (ローダー) がファイルのサフィックス名を照合することによって、それらに対してさまざまな変換を実行し、バンドルします。これらのファイルを 1 つのファイルにまとめる出力の指定は、バンドルされたファイルの保存場所を指定するために使用されます。

例えば、ここでバンドルファイルのファイル名をbundle.jsと指定し、outという名前のフォルダーを作成し、その中に格納します。

<script src="./out/bundle.js"></script>

を通じて以前に必要だったすべてのファイルは、bundle.js ファイルにバンドルされ、参照されます...

上記の読み込みを行う必要があります。 babel-loader などの npm を介して対応する依存関係をダウンロードします。webpack が .js または .jsx サフィックスまたは ES2015 を検出すると、babel を呼び出してそれらを変換するのに役立ちます。

ただし、babel Webpack 自体は所有していないため、自分でダウンロードする必要があります。新しいバージョンの babel は babel-core と babel-cli に分かれています。ここで必要なのは、babel-core ファイルです。

{  "name": "taobao_web",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC",  "devDependencies": {    "babel-core": "^6.4.0",    "babel-loader": "^6.2.1 ",    "babel-preset-es2015": "^6.3.13",    "babel-preset-react": "^6.3.13",    "css-loader": "^0.23.1",    "file-loader": "^0.8.5",    "sass-loader": "^3.1.2",    "style-loader": "^0.13.0",    "url-loader": "^0.5.7"  },  "dependencies": {    "node-sass": "^3.4.2"  }}

これをパッケージ .json としてコピーできます。ファイルを開くには、npm install を使用してワンクリックでインストールするか、次のように個別にインストールすることもできます (完全ではありません。必要に応じてインストールを選択するだけです):

npm install style-loader css-loader url-loader babel-loader sass-loader file-loader --save-dev

対応するローダー。依存関係がインストールされたら、必要なファイルを追加します。翻訳およびパッケージ化されたファイルをエントリ ファイルに配置し、コマンド ラインで webpack -w と入力すると、作業が自動的に行われます。

上記の例は比較的単純ですが、より複雑な場合は、次のようにエントリ ファイルを記述できます。 page1.jsとpage2.jsの2つのファイルに束ねます...

entry: {    page1: "entry.js",    page2: "entry2.js"},output: {    path: path.join(__dirname, 'out'),    publicPath: "./out/",    filename: '[name].js'}

3つのメモ...

後で思いついたときに追加します〜