webpack 5.68.0版本教程示例详解

目录
  • 起步
    • 1. 基本安装
    • 2. 配置出入口
  • plugin
    • 1. html-webpack-plugin
    • 2. progress-bar-webpack-plugin
  • loader
    • 1. css-loader与style-loader
    • 2. url-loader与file-loader
    • 3. sass-loader
    • 4. postcss-loader
    • 5. babel-loader
  • 搭建环境
    • 1. 开发环境与生产环境
    • 2. 配置别名
  • 代码分离
    • 1. webpack-bundle-analyzer
    • 2. splitChunks(分离chunks)
    • 3. 动态导入(按需加载chunks)
    • 4. mini-css-extract-plugin(分离css)
  • 缓存
    • 1. contenthash
  • 定义全局环境变量
    • 1. 定义编译时全局变量
    • 2. 定义编译后全局变量
  • 优化打包体积
    • 1. 开启gzip压缩
    • 2.css-minimizer-webpack-plugin
    • 3. externals
  • 配置Vue
  • 配置React

起步

版本:"webpack": "^5.68.0"

前言:一定要注意版本,webpack更新太快了。对于一个前端来说,面试的时候总是会被问到webpack相关问题,这里带大家搭建一个简易的Vue/React项目,对webpack有个初步了解,也会提一些面试被经常的问题。码字不易,点赞支持!!!

提示:修改了配置文件,要查看效果时,需要重启项目

GitHub地址:github.com/cwjbjy/webp…

文章根据评论区提出的问题,做出了相应的更新,并且将webpack的版本升级到5.68.0

1. 基本安装

(1)创建webpack5文件夹,用vscode打开,通过终端运行:

npm init -y
npm install -g yarn //如果安装过yarn就不用运行了
yarn add webpack webpack-cli -D

(2)在webpack5目录下新建 src,dist 文件夹

新建 src/main.js

console.log('Interesting!')

2. 配置出入口

新建build/webpack.common.js

(1)配置入口

可配置多个入口。但开发中一般是react或vue,为单页面web应用(SPA),入口一个即可

//webpack.common.js
const path = require('path')
module.exports = {
  entry: path.resolve(__dirname, "../src/main.js"),
}

(2)配置出口

只能有一个出口,这里指定输出路径为'dist'

//webpack.common.js
module.exports = {
  output: {
    path:path.resolve(__dirname,'../dist'),
    filename: '[name].bundle.js',
    clean:true //每次构建清除dist包
  },
}

现在,我们具有了最低配置。在package.json中,我们创建一个运行webpack命令构建脚本

"scripts": {
  "build":"webpack --config build/webpack.common.js",
}

现在可以运行它了:

npm run build

在dist文件夹下会生成main.bundle.js

目录结构:

plugin

插件(Plugins)是用来拓展Webpack功能的,包括:打包优化、资源管理、注入环境变量

插件使用:只需要require()它,然后把它添加到plugins数组中

1. html-webpack-plugin

html-webpack-plugin将为你生成一个HTML5文件,在body中使用script标签引入你所有webpack生成的bundle

(1)安装

yarn add -D html-webpack-plugin

(2)新建 public/index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app"><div>123
        </div>
        </div>
    </body>
    </html>

(3)配置

//webpack.common.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, '../public/index.html'),
        filename: 'index.html',
    }),
  ],
}

(4)运行

npm run build

可以看到dist下多了index.html文件,并且打包生成的main.bundle.js在index.html中通过script标签被引入

2. progress-bar-webpack-plugin

作用:增加编译进度条

(1)安装:

yarn add progress-bar-webpack-plugin -D

(2)配置:

//webpack.common.js
const chalk = require("chalk");
const ProgressBarPlugin = require("progress-bar-webpack-plugin");
module.exports = {
  plugins: [
    // 进度条
    new ProgressBarPlugin({
      format: `  :msg [:bar] ${chalk.green.bold(":percent")} (:elapsed s)`,
    }),
  ],
};

loader

loader 用于对模块的源代码进行转换

