Explication détaillée de la configuration du webpack4.0

Cet article présente principalement l'explication détaillée de la configuration du webpack4.0, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Avant-propos

Opportunité. Elle est toujours réservée à ceux qui sont préparés. Si vous souhaitez vous démarquer dans cette saison chaotique de recherche d'emploi, vous pouvez obtenir l'offre que vous attendiez. Ensuite, vous devriez savoir beaucoup de choses que les autres ne savent pas, afin que vos ailes puissent être pleines et que vous puissiez planer dans le ciel. La capacité d’un aigle à s’envoler dans le ciel n’est pas due à son talent naturel, mais plutôt au danger de tomber d’une falaise lorsqu’on était jeune. L’oiseau stupide vole le premier, non par sagesse, mais par des efforts inlassables.

Explication détaillée de webpack

Webpack est un outil de packaging Son but est de conditionner toutes les ressources statiques. Certaines personnes se demanderont pourquoi le webpack est nécessaire ? Webpack est la pierre angulaire de la technologie front-end moderne, les méthodes de développement conventionnelles, telles que le développement Web statique jquery, HTML et CSS, ont pris du retard. C’est désormais l’ère du MVVM, interface basée sur les données. Webpack collecte et regroupe diverses technologies nouvelles et utiles dans le développement js moderne. Les descriptions de webpack sont accablantes, je ne ferai donc pas perdre de temps à tout le monde. Comprenez ce genre de schéma et vous connaîtrez l'écosystème du webpack :

Configuration du 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'
                })
            })
        }
    }
    
}

Construction de l'environnement front-end

On utilise npm ou Yarn pour installer webpack

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

Pourquoi webpack est-il divisé en deux fichiers ? Dans webpack 3, webpack lui-même et son cli étaient dans le même package, mais dans la version 4, ils ont séparé les deux pour mieux les gérer.

Créez un nouveau dossier webpack, créez un try-webpack en dessous (pour éviter que le nom du projet n'ait le même nom que le package d'installation lors de l'initialisation) et initialisez et configurez webpack.

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

2. Déployer webpack

Dans le projet d'environnement construit ci-dessus, nous allons sur package.json pour configurer nos scripts, laissons webpack

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

Après la configuration notre environnement d'exécution webpack, associé à vue-cli. Normalement, l'utilisation de vue-cli nous aidera automatiquement à configurer et générer des projets. Nous développons le projet sous src et utilisons enfin npm run build pour empaqueter et générer notre répertoire dist. Je ne sais pas si vous vous en souvenez encore, mais passons à la section suivante et ressentons le processus réel.

3. Que s'est-il passé lorsque npm exécute build

Créez un nouveau répertoire src avec try-webpack sous notre projet racine. Créez un nouveau fichier index.js dans le répertoire src. Nous pouvons y écrire n'importe quel code, en nous concentrant sur le cas :

const a = 1;

Après l'écriture, nous exécutons notre commande npm run build dans le terminal, vous trouverez le nouveau A dist ; Un répertoire a été ajouté, qui contient le fichier main.js packagé par webpack. C'est la même chose que ce que nous faisons dans vue-cli.

4. Processus de configuration de Webpackp

Quels fichiers sous src emballons-nous habituellement pendant le développement ? On peut rappeler qu'en fait, il n'y a que ces points sous le src du projet vue-cli :

• HTML, css, js requis pour la publication

• stylet de précompilateur CSS, less, sass

• Syntaxe avancée d'es6

• Ressources d'images.png, .gif, .ico, .jpg

• exiger entre les fichiers

• alias @ et autres modificateurs

alors je le ferai Nous vous expliquerons la configuration de webpack.config.js dans webpack dans ces points, et suivez les étapes pour compléter notre ligne de processus étape par étape.

✍️Configuration HTML dans webpack

Créez un nouveau fichier webpack.config.js dans le répertoire racine try-webpack du projet, affichez-le à l'aide du mécanisme modulaire commonJS et créez un nouvel index .html.

module.exports = {}

Configurez notre entrée d'entrée, qui en vue-cli est équivalente à main.js dans le répertoire, notre sortie d'export. Nous pouvons comprendre le webpack comme une usine. Entrer équivaut à mettre diverses matières premières dans notre usine, puis l'usine effectue une série d'opérations d'emballage pour produire les objets emballés, puis ils peuvent être vendus (en ligne).

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

Pour le packaging HTML, nous devons installer et introduire html-webpack-plugin

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

Configurer nos plugins (plug-ins) dans module.exports :

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

Après la configuration, entrez npm run dev dans le terminal et webpack emballera notre html et importera automatiquement notre js.

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

supprimez en direct notre répertoire dist, démarrez un port 8080 et nous pourrons voir notre Hello World. Ceci est notre version en ligne de la page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!