WebPACKのを取得、これを見ては十分です

その他 2019-07-31 15:40:24 訪問数: null

WebPACKのは何ですか？

コンセプトは、公式サイトを提供します：基本的に、WebPACKのは、静的モジュール近代的なJavaScriptアプリケーションパッカー（モジュールバンドラ）があります。処理アプリケーションをWebPACKの場合は、再帰的依存関係グラフ（依存関係グラフ）を構築する各モジュールがアプリケーション所望を含み、これらのモジュールの全ては、次いで、束の一つ以上にパッケージされています。

なぜWebPACKの？

WebPACKの、これはフロントエンドの開発であるべきと関係があり、また、フロントエンドの急速な発展につながった、コンピュータネットワークの急速な発展ので、最初のプラクティスは我々のニーズを満たすことができない、新しい技術や新しいアイデアのフレームワークと相まってなぜ開発のコストと効率を節約するために、それはWebPACKのを生成し、生成必然的な結果であり、

比較すると一気、イサキ、ロールアップ、なぜ使用するのWebPACK？

自動的に、その後、飲み込むとイサキ操作がストリーミング配信されますが、がぶ飲みは、メモリストリームに基づいており、イサキはファイルストリームに基づいているので、イサキより相対的に言って、ゴクゴク性能、そして彼らはすべてのタスクを定義する必要がありますタスクの実行。WebPACKの組織は、モジュラー、モジュラー依存で、その後、モジュール式の開発にモジュラー、相対的に言って、WebPACKをより重視パッケージ化、およびそれらのファイルに圧縮され、前処理や他の機能をマージし、彼の付帯機能しています。そして今、前の両方に関連して、WebPACKの、より豊富なプラグイン

ロールアップはWebPACKのよりWebPACKの、機能やプラグインのロールアップは、などのWebPACK完璧ではないが、ロールアップパッケージJavaScriptライブラリのための、よりに比べて、後にWebPACKの人気の代替、および同様のロールアップのWebPACKを表示されますが、ES6モジュールパッケージに焦点を当てていますはい、包装コードが小さく高速ので。しかし、機能が完全でないためにも、多くのシーンは、既製の解決策を見つけることができません。

 

インストールと使用

今ので、それはBenpianので、直接話すことによって、4.0以降へのWebPACKに更新されてい4.0+まあ

ファイルpackage.jsonを作成します。

また、初期化は手動で作成することが可能と呼ばれる、あなたはまた、コマンドを作成することが推奨され、自動的に作成するコマンドを使用することができます

NPM熱

そして、独自の構成ファイル名、バージョン番号など

インストールが早い場合は、次のコマンドを使用します（-y使用のデフォルトパラメータ）

NPMのinit -y

注：ラクダは、名前の場合、名前の値が内部1.packageファイル属性、そして警告が報告されます

　　　 2.私たちは、ファイル名は、ファイルpackage.jsonのJSONオブジェクトなので、構文はJSONフォーマットに従って厳格でなければならないことを知って、コメントを追加することはできません、属性と値が唯一の二重引用符ではない単一引用符、これ以上のカンマを使用することができます 

package.jsonファイルの説明：

インストール

WebPACKのは、我々は、このコマンドのWebPACK使用する必要があるため、NPM、インストールを直接使用することができ、グローバルにインストールする必要があります

NPM私WebPACKの-g

次に、プロジェクト内に設置

NPM私のWebPACK -S

注意事項：WebPACKの4+上記は、あなたもそうWebPACKの-CLIをインストールする必要があり、WebPACKの-cliをインストールする必要があります

NPM私はWebPACKの-CLI -S

端末入力ファイルのWebPACKであなたを待って、構成されたwebpack.config.jsをインストールし、上記の手順を押した後、あなたは次のような問題が発生する可能性があります

ソリューション：グローバルインストールはWebPACKの-CLIを見ることができます

NPM私WebPACKの-g

このインストール手順は、どのように次のように使用する方法を教えるために、取得する必要があります

使用