loader都在module下的rules中配置

loader配置项包括:

  • test 正则校验(必须)
  • loader 调用loader的名称 / use 链式调用loader (二选一)
  • include/exclude 手动添加必修处理的文件/文件夹或屏蔽不需要处理的文件/文件夹(可选)
  • options 为loaders提供额外的设置选项(可选)

tip:use链式调用,都是从右向左解析,需注意调用loader的顺序。loader要记住,面试经常被问到有哪些loader以及其作用

1. css-loader与style-loader

作用:加载css

css-loader:会对@import和url()进行处理

style-loader:将CSS注入到JavaScript中,通过DOM操作控制css

(1)安装

yarn add css-loader style-loader -D

(2)在webpack.common.js中进行配置

module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"], //从右向左解析
      },
    ],
  },

(3)示例

新建src/assets/styles/style.css

body{
    background-color: aqua;
}

在main.js中引入

import './assets/styles/style.css'

重新编译 npm run build,在浏览器中打开 dist/index.html,可以看到css已生效

2. url-loader与file-loader

webpack5内置了资源模块(asset module),代替了file-loader和url-loader

例:加载图片资源

//在rules下增加
   {
    test: /\.(png|svg|jpg|jpeg|gif)$/i,
    type: "asset",
    generator: {
      filename: "static/img/[name].[hash:7][ext]",
    },
  },

3. sass-loader

(1)安装

yarn add sass-loader node-sass -D

(2)修改原先的css规则,改为:

{
    test: /\.(css|scss|sass)$/,
    use: ['style-loader', 'css-loader', 'sass-loader'] //从右往左编译的
},

(3)新建src/assets/blue.scss文件

$blue: blue;
body{
    color: $blue;
}

(4)在main.js中引入blue.scss

import './assets/styles/blue.scss'

重新编译,打开dist/index.html,可以看到页面中的123已变成蓝色

4. postcss-loader

作用:处理css的loader

配合autoprefixer,增加厂商前缀(css增加浏览器内核前缀)

tip:面试的时候被问到两次(关键词:postcss-loader,autoprefixer,browserslist)

(1)安装:

yarn add -D postcss-loader autoprefixer

(2)修改原先的css规则:

postcss-loader在css-loader和style-loader之前,在sass-loader或less-loader之后(从右往左解析)

      {
        test: /\.(css|scss|sass)$/,
        use: [
            "style-loader",
            "css-loader",
        {
            loader: "postcss-loader",
            options:
            {
            postcssOptions:
            {
                plugins: ["autoprefixer"],            },
                },
                },
                "sass-loader",
                ],
            },

(3)在package.json新增browserslist配置

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

在style.css中增加以下样式:

/* style.css */
body {
    background: #999;
}
#app div{
    width: 200px;
    margin-top: 50px;
    transform: rotate(45deg); /* 这个属性会产生浏览器内核前缀如 -webkit*/
}

重新编译,打开dist/index.html查看效果

5. babel-loader

作用:解析ES6,JSX

(1)安装

现在babel已到7的版本,使用@区分其他非官方包

Babel其实是几个模块化的包:

@babel/core:babel核心库

babel-loader:webpack的babel插件,让我们可以在webpack中运行babel

@babel/preset-env:将ES6转换为向后兼容的JavaScript

@babel/plugin-transform-runtime:处理async,await、import()等语法关键字的帮助函数

运行命令:

yarn add @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime -D

(2)配置

//webpack.common.js
//在rules下增加配置
{
    test: /(\.jsx|\.js)$/,
    use: ["babel-loader"],
    exclude: /node_modules/,
},

(3)增加babel额外配置项

根目录新建.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

(4)注意点

babel-loader 8.x 对应@babel/core(7.x)

babel-loader 7.x 对应babel-core 6.x

(5)测试

public/index.html

使用es6的箭头语法

    <button>按钮</button>
    <script>
        document.querySelector("button").onclick = () => {
            console.log("es6");      

        };
    </script>

重新编译,打开dist/index.html。通过点击可以看到信息被打印出来,说明es6解析成功

