WebPACKの小さなサンプルプロジェクトをビルドします

その他 2019-06-17 09:59:47 訪問数: null

vscode入力します。
新規フォルダ
新規ディレクトリを

13614469-0e9c0649ffa32cdc.png
image.png

パッケージの出力のためのdistディレクトリ
ソースディレクトリとしてSRC
ターミナルを開くにはCtrl +〜
初期化コマンドを実行するためには、 npm init -y （：アイテムのフォルダ名を、中国を持っていないことに注意してください）1つの以上のファイルになります
13614469-38464dc4246994af.png
image.png

で同様のMavenのPOMファイル
デモの例では、李の束に背景色を追加します
13614469-9687765eea308392.png
image.png 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./main.js"></script>
</head>
<body>

    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
    </ul>
</body>
</html>

実行ダウンロードjqueryの

npm i jquery -S

main.js

// 程序入口js
import $ from 'jquery'

$(function(){
    $('li:odd').css('background','red') // 奇数红
    $('li:even').css('background','green') // 偶数绿
})

HTMLは、その走行がES6構文はサポートされていませんでしょう
梱包コマンドを実行します

webpack .\src\main.js -o .\dist\bundle.js

直接導入HTMLで<script src="../dist/bundle.js"></script>
開いたHTMLでは、色を見ます

上記の例とは、関数のWebPACK見ることができます

  • 1.相互依存がjsのファイルを扱うことができます（のみ入場main.jsを持つことができ、理想的な条件の下で、一般的には十分ではありません）
  • パッケージ化2.プロセスの互換性の問題、

注意：この時点main.js変更はbundle.jsには影響しないで、すべての変更は、再パッケージ化が必要です
ソリューションを：
プロジェクトのルートディレクトリに新しいプロファイルを作成します

13614469-dac98c373ff78aec.png
IMG 

const path = require('path')
// 这个配置文件就是一个 js 文件，通过node中的模块操作，向外暴露一个配置对象
module.exports = {
    entry : path.join(__dirname,'./src/main.js'),// 入口，表示要使用webpack打包哪个文件
    output :{
        path : path.join(__dirname,'./dist') ,// 指定输出目录
        filename : 'bundle.js' // 这是指定输出的文件名称
    }
}

その後、直接実行のWebPACKコマンドは、パッケージを完了することができます

周波数を変更するためのプロジェクトでは、すべての変更が完了し、再パッケージ化またはあまりにも面倒、その後、私たちは、新しいツールがインストールされて、非常に頻繁にあるwebpack-dev-serverと、自動的に完全なパッケージのコンパイル

# 本地安装webpack
npm i webpack -D

# 安装到项目的本地开发依赖 -d 本地安装，没有全局安装
# 不能再终端中直接运行名，只有全局 -g 安装的才能在终端正常执行
npm i webpack-dev-server -D

# 下载安装webpack-cli
npm iwebpack-cli -D

13614469-1300a8704dd621db.png
スクリプトコマンドを追加します。

修正webpack.config.js 

const path = require('path')
// 这个配置文件就是一个 js 文件，通过node中的模块操作，向外暴露一个配置对象
module.exports = {
    entry : path.join(__dirname,'./src/main.js'),// 入口，表示要使用webpack打包哪个文件
    output :{
        publicPath: 'dist' ,// 指定输出目录
        filename : 'bundle.js' // 这是指定输出的文件名称
    }
}

実行・NPMの実行DEV・再パッケージ化することは許されない、プロジェクトを開始し、その後JSを変更

注意：
WebPACKの、リアルタイムの変更に更新されていないだけでパッケージ化ツール、WebPACKの-devのサーバーを自動的に修正するために、リアルタイムで更新されます
WebPACKの包装出力パスを、パスの出力フィールドパック出力パスは、WebPACKの-devのサーバーは、出力フィールドはpublicPathが、これは（ありますプロジェクトのルートディレクトリ）する場合、デフォルト値は空です
WebPACKのパッケージの出力ファイルは、プロジェクトディレクトリ内を探している、むしろWebPACKの-devのサーバーパッケージの出力ファイルがメモリに保存されているパスの物理アドレスで本当に存在しています未満。

我々はしていない場合webpack.config.jsで指定しpublicPath: 'dist'、その後、HTMLでは、JSファイルのパスが引用されなければなりません<script src="/bundle.js"></script>
パーフェクト設定
// --open表示启动自动打开浏览器
// --port 指定端口
// --contentBase src 自动进入src目录
// --hot每次修改，不在重新生成文件，而是修改原有文件
"dev": "webpack-dev-server --open --port 9999 --contentBase src  --hot"

どのようにHTMLパッケージ

# 安装html打包插件
npm i html-webpack-plugin -D

webpack.config.js

const path = require('path')
// 导入插件
// 作用： 
// 1.自动在内存中生成一个html;
// 2.自动把打包好的bundle.js追加到页面中
const htmlWebpackPlugin = require('html-webpack-plugin')

// 这个配置文件就是一个 js 文件，通过node中的模块操作，向外暴露一个配置对象
module.exports = {
    entry : path.join(__dirname,'./src/main.js'),// 入口，表示要使用webpack打包哪个文件
    output :{
        // publicPath: 'dist' ,// 指定输出目录
        filename : 'bundle.js' // 这是指定输出的文件名称
    },
    plugins:[
        // 创建一个在内存中生成html页面的插件
        new htmlWebpackPlugin({
            template : path.join(__dirname,'./src/index.html'), // 指定模板页面
            filename : 'index.html' // 指定生成的页面名称
        })
    ]
}