srcフォルダ、パブリックフォルダ、およびファイルのwebpack.config.jsを作成します。

index.htmlを

<!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>
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

配置webpack.config.js

module.exports = {
  mode:'development', // 当前的开发模式
  entry:  __dirname + "/src/main.js",// 入口文件
  output: {
    path: __dirname + "/dist",// 打包后的文件存放的地方
    filename: "bundle.js" // 打包后输出文件的文件名
  }
}

这些基础配置完之后,我们在项目的终端输入

webpack

就会输出一下信息

看到这样的信息的话,那么恭喜你,你的第一个webpack项目完成了

此时你会看到文件夹目录下会多了一个dist文件夹

OK,上面的文件写法我们还可以做一下改进,例如文件的文件路径问题,我们需要写成的是绝对路径,node里面有自带一个path模块,我们可以换成下面的写法

const path=require('path');
module.exports={
 
    mode:'development',
    // 入口文件
    entry:'./src/main.js',
    // 出口文件
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'public')
    }
}

上面这个是单个入口文件的写法,有单个入口的话,那肯定是有多个入口的啊,下面这段就是多个入口文件的写法:

const path=require('path');
module.exports={
    mode:'development',
    // 多个入口的话,在这边配置
    entry:{
        index:'./src/js/1.js',
        admin:'./src/js/index.js',
    },
    output:{
        // 出口的名字就是上面entry定义的名字,上面定义的是index和admin,打包后在dist文件夹里面的js就是index.min.js和admin.min.js
        filename:'[name].js',
        
        path:path.resolve(__dirname,'dist')
    }
}

在出口文件处的filename中,就不需要写死bundle.js这些了,直接用name变量来接收,打包出来后的文件名字来源于entry中入口文件中的定义的键,如上面的就是index和admin

资源管理

webpack本身只能处理javascript,如果要处理其他类型的文件的话,就需要使用loader来进行转换。下面我就列举了我们经常用的几个

css-loader---->引入css文件

我们可以在src文件夹里面新建一个css文件夹，然后在里面新建一个main.css文件。在webpack中，所有的文件都是一个模块，所以要使用这个css文件，就必须要先引入

在main.js文件中引入css文件

import './css/main.css'

然后在终端输入webpack后发现报错啦

这个时候呢，安装一下css需要使用到的loader，然后在配置一下在试试

安装

处理css需要使用到两个loader，css-loader和style-loader

npm install --save-dev style-loader css-loader

在webpack.config.js中配置loader

module.exports={
    // 当前的开发模式 
    // 开发模式:development,会保留我们开发时的一些必要信息
    // 生产模式:production会尽力压缩,能压多大就压多大
    // none:什么也不干,就只是打包
    mode:'development',
    entry:'./src/js/main.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    // 添加的module里面的rules
    module:{
        rules:[
            {
                test:/\.css$/,
                // webpack的loader执行顺序是反的,先执行css-loader后执行style-loader
                use:[
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

说明: loader都是在module里面的rules中配置的,rules是一个数组配置规则,该规则告诉webpack符合test的文件，使用use后面的loader处理,所以该规则就是对所有的.css文件使用css-loader、style-loader

注意点：loader的执行顺序是由右向左执行的，先执行css-loader后在执行style-loader

在终端输入webpack后，提示下面的信息就是成功啦

 常用的loader

资源 loader名
图片 file-loader
sass saa-loader
less less-loader
babel babel-loader
字体 file-loader和url-loader

加载图片

安装

npm install --save-dev file-loader

配置loader

 rules:[
            {
                test:/\.css$/,
                // webpack的loader执行顺序是反的,先执行css-loader后执行style-loader
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
+            {
+               test: /\.(png|svg|jpg|gif)$/,
+               use: [
+                   'file-loader'
+                    ]
+           }
+       ]

加载字体

webpack.config.js中配置

{
         test: /\.(woff|woff2|eot|ttf|otf)$/,
         use: [
          'file-loader'
         ]
}

加载less

安装

npm install --save-dev less-loader less

配置

{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }

加载sass

安装

npm install sass-loader node-sass --save-dev

配置:

{
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        }]
    }

加载ES6及以上版本及jsx文件

安装:

npm install -D babel-loader @babel/core @babel/preset-env

配置:

{
        test: /\.(js|jsx)$/i,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }

总的配置集合


    module:{
        rules:[
            // 加载css
            {
                test:/\.css$/,
                // webpack的loader执行顺序是反的,先执行css-loader后执行style-loader
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            // 加载图片
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                    ]
            },
            // 加载字体
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                'file-loader'
                ]
            },
            // 加载less
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },
            // 加载sass
            {
                test: /\.scss$/,
                use: [
                    "style-loader", // creates style nodes from JS strings
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
                ]
            },
            // 加载base64
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      limit: 8192 // 当图片小于8192K之后转为base64
                    }
                  }
                ]
            },
            // 加载数据
            {
                test: /\.(csv|tsv)$/,
                use: [
                'csv-loader'
                ]
            },
            {
                test: /\.xml$/,
                use: [
                'xml-loader'
                ]
            },