搭建环境

1. 开发环境与生产环境

build下新建webpack.dev.js,webpack.prod.js

(1)安装webpack-dev-server

yarn add webpack-dev-server -D

(2)安装webpack-merge

yarn add -D webpack-merge

(3)webpack.dev.js

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
const path = require("path");
module.exports = merge(common, {
  mode: "development",
  devServer: {
    hot: true, //热更新
    open: true, //编译完自动打开浏览器
    compress: true, //开启gzip压缩
    port: 3000, //开启端口号
    //托管的静态资源文件
    //可通过数组的方式托管多个静态资源文件
    static: {
      directory: path.join(__dirname, "../public"),
    },
  },
});

(4)webpack.prod.js

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
module.exports = merge(common, {
  mode: "production",
});

(5)修改package.json

"scripts": {
    "dev": "webpack serve --config build/webpack.dev.js",
    "build": "webpack --config build/webpack.prod.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

运行npm run dev查看效果,更改index.html内容,可以看到页面进行了热更新

(6)提示

在webpack:5.38.1版本中,如果使用postcss-loader,需配置browserslist,但是配置browserslist后会引起无法热更新的bug,所以还需增加 target:web(与devServer同级)

在webpack:5.54.0版本中,5.38版本的BUG已修复,无需再配置target:web。但引发了一个新问题,就是在Chrome浏览器中,如果不打开F12,更改文件内容则热更新(按需更新),但是打开F12控制台后,更改内容会导致每次更新都会重新刷新页面。在火狐浏览器,不管有没有打开F12,每次更新都会重新刷新页面

在webpack5.68.0版本中,上述问题已修复

2. 配置别名

resolve与entry同级:

//webpack.common.js
  resolve: {
    extensions: [".js", ".jsx", ".json", ".vue"], //省略文件后缀
    alias: { //配置别名
      "@": path.resolve(__dirname, "../src"),
    },
  },

代码分离

1. webpack-bundle-analyzer

它将bundle内容展示为一个便捷的、交互式、可缩放的树状图形式。方便我们更直观了解代码的分离

(1)安装

yarn add webpack-bundle-analyzer -D

(2)配置

//webpack.prod.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins:[
    new BundleAnalyzerPlugin()
]

(3)运行 npm run build ,编译结束新开一个页面,可以看到bundle之间的关系

2. splitChunks(分离chunks)

作用:拆分chunk

//webpack.prod.js
  //与plugins同级
  optimization: {
    splitChunks: {
      chunks: "all",
      name: "vendor",
      cacheGroups: {
        "echarts.vendor": {
          name: "echarts.vendor",
          priority: 40,
          test: /[\\/]node_modules[\\/](echarts|zrender)[\\/]/,
          chunks: "all",
        },
        lodash: {
          name: "lodash",
          chunks: "async",
          test: /[\\/]node_modules[\\/]lodash[\\/]/,
          priority: 40,
        },
        "async-common": {
          chunks: "async",
          minChunks: 2,
          name: "async-commons",
          priority: 30,
        },
        commons: {
          name: "commons",
          chunks: "all",
          minChunks: 2,
          priority: 20,
        },
      },
    },
  },

(1)chunks:all / async

all:把动态和非动态模块同时进行优化打包,所有模块都扔到vendors.bundle.js里面

async:把动态模块打包进vender,非动态模块保持原样(不优化)

(2)cacheGroups(缓存组)

cacheGroups的作用是将chunks按照cacheGroups中给定的条件分组输出

(3)test

正则匹配,[\\/] 来表示路径分隔符的原因,是为了适配window与Linux系统。可通过(antd|@ant-design)匹配多个文件夹,达到将特定几个文件放入一个chunk中

(4)priority

优先级,默认组的优先级为负,自定义组的默认值为0

(5)非动态导入(直接通过import引入)

安装echarts

yarn add echarts -S

新建src/echart.js

import * as echarts from "echarts"
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

在main.js中引入

import './echart'

修改public/index.html

 <div id="main" style="width: 600px; height: 400px"></div>