そして！！！プラグインが自動的に私たちの追加bundle.jsを支援するためのhtmlは、bundle.jsの導入を必要としません。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="/bundle.js"></script> -->
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
    </ul>
</body>
</html>

処理cssファイル

まだ2回リクエストが存在しますので、ここでは、道の直接リンクを使用することをお勧めしません。


13614469-45cdd26200d239fe.png
プロジェクトディレクトリ

ドキュメントmain.jsを導入するための入口

// 程序入口js
// 导入jquery
import $ from 'jquery'

// 导入css
import './css/index.css'

プロセスはファイルのみのWebPACKのjsの種類をパッケージ化することができるので、エラーは、保存するために使用されることはありませんした後、我々は、サードパーティ製のローダーローダーをインストールする必要があります

npm i style-loader css-loader -D

webpack.config.js新しい構成ノードmoduleは、ルールは、すべてのサードパーティのモジュールを保持するマッチングルールに属性、オブジェクトであります

const path = require('path')
// 导入插件
// 作用： 
// 1.自动在内存中生成一个html;
// 2.自动把打包好的bundle.js追加到页面中
const htmlWebpackPlugin = require('html-webpack-plugin')

// 这个配置文件就是一个 js 文件，通过node中的模块操作，向外暴露一个配置对象
module.exports = {
    entry : path.join(__dirname,'./src/main.js'),// 入口，表示要使用webpack打包哪个文件
    output :{
        // publicPath: 'dist' ,// 指定输出目录
        filename : 'bundle.js' // 这是指定输出的文件名称
    },
    plugins:[
        // 创建一个在内存中生成html页面的插件
        new htmlWebpackPlugin({
            template : path.join(__dirname,'./src/index.html'), // 指定模板页面
            filename : 'index.html' // 指定生成的页面名称
        })
    ],
    module :　{
        rules : [ // 所有第三方模块匹配规则
            // 匹配以.css结尾的的文件，使用style-loader，css-loader处理，顺序从右到左调用
            // 即css-loader先处理，style-loader后处理，都处理完毕，交给webpack打包
            {test: /\.css$/,use: ['style-loader','css-loader']}
        ]
    }
}

NPMの実行DEV実行cssファイルを有効にするかどうかをチェックします

少ないパッキングプロセスとSCSS

main.jsエントリファイル

import './css/index.css'
import './css/index.less'
import './css/index.scss'

インストール中に異常がある場合は、ダウンロードcnpmを試して選択することができます

# 安装cnpm
npm i cnpm -g

# 安装less和less-loader
# less-loader内置依赖less，不许要在配置文件中配置less,sass同理

npm i less -D
npm i less-loader -D

npm i sass -D
npm i sass-loader -D

cnpm install node-sass@latest

プロファイル

const path = require('path')
// 导入插件
// 作用： 
// 1.自动在内存中生成一个html;
// 2.自动把打包好的bundle.js追加到页面中
const htmlWebpackPlugin = require('html-webpack-plugin')

// 这个配置文件就是一个 js 文件，通过node中的模块操作，向外暴露一个配置对象
module.exports = {
    entry : path.join(__dirname,'./src/main.js'),// 入口，表示要使用webpack打包哪个文件
    output :{
        // publicPath: 'dist' ,// 指定输出目录
        filename : 'bundle.js' // 这是指定输出的文件名称
    },
    plugins:[
        // 创建一个在内存中生成html页面的插件
        new htmlWebpackPlugin({
            template : path.join(__dirname,'./src/index.html'), // 指定模板页面
            filename : 'index.html' // 指定生成的页面名称
        })
    ],
    module :　{
        rules : [ // 所有第三方模块匹配规则
            // 匹配以.css结尾的的文件，使用style-loader，css-loader处理
            {test: /\.css$/,use: ['style-loader','css-loader']},
            {test: /\.less$/,use: ['style-loader','css-loader','less-loader']},
            {test: /\.scss$/,use: ['style-loader','css-loader','sass-loader']}
        ]
    }
}

それは始まるwebpack2.xから、その言及する価値があるバージョン1.xが書かれていませんが、書く必要style-loader-load

ます。https：//www.jianshu.com/p/7cf3c01248faで再現

おすすめ

転載: blog.csdn.net/weixin_34396103/article/details/91267778
おすすめ
ランキング
欲張りアルゴリズムLeetcode45ジャンプゲームの証明プロセス
Résumé des outils couramment utilisés pour l'acoustique et l'informatique musicale (soundfile, librosa, pydub, madmom, spleeter)
OpenCVの。コンセプト
直接公式招待コード88886981の下ダイハツ
ミリ秒の形式に現在時刻を取得するJava
umijs/plugin-qiankun (vue+umi) に基づくマイクロフロントエンド構成
クローン化されたカードからLinux仮想マシンは、eth1にはeth0になり
10G SFP + 10G XFP光モジュール及び光モジュール
DevExpressがDateEditを設定して年、月、四半期を表示
Mavenがローカルに外部jarパッケージをインポートする
アーカイブ
もっと
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)

コードワールド

© 2018 codetd.com