前端构建_webpack

2023年9月6日 200次阅读 来源: 104828720

webpack 是什么？

webpack是一个前端模块化打包东西指（因为模块化开辟，所以须要打包，这里所说的
模块化开辟重要指JS)

因为当代前端运用程序愈来愈庞杂，须要采纳模块化举行开辟，但阅读器还未支撑模块化开辟，所以webpack才降生

webpack默许只支撑js的模块化（CommonJS/ES6/AMD），假如须要把其他文件（css/图片等）也当做模块引入，就须要相对应的loader解析器

当代前端

  • 挂载点
传统前端的挂载点：html进口文件 （无论是js、css照样图片等资本都统一由html文件治理和调理）

当代前端的挂载点：js进口文件 （无论是js组件、css照样图片等资本都统一由js文件治理和调理，html文件作为模板）
  • 模块化与打包东西
传统前端：都是多页面运用，无模块化观点，因而无需打包东西

当代前端：可所以单页面运用，也可所以多页面运用，有模块化观点，因为汗青缘由，许多阅读器还不支撑模块化，故涌现打包东西
  • 导入模块资本
传统前端：在html文件，导入css资本运用<style>或<link>，导入js资本运用<script>，导入图片资本运用url()或许<img src="">

当代前端：在js中导入资本，运用import，在css中导入css资本，运用@import

装置

  • webpack

运用NPM举行装置，有2种体式格局：全局装置、部分装置（
部分又分为临盆部分装置和开辟部分装置）

全局装置： npm i -g webpack

部分开辟装置： npm i -D webpack  // （引荐此）JS运用在临盆环境上不须要webpacke,所以无需运用临盆部分装置

部分装置的项目，会在当前项目中node_module中，不会污染全局

  • webpack-cli
v4.0.0以后，除了要装置webpack，还须要装置webpack-cli

部分开辟装置： npm i -D webpack-cli

设置

  • 默许设置
在运用根目录下，定义webpack.config.js文件

实行webpack时，直接在敕令行输入webpack (会默许寻觅webpack.config.js设置文件)
  • 自定义设置
在运用根目录下，自定义webpack.config.dev.js文件

实行webpack时，直接在敕令行输入webpack --config webpack.config.dev.js

假如把webpack.config.dev.js设置文件放在根目录下的文件夹里呢？
  • 最简朴设置 —— 打包JS模块
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'development'
};

插件

  • 简朴建立 HTML 文件，用于服务器接见

一切打包好的JS文件，都要有一个html文件来引入，不然阅读器没法阅读，这个功用就是webpack插件
HtmlWebpackPlugin功用

1、装置
npm install --save-dev html-webpack-plugin

2、在webpack.config.js文件中设置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'main.html'
        })
    ],
    mode: 'development'
};

服务器 for dev

webpack供应了一个用于开辟运用的服务器：
webpack-dev-server，前端运用开辟，须要一个调试开辟服务器来看立即结果

  • 装置
npm install webpack-dev-server --save-dev
  • 设置
1、设置实行服务器敕令
在package.json中，设置
"scripts": {
    "sdev": "webpack-dev-server"
}
*****注重：默许服务器是读取webpack.config.js文件，假如自定义了，须要加上--config webpack.config.dev.js*****

2、在webpack设置文件中设置
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'main.html'
        })
    ],
    mode: 'development',
    devServer: {
        open: true,  // 自动开启
        contentBase: path.join(__dirname, 'dist'),
        index: 'main.html'
    }
};
  • 实行道理
实行webpack，依据设置文件，会天生打包后的文件（硬盘）
实行webpack-dev-server，依据设置文件，会天生打包后的文件（内存），并启动服务器

Babel 语法转换

Babel 是一个 NodeJS的自力运用，用于把ES2015/ES2016/ES2017/React转换成ES5

用法：
1、在阅读器中运用
2、webpack打包中运用 （以下重要解说这类体式格局）
3、敕令行直接运用

  • 装置
npm install -D babel-loader @babel/core @babel/preset-env

CSS 引入

在webpack中任何一个东西都称为模块，js就不用说了。一个css文件，一张图片、一个less文件都是一个模块，都能用导入模块的语法（commonjs的require，ES6的import）导入进来。webpack自身只能读懂js范例的文件，别的的都不熟悉。然则webpack却能编译打包别的范例的文件，像ES6、JSX、less、typeScript等，以至css、images也是Ok的，而想要编译打包这些文件就须要借助loader

import（导入）是ES6 Module的模块化语法，与export（导出）是一对对应的手艺，所以
*ES6 所说的导入都是导入 JS 文件*，而这个JS文件平常会有导出语法

  • 题目：为什么webpack中能运用ES6 import语法导入CSS文件？
实在ES6 import语法没有划定一定要导入JS文件，但假如你导入的黑白JS文件，运转时会报错的

webpack借用了ES6的导入/导出语法，自身就支撑导入JS文件
假如须要转ES5，须要分外设置一个loader

差别的是:
webpack还支撑导入别的文件（图片、css、less等），语法也是借用了ES6的导入/导出语法，须要分外设置一个loader
  • 装置
npm i style-loader css-loader -D
  • 设置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './public/index.html'
        })
    ],
    devServer: {
        open: true,
        contentBase: path.join(__dirname, 'dist'),
        index: 'index.html'
    },
    module:{
        rules:[{
            test:/\.css$/,
            use: ['style-loader', 'css-loader']  //实行loader的先后递次是从右到左，必须先实行css-loader
        }]
    }
};

明白 [‘style-loader’, ‘css-loader’] 实行递次，就相当于
styleLoader( cssLoader( fileSource ) )

  • css-loader
重要用于把.css文件的内容中@import/url()转成js的导入语法import/require并实行，输入的是.css文件内容，末了常常css-loader加载器处置惩罚后，获得的是css代码字符串
  • style-loader
重要用于把css-loader处置惩罚后的css代码字符串增加到页面head内<style>中，然则经由过程js动态增加进去的
    原文作者：104828720
    原文地址: https://segmentfault.com/a/1190000017569165
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