运行npm run build,在dist下会发现新增了echarts.vendor.bundle.js。这就是通过splitChunks分离出来echarts包

3. 动态导入(按需加载chunks)

按需下载资源,如路由懒加载。可以提升首屏加载速度

(1)安装lodash

yarn add lodash -S

(2)通过import()语法实现动态导入

//在main.js添加
function getComponent() {
  // Lodash, now imported by this script
  return import("lodash")
    .then(({ default: _ }) => {
      const element = document.createElement("div");
      element.innerHTML = _.join(["Hello", "webpack"], " ");
      return element;
    })
    .catch((error) => "An error occurred while loading the component");
}
const button = document.createElement("button");
button.innerHTML = "Click me ";
button.onclick = () => {
  getComponent().then((component) => {
    document.body.appendChild(component);
  });
};
document.body.appendChild(button);

(3)在webpack.prod.js中cacheGroups下添加(在上面splitChunks中已经加过了)

lodash: {
  name: "lodash",
  chunks: "async",
  test: /[\\/]node_modules[\\/]lodash[\\/]/,
  priority: 40,
},

运行npm run build,只有点击按钮,lodash.bundle.js包才会被加载

4. mini-css-extract-plugin(分离css)

(1)安装

yarn add -D mini-css-extract-plugin

(2)配置

将webpack.common.js下面的代码剪贴到webpack.dev.js

//webpack.dev.js
//开发环境不需要样式分离
  module: {    rules: [      {        test: /\.(css|scss|sass)$/,        use: [          "style-loader",          "css-loader",          {            loader: "postcss-loader",            options: {              postcssOptions: {                plugins: ["autoprefixer"],              },            },          },          "sass-loader",        ],      },    ],  },

修改webpack.prod.js

//webpack.prod.js
//生产环境进行样式分离
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports={
    plugins: [
         new MiniCssExtractPlugin({
            filename: "static/css/[name].[contenthash:8].css",
          })
    ],
  module: {    rules: [      {        test: /\.(css|scss|sass)$/,        use: [          MiniCssExtractPlugin.loader,          "css-loader",          {            loader: "postcss-loader",            options: {              postcssOptions: {                plugins: ["autoprefixer"],              },            },          },          "sass-loader",        ],      },    ],  },}

用MiniCssExtractPlugin.loader代替style-loader,配合MiniCssExtractPlugin使用。

(3)拓展:在webpack:5.38.1中,MiniCssExtractPlugin.loader需额外指定publicPath,来引用css资源。因为css样式分离到static/css文件夹下,会多两个层级目录,会使css中的背景图片路径不对。

在webpack:5.68.0中无需下面的配置了,路径问题已经帮我们解决了

//不再需要进行配置
{
        test: /\.(css|scss|sass)$/,
        use: [{
            loader: MiniCssExtractPlugin.loader,
            options: {
                publicPath: '../../'
            }
        }, 'css-loader', 'sass-loader']
    }

缓存

当把打包后dist目录部署到server上,浏览器就能够访问此server的网站及其资源。而获取资源是比较耗费时间的,这就是为什么浏览器使用一种名为缓存的技术。可以通过命中缓存,以降低网络流量,使网站加载速度更快,然后,如果我们在部署新版本时不更改资源的文件名,浏览器可能会认为它没有被更新,就会使用它的缓存版本。

所以我们需要将变动后的资源文件更改文件名,没有变动的资源(node_modules中的第三方文件)不更改包名称

1. contenthash

[contenthash]将根据资源内容创建出唯一hash。当资源内容发生变化时,[contenthash]也会发生变化。

//webpack.common.js
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name].[contenthash:8].js",
    clean: true, //每次构建清除dist包
  }

定义全局环境变量

1. 定义编译时全局变量

(1)安装:

yarn add cross-env -D

(2)配置:

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack serve --config build/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.js",
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
  },
//webpack.common.js
console.log('process.env.NODE_ENV',process.env.NODE_ENV)

2. 定义编译后全局变量

