webpack4.0の設定の詳細説明

この記事では主に webpack4.0 の設定について詳しく説明します。必要な方はぜひ参考にしてください。混沌とした就活シーズンで目立ち、待ち望んでいた内定を獲得したい。そうすれば、他の人が知らないことをたくさん知って、翼を広げて空に飛べるはずです。ワシが空を飛べるのは生まれ持った才能によるものではなく、幼い頃に崖から落ちる危険があったからなのです。愚かな鳥は、知恵によってではなく、たゆまぬ努力によって最初に飛びます。

webpackの詳しい説明

Webpackは、すべての静的リソースをパッケージ化することを目的としています。なぜ Webpack が必要なのかと疑問に思う人もいるでしょう。 Webpack は、最新のフロントエンド テクノロジの基礎であり、jquery、html、css の静的 Web 開発などの従来の開発手法は遅れています。今は MVVM、データ駆動型インターフェイスの時代です。 Webpack は、最新の JS 開発におけるさまざまな新しくて便利なテクノロジを収集し、パッケージ化します。 webpack の説明は膨大なので、皆さんの時間を無駄にするつもりはありません。このような図を理解すると、webpack のエコシステムがわかります:

webpack 4.0の構成

const path = require('path');  //引入node的path模块
const webpack = require('webpack'); //引入的webpack,使用lodash
const HtmlWebpackPlugin = require('html-webpack-plugin')  //将html打包
const ExtractTextPlugin = require('extract-text-webpack-plugin')     //打包的css拆分,将一部分抽离出来  
const CopyWebpackPlugin = require('copy-webpack-plugin')
// console.log(path.resolve(__dirname,'dist')); //物理地址拼接
module.exports = {
    entry: './src/index.js', //入口文件  在vue-cli main.js
    output: {       //webpack如何输出
        path: path.resolve(__dirname, 'dist'), //定位，输出文件的目标路径
        filename: '[name].js'
    },
    module: {       //模块的相关配置
        rules: [     //根据文件的后缀提供一个loader,解析规则
            {
                test: /\.js$/,  //es6 => es5 
                include: [
                    path.resolve(__dirname, 'src')
                ],
                // exclude:[], 不匹配选项（优先级高于test和include）
                use: 'babel-loader'
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                    'css-loader',
                    'less-loader'
                    ]
                })
            },
            {       //图片loader
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader' //根据文件地址加载文件
                    }
                ]
            }
        ]                  
    },
    resolve: { //解析模块的可选项  
        // modules: [ ]//模块的查找目录 配置其他的css等文件
        extensions: [".js", ".json", ".jsx",".less", ".css"],  //用到文件的扩展名
        alias: { //模快别名列表
            utils: path.resolve(__dirname,'src/utils')
        }
    },
    plugins: [  //插进的引用, 压缩，分离美化
        new ExtractTextPlugin('[name].css'),  //[name] 默认  也可以自定义name  声明使用
        new HtmlWebpackPlugin({  //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上，项目包。可以直接上线
            file: 'index.html', //打造单页面运用 最后运行的不是这个
            template: 'src/index.html'  //vue-cli放在跟目录下
        }),
        new CopyWebpackPlugin([  //src下其他的文件直接复制到dist目录下
            { from:'src/assets/favicon.ico',to: 'favicon.ico' }
        ]),
        new webpack.ProvidePlugin({  //引用框架 jquery  lodash工具库是很多组件会复用的，省去了import
            '_': 'lodash'  //引用webpack
        })
    ],
    devServer: {  //服务于webpack-dev-server  内部封装了一个express 
        port: '8080',
        before(app) {
            app.get('/api/test.json', (req, res) => {
                res.json({
                    code: 200,
                    message: 'Hello World'
                })
            })
        }
    }
    
}

1. フロントエンド環境の構築

webpackのインストールにはnpmまたはyarnを使用します

npm install webpack webpack-cli -g 
# 或者 
yarn global add webpack webpack-cli

webpackが2つに分かれている理由ファイルはどこにありますか? webpack 3 では、webpack 自体とその cli は同じパッケージ内にありましたが、バージョン 4 では、管理を改善するために 2 つが分離されました。