　　　　　　　// 加载ES6以上版本
            {
                test: /\.(js|jsx)$/i,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
              }
        ]
    }

Plugin

插件(Plugin)是用来扩展webpack功能的,webpack可以实现loader所不能实现完成的复杂功能,使用plugin丰富的自定义API以及生命周期事件,可以控制webpack打包流程的每个环节,实现webpack的自定义功能扩展

html-webpack-plugin：生成html文件

html-webpack-plugin 可以根据你设置的模板，在每次运行后生成对应的模板文件，同时所依赖的 CSS/JS 也都会被引入，如果 CSS/JS 中含有 hash 值，则 html-webpack-plugin 生成的模板文件也会引入正确版本的 CSS/JS 文件。

安装

npm i html-webpack-plugin -D

修改配置文件

const path=require('path');
const HtmlPlugin=require('html-webpack-plugin');
module.exports = {
    entry:  __dirname + "/src/main.js",//已多次提及的唯一入口文件
    output: {
      path:path.resolve(__dirname, './dist'),//打包后的文件存放的地方
      filename: "bundle.js"//打包后输出文件的文件名
    },
    module:{
        rules:[
            // 加载css
            {
                test:/\.css$/,
                // webpack的loader执行顺序是反的,先执行css-loader后执行style-loader
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            // 加载图片
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                    ]
            },
            // 加载字体
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                'file-loader'
                ]
            },
            // 加载less
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },
            // 加载sass
            {
                test: /\.scss$/,
                use: [
                    "style-loader", // creates style nodes from JS strings
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
                ]
            },
            // 加载base64
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        outputPath: 'images/',
                        limit: 8*1024 // 当图片小于8192K之后转为base64
                    }
                  }
                ]
            },
            // 加载数据
            {
                test: /\.(csv|tsv)$/,
                use: [
                'csv-loader'
                ]
            },
            {
                test: /\.xml$/,
                use: [
                'xml-loader'
                ]
            },
            {
                test: /\.(js|jsx)$/i,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
              }
        ]
    },
    plugins: [
        new HtmlPlugin(),
      ]
  }

配置完之后,你会看到在dist文件夹下面会多了一个index.html文件

如果你想打包一个固定的模板的话,你可以在实例化插件的时候添加参数配置

plugins: [
        new HtmlPlugin({
            template: './public/index.html' // 模板的地址
        }),
      ]

分离css文件--MiniCssExtractPlugin

在webpack中,默认css文件是一起打包进js文件里面去的,如果你希望打包后css在单独的文件中的话,name你就需要MiniCssExtractPlugin（ExtractTextPlugin在webpack4+版本中已经废弃掉了，如果使用4以下的版本的话，可以自行官网查api，也是类似的写法的）这个plugin了

安装

npm i mini-css-extract-plugin -D

在webpack.config.js中的配置