通过DefinePlugin实现

新建 config/dev.env.js

module.exports = {
    NODE_ENV:'"development"',
}
//webpck.dev.js
const env = require("../config/dev.env");
const webpack =require("webpack")
module.exports = merge(common,{
  plugins: [
    new webpack.DefinePlugin({
      "process.env": env,
    }),
  ],
})
//main.js
console.log(process.env)

优化打包体积

1. 开启gzip压缩

(1)安装:

yarn add compression-webpack-plugin -D

(2)配置:

//webpack.prod.js
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
  plugins: [new CompressionPlugin()],
};

2.css-minimizer-webpack-plugin

优化和压缩CSS

(1)安装:

yarn add css-minimizer-webpack-plugin --save-dev

(2)配置:

//webpack.prod.js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
optimization: {
    minimizer: [`...`, new CssMinimizerPlugin()],
  },

3. externals

防止将外部资源包打包到自己的bundle中

示例:从cdn引入jQuery,而不是把它打包

(1)index.html

    <script      src="https://code.jquery.com/jquery-3.1.0.js"      integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="      crossorigin="anonymous"    ></script>

(2)webpack.common.js

module.exports = {
  //...
  externals: {
    jquery: 'jQuery',
  },
};

(3)这样就剥离了那些不需要改动的依赖模块

import $ from 'jquery';

配置Vue

(1)安装:

yarn add -D vue-template-compiler@2.6.14 vue-loader@15.9.8

注意 vue和vue-template-compiler版本号一定要一样,如果要更新vue,vue-template-compiler也要进行相应的更新

也要注意vue-loader的版本,这里使用vue2,安装15.9.8版本

vue-loader,用于解析.vue文件

vue-template-compiler,用于模板编译

(2)配置:

webpack.common.js

const {VueLoaderPlugin} = require('vue-loader'); // vue加载器
module.exports={
    module:{
        rules:[
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                include: [path.resolve(__dirname, '../src')]
            },
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
    ]
}

vue-loader要放在匹配规则的第一个,否则会报错

(3)配置externals

// index.html

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.3/vue-router.min.js"></script>

// webpack.common.js

externals: {
    'vue': 'Vue',
    'vue-router':'VueRouter'
}

(4)使用

新建src/App.vue

<template>
<div class="app">
<router-link to="/">home</router-link>
<router-link to="/about">about</router-link>
<router-view/>
</div>
</template>
<script>export default {    name: "App"}</script>
<style scoped>.app {    font-size: 14px;    color: aquamarine;}</style>

新建src/views/about.vue

<template>
    <div>        about页面    </div>
</template>

新建src/views/home.vue

<template>
    <div>        Home页面    </div>
</template>

新建router/index.js

Vue.use(VueRouter);const Home = () => import( /* webpackChunkName: "Home" */ '@/views/home.vue')const About = () => import( /* webpackChunkName: "About" */ '@/views/about.vue')const routes = [{    path: '/',    component: Home}, {    path: '/about',    component: About}]const router = new VueRouter({    routes})export default router

修改main.js

import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
    router,
    render: (h) => h(App)
}).$mount('#app');

重启项目,查看运行效果

配置React

安装其他所必须的babel外,还需安装@babel/preset-react

1. 安装 babel解析JSX

yarn add -D @babel/preset-react

2. 配置

//webpack.common.js
  entry: {
    main:path.resolve(__dirname, "../src/main.js"), //vue入口
    index:path.resolve(__dirname, "../src/index.js") //react入口
  },
//.babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

3. 安装react

yarn add react react-dom -S

4. 使用

修改index.html,增加

<div id="root"></div>

新建src/hello.js

import React, {Component} from 'react';
let name = 'Alan';
export default class Hello extends Component{
    render() {
        return (
                {name}
        );
    }
}

新建src/index.js

import React from 'react';
import {render} from 'react-dom';
import Hello from './hello'; // 可省略.js后缀名
render(, document.getElementById('root'));

重启项目,可看到运行结果