新しい webpack フォルダーを作成し、その下に try-webpack を作成し (初期化中にプロジェクト名がインストール パッケージと同じ名前にならないようにするため)、webpack を初期化して構成します。

 npm init -y  //-y 默认所有的配置
 yarn add webpack webpack-cli -D  //-D webpack安装在devDependencies环境中

2. webpack をデプロイします

上記で構築した環境プロジェクトで、package.json に移動してスクリプトを構成し、webpack

  "scripts": {
    "build": "webpack --mode production" //我们在这里配置，就可以使用npm run build 启动我们的webpack
  },
  "devDependencies": {
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }

に webpack 実行環境を構成させ、vue-cli を関連付けます。通常、vue-cli を使用すると、プロジェクトの構成と生成が自動的に行われます。 src の下でプロジェクトを開発し、最後に npm run build を使用してパッケージ化し、dist ディレクトリを生成します。まだ覚えているかわかりませんが、次のセクションで実際のプロセスを感じてみましょう。

3. npm が build を実行すると何が起こるか

ルート プロジェクトの下に try-webpack を使用して新しい src ディレクトリを作成します。 src ディレクトリに新しい Index.js ファイルを作成します。ケースに焦点を当てて、任意のコードを記述できます:

const a = 1;

記述後、ターミナルでコマンド npm run build を実行すると、新しい dist ディレクトリが追加されていることがわかります。 webpack によってパッケージ化された main.js ファイル。これは vue-cli で行うことと同じです。

4. Webpackp 設定プロセス

開発中に通常、src の下にどのファイルをパッケージ化しますか?実際、vue-cli プロジェクトの src には次の点だけがあることを思い出してください:

HTML、css、公開に必要な js

• css プリコンパイラー stylus、less、sass

• es6 の高度な構文

• 画像リソース.png, .gif, .ico, .jpg

• ファイル間に必要な

• alias @とその他の修飾子

• 次に、これらの点に分けて説明します webpackの構成を説明しますwebpack の .config.js を開き、手順に従ってプロセス行を段階的に完了します。

✍️webpack での Html 設定

プロジェクトのルート ディレクトリである try-webpack の下に新しい webpack.config.js ファイルを作成し、commonJS モジュラー メカニズムを使用して出力し、新しい Index.html を作成します。

module.exports = {}

エントリ エントリを設定します。これは、vue-cli では、エクスポート出力であるディレクトリ内の main.js に相当します。 webpack を工場として理解すると、さまざまな原材料が工場に投入され、その後、工場で一連の梱包作業が行われ、梱包されたものが (オンラインで) 販売されるようになります。

const path = require('path'); //引入我们的node模块里的path
//测试下 console.log(path.resolve(__dirname,'dist')); //物理地址拼接
module.exports = {
    entry: './src/index.js', //入口文件  在vue-cli main.js
    output: {       //webpack如何向外输出
        path: path.resolve(__dirname, 'dist'),//定位，输出文件的目标路径
        filename: '[name].js' //文件名[name].js默认，也可自行配置
    },

html-webpack-plugin をインストールして導入する必要がある HTML パッケージング

yarn add html-webpack-plugin -D //在开发环境中安装
const HtmlWebpackPlugin = require('html-webpack-plugin')  //引入打包我们的HTML

module.exports でプラグイン (プラグイン) を設定します:

 plugins: [  //插进的引用, 压缩，分离美化
        new HtmlWebpackPlugin({  //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上，项目包。可以直接上线
            file: 'index.html', //打造单页面运用 最后运行的不是这个
            template: 'src/index.html'  //vue-cli放在跟目录下
        }),
    ],

設定後、ターミナルで npm run dev と入力すると、webpack がパッケージ化します。 html さて、js が自動的にインポートされました。

    <p>Hello World</p>
<script></script>

dist ディレクトリをライブサーバー化し、8080 ポートを開始すると、Hello World が表示されます。これはオンライン版のページです。

以上がwebpack4.0の設定の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。