Detaillierte Erläuterung der Webpack4.0-Konfiguration

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung der Webpack4.0-Konfiguration vor, die einen gewissen Referenzwert hat. Jetzt kann ich ihn mit allen teilen, die ihn brauchen.

Vorwort

Gelegenheit Es ist immer denjenigen vorbehalten, die vorbereitet sind. Wenn Sie in dieser chaotischen Jobsuche-Saison auffallen möchten, können Sie sich das Angebot sichern, auf das Sie gewartet haben. Dann solltest du viele Dinge wissen, die andere nicht wissen, damit deine Flügel voll sind und du in den Himmel fliegen kannst. Die Fähigkeit eines Adlers, in den Himmel aufzusteigen, beruht nicht auf einer natürlichen Begabung, sondern vielmehr auf der Gefahr, in jungen Jahren von einer Klippe zu fallen. Der dumme Vogel fliegt zuerst, nicht durch Weisheit, sondern durch unermüdliche Anstrengung.

Detaillierte Erklärung von Webpack

Webpack ist ein Verpackungstool. Sein Zweck besteht darin, alle statischen Ressourcen zu packen. Einige Leute werden fragen, warum ein Webpack benötigt wird. Webpack ist der Grundstein der modernen Front-End-Technologie. Herkömmliche Entwicklungsmethoden wie JQuery, HTML und CSS sind ins Hintertreffen geraten. Jetzt ist die Ära der datengesteuerten Schnittstelle MVVM angebrochen. Webpack sammelt und verpackt verschiedene neue und nützliche Technologien in der modernen JS-Entwicklung. Die Beschreibungen von Webpack sind überwältigend, daher werde ich nicht die Zeit aller verschwenden. Wenn Sie diese Art von Diagramm verstehen, kennen Sie das Webpack-Ökosystem:

Konfiguration von Webpack4.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'
                })
            })
        }
    }
    
}

Front-End-Umgebungsaufbau

Wir verwenden npm oder Yarn, um Webpack zu installieren

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

Warum ist Webpack in zwei Dateien aufgeteilt? In Webpack 3 befanden sich Webpack selbst und seine CLI früher im selben Paket, aber in Version 4 wurden die beiden getrennt, um sie besser verwalten zu können.

Erstellen Sie einen neuen Webpack-Ordner, erstellen Sie darunter ein Try-Webpack (um zu verhindern, dass der Projektname während der Initialisierung mit dem Installationspaket übereinstimmt) und initialisieren und konfigurieren Sie das Webpack.

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

2. Webpack bereitstellen

Im oben erstellten Umgebungsprojekt gehen wir zu package.json, um unsere Skripte zu konfigurieren und lassen uns von Webpack

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

konfigurieren, wenn Webpack ausgeführt wird Umgebung, denken Sie an vue-cli. Normalerweise hilft uns die Verwendung von vue-cli automatisch bei der Konfiguration und Generierung von Projekten. Wir entwickeln das Projekt unter src und verwenden schließlich npm run build, um unser dist-Verzeichnis zu packen und zu generieren. Ich weiß nicht, ob Sie sich noch daran erinnern, aber gehen wir zum nächsten Abschnitt und lassen Sie uns den tatsächlichen Prozess spüren.

3. Was ist passiert, als npm build ausgeführt hat?

Erstellen Sie ein neues src-Verzeichnis mit try-webpack unter unserem Root-Projekt. Erstellen Sie eine neue index.js-Datei im src-Verzeichnis. Wir können jeden beliebigen Code darin schreiben und uns dabei auf den Fall konzentrieren:

const a = 1;

Nach dem Schreiben führen wir unseren Befehl npm run build im Terminal aus; Sie finden den neuen A dist Es wurde ein Verzeichnis hinzugefügt, das die von Webpack gepackte Datei main.js enthält. Dies ist dasselbe wie das, was wir in vue-cli tun.

4. Webpackp-Konfigurationsprozess

Welche Dateien unter src verpacken wir normalerweise während der Entwicklung? Wir können uns daran erinnern, dass das vue-cli-Projekt src tatsächlich nur diese Punkte hat:

• HTML, CSS, JS für die Veröffentlichung erforderlich

• CSS-Precompiler-Stift, Less, Sass

• Erweiterte Syntax von es6

• Bildressourcen.png, .gif, .ico, .jpg

• Zwischen Dateien erforderlich

• Alias ​​@ und andere Modifikatoren

dann werde ich Wir erklären die Konfiguration von webpack.config.js in webpack in diesen Punkten und folgen Sie den Schritten, um unsere Prozesslinie Schritt für Schritt abzuschließen.

✍️Html-Konfiguration im Webpack

Erstellen Sie eine neue webpack.config.js-Datei im Try-Webpack-Stammverzeichnis des Projekts, geben Sie sie mithilfe des modularen CommonJS-Mechanismus aus und erstellen Sie einen neuen Index .html.

module.exports = {}

Konfigurieren Sie unseren Eintragseintrag, der in vue-cli äquivalent zu main.js im Verzeichnis ist, unserer Exportausgabe. Wir können Webpack als eine Fabrik verstehen, die dem Einlagern verschiedener Rohstoffe in unsere Fabrik entspricht. Anschließend führt die Fabrik eine Reihe von Verpackungsvorgängen durch, um die verpackten Dinge auszugeben, und sie können dann (online) verkauft werden.

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默认，也可自行配置
    },

Für die HTML-Verpackung müssen wir das HTML-Webpack-Plugin installieren und einführen

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

Konfigurieren Sie unsere Plugins (Plug-Ins) in module.exports:

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

Nach der Konfiguration Nach der Eingabe von npm run dev im Terminal packt Webpack unser HTML und importiert automatisch unser JS.

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

Live-Trennung unseres Dist-Verzeichnisses, Starten eines 8080-Ports und wir können unsere Hello World sehen. Dies ist unsere Online-Version der Seite.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Webpack4.0-Konfiguration. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!