以上就是webpack 5.68.0版本教程示例详解的详细内容,更多关于webpack 5.68.0版本教程的资料请关注我们其它相关文章!

时间: 2022-11-05

JavaScript&nbsp;webpack模块打包器如何优化前端性能

目录 一.webpack的使用背景 二.webpack如何优化 1. JS代码压缩 2.CSS代码压缩 3. HTML文件压缩 4. 文件大小压缩 5. 图片压缩 6. Tree Shaking 7. 代码分离 8. 内联chunk 9. 利用CDN加速以及提取公共第三方库 三.总结 一.webpack的使用背景 随着前端的项目逐渐扩大,必然会导致性能问题.尤其大大型复杂的项目中,前端业务可能因为一个小小的数据依赖,导致整个页面的卡顿甚至崩溃. 一般项目在完成后,会通过webpack进行打包,利

webpack4升级到webpack5的实战经验总结

目录 前言 terser-webpack-plugin语法报错 fork-ts-checker-webpack-plugin语法报错 IgnorePlugin报错 devtool报错 webpack-dev-server publicPath报错 webpack-dev-server disableHostCheck报错 移除 node.js polyfill 导入json文件语法改变 打包报错unknown option ‘-p’ node版本过低 图片编译问题 打包文件命名问题 废弃了Mod

vue.config.js中configureWebpack与chainWebpack区别及说明

目录 configureWebpack与chainWebpack区别 1.configureWebpack 2.chainWebpack vue-cli中chainWebpack和configureWebpack vue.config.js configureWebpack与chainWebpack区别 configureWebpack与chainWebpack的作用相同,唯一的区别就是他们修改webpack配置方式不同: https://cli.vuejs.org/zh/config/#con

webpack打包的3种hash值详解

目录 前言 当年的校招 哪三种? 实践讲解 事先准备 打包环境搭建 hash chunkhash contenthash 前言 大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心 当年的校招 依稀记得,当年我参加了大厂的校招,面试的是网易雷火工作室,当时有一道题,我记得很清楚,就是:说说webpack中三种hash配置的区别 哈哈,我当时连webpack都不太会配置,所以也答不出来,然后也...没有然后了.. 哪三种? webpack中的三种hash分别是

JavaScript自定义Webpack配置实现流程介绍

目录 1 初始化并创建要被打包的文件 2 命令行配置 3 配置文件配置 1 初始化并创建要被打包的文件 首先创建文件夹webpack-demo(随便起一个),用来演示打包过程.在该文件夹下终端运行命令,对项目进行初始化操作,对包进行管理: npm init # 输入命令后一直敲回车即可 npm init -y # -y是yes的意思,在初始化时省去敲回车的步骤 命令成功运行之后,该文件夹下出现了package.json文件,文件内容具体如下: { "name": "webpa

JavaScript&nbsp;webpack5配置及使用基本介绍

目录 一.webpack 1.1 简介 1.2 五大核心概念 entry (入口) output (出口) loader plugin (插件) mode (模式) 二.配置及使用 项目结构 使用html-webpack-plugin 三.写在最后 一.webpack 1.1 简介 在最原始的前端开发中,我们引入js和css等文件都是通过手动地在html中插入script和link标签来达到引用的目的,不仅繁琐,每个文件都需要单独发一次请求,而且容易发生变量冲突的问题. 于是提出了JavaScr

Windows下Nginx的配置及配置文件部分介绍

一.在官网下载 nginx的Windows版本,官网下载:http://nginx.org/download/ 选择你自己想要的版本下载,解压 nginx(例如nginx-1.6.3) 包到你的window盘里的目录上. 执行下列操作:(需要记住的,会经常用到) nginx -s stop          // 停止nginx nginx -s reload       // 重新加载配置文件 nginx -s quit          // 退出nginx 二.接下来就是配置nginx的c

Linux下防火墙的简单配置与插入规则介绍