const path=require('path');
const HtmlPlugin=require('html-webpack-plugin');
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
module.exports = {
    entry:  __dirname + "/src/main.js",//已多次提及的唯一入口文件
    output: {
      path:path.resolve(__dirname, './dist'),//打包后的文件存放的地方
      filename: "bundle.js"//打包后输出文件的文件名
    },
    module:{
        rules:[
            // 加载css
            {
                test:/\.css$/,
                // webpack的loader执行顺序是反的,先执行css-loader后执行style-loader
                use:[ {
                    loader: MiniCssExtractPlugin.loader,
                  }, 
                    'css-loader'
                ]
            },
        ]
    },
    plugins: [
        new HtmlPlugin({
            title:'webpack test',
            template:path.join(__dirname, './public/index.html')
        }),
        new MiniCssExtractPlugin({
            filename:'[name].css',
            chunkFilename:'[id].css'
        })
      ]
  }

配置完成后在终端输入webpack,你会发现dist文件夹里面会多了一个main.css文件(前面已经在src目录下的css文件夹中新建了main.css,并导入到了main.js中),到这,css就已经抽离出来啦

构建运行环境

我们平时开发的时候,例如gulp都会区分开发环境还是生产环境,这两个环境下所要配置的一些参数肯定是要不一样的,而且我们在开发环境下,并不需要打包。在这种情况下，我们要这么去区分运行环境呢？webpack提供了一个webpack-dev-server工具给我们搭建本地运行环境。有了这个插件之后，我们可以配置命令脚本快捷运行

安装webpack-dev-server

npm i webpack-dev-server -D

然后在package.json配置中的script里面脚本命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server ",
    "dev": "webpack-dev-server ",
    "build": "webpack"

  }

通过上面的代码，我们可以知道，在看法环境下才要运行项目环境，如果打包的时候就用build的那个命令来充当生产环境

开发环境命令使用

npm run start
// 或
npm run dev

生产环境命令使用

生产环境下的话，我们需要做的是打包的工作

npm run build

 

了解npm 命令的话，我们应该知道，在npm的命令脚本中，我们是可以添加参数的，我们可以通过添加参数来设置一下在开发环境下自动在默认浏览器中打开项目

默认的端口是8080端口

修改默认端口

嗯，有些时候我们的端口可能被其他项目占用着，所以为了项目得以运行，肯定是要改一下端口的啊。我们可以在配置命令脚本的时候添加参数--port 端口号 

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open --port 3000",
    "dev": "webpack-dev-server ",
    "build": "webpack"
  },

此时的端口就已经改为了3000端口了

自动热更新

我们每次修改完都要重启一下运行环境，这样的操作效率太低了，而且很浪费时间，我们要怎么做到每次修改完他都会自动更新呢，当然是有解决方法的啊，添加--hot参数即可

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open --port 3000 --hot",
    "dev": "webpack-dev-server ",
    "build": "webpack"
  }

开发的时候区分环境更项目配置的，可以查看我的上一篇的使用webpack构建简易的vue-cli框架的笔记

 

おすすめ

転載: www.cnblogs.com/cythia/p/11265727.html
おすすめ
ランキング
--- ELオプションを搭載するテンプレートを指定するオプションをレンダリング別テンプレート/使用を指定するためのオプションを使用して、インラインテンプレート/テンプレートの使用を指定するために、テンプレート/テンプレートオプションを使用してテンプレートを指定します
0216leetcodeはPythonで5つの質問をブラシします
ショック！七つの子どもたちは魂を拷問しました！暴露子どもたちはインサイダーを振っプログラム！
ターゲット属性タグをhtmlの
Linuxビルドnacosスタンドアロンバージョンとクラスター
Cálculo experimental da renda simulada de investimento fixo do fundo
Kali Linux は VMware ツールをインストールします (vmtools ボタンは灰色です)
程序员洞察报告：90后占比过半 搜索算法等岗位人才短缺
【Java基礎シリーズチュートリアル】第17章 Javaアノテーション
Javaでの空白を入力できないようにユーザー
アーカイブ
もっと
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)

コードワールド

© 2018 codetd.com