查看当前的防火墙设置 iptables -L INPUT -n --line-numbers 删除一条策略,例如第4行策略 iptables -D INPUT 4 -A:在尾部插入 -I (insert)在指定链中插入一条新规则,为指明插入到第几行 (如:在第七行插入) iptables -I INPUT 7 -p tcp -m state --state NEW -m tcp --dport 81 -j ACCEPT 然后保存 service iptables save 然后重启 servic

javascript创建对象的几种模式介绍

在js中有几种模式可以创建对象,通过对象操作所包含的属性与方法. 一般来说,构造函数名称的第一个字母为大写字母,非构造函数名称的第一个字母为小写字母,当然,构造函数与一般函数唯一的区别只是调用的方式不同而已,所以任何函数只要通过new来调用,那它就可以作为构造函数,若不通过new来调用,则与一般函数一样. 谈谈我对这几种模式的理解: 工厂模式:创建一个一般函数,在函数里创建一个Object对象,为这个对象增添属性与方法,同时赋予其值,最后返回对象.无法识别对象类型. 构造函数模式:创建构造函数,

JavaScript中setter和getter方法介绍

javascript中的setter.getter是平时接触比较少的方法,其本身也并不是标准方法,只在非ie浏览器里支持(ie内核也许有其他方法可以做到呢?暂时不知其解),但是加以利用可以做许多事情,比如: 1.对数据的访问限制: a.value是对value变量的getter方法调用,如果在getter方法实现中抛出异常,可以阻止对value变量的访问 2.对dom变量进行监听: window.name是一个跨域非常好用的dom属性(大名鼎鼎,详见百度),如果覆盖window.name的set

iOS 配置.gitignore文件详细介绍

iOS 配置.gitignore文件详细介绍 为什么要配置.gitigore 在我们使用git的过程当中,不是任何文件都需要commit到本地或者远程仓库的,比如一些三方库文件. 那么作为一个git新手,很多人不知道如何配置.gitignore文件,本文只是提供一个便捷的例子.你可以直接使用本文提供的代码编辑到你的.gitigore文件中. 简便配置 直接复制下面的内容到你的.gitignore文件即可.注意,这个配置是给iOS开发者使用的. # Xcode .DS_Store */build/

javascript的几种继承方法介绍

1.原型链继承:构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针.确认原型和实例之间的关系用instanceof. 原型链继承缺点:字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数 function Parent(){ this.name='mike'; } function Child(){ this.age=12; } //儿子继承父亲(原型链) Child.prototype

Android 自定义View时使用TypedArray配置样式属性详细介绍

 Android 自定义View时使用TypedArray配置样式属性详细介绍 在自定义view时为了提高复用性和扩展性,可以为自定义的view添加样式属性的配置,比如自定义图片资源.文字大小.控件属性等,就这需要用到TypedArray类,下面以一个自定义的可点击扩展和收缩的TextView为例记录下这个类的简单使用. 先上效果图: 点击以后为 再贴代码: 1.自定义view类: /** * @title ExpandTextView * @description 可扩展TextView,可以

基于JavaScript中标识符的命名规则介绍

JavaScript中的标识符的命名有以下规则: 由字母.数字.$._组成 以字母.$._开头 不可以使用保留字!!! 要有意义!!!!!!! 标识符的命名规范: 1.驼峰命名法 除标识符的第一个单词外,其余单词的首字母大写,例如:trueName 2.蛇型命名法 单词之间用_隔开,例如:true_name (注:大多数情况下,以1~2个下划线开始的标识符,代表特殊变量或内部变量,我们在自己定义的时候,尽量避免使用以下划线开头的变量) (粗浅的见解,望批评指正) 以上这篇基于JavaScript

javascript Number 与 Math对象的介绍

目录 一.javascript 中 Number 二.Javascript中Math对象 一.javascript 中 Number javascript 中,数值类型属于原始类型. 除了我们所知道的以十进制表示的普通数值外,还可以用 0x 表示 十六进制整数, 0b表示二进制整数, 0O表示八进制整数 0xa //对应十进制 10 0b101 //对应十进制 5 0o22 //对应十进制 18 在javascript,0可以当作除数,返回值是无穷大.这点和其它语言有很大的区别.例如python