JavaScript中Webpack的使用教程

目录
  • 0.什么是Webpack
  • 1.Webpack的使用
  • 2.Webpack 的核心概念
    • 2.1 entry
      • 2.1.1 单入口
      • 2.1.2 多入口
    • 2.2 output
      • 2.2.1 单入口时的输出
      • 2.2.2 多入口时的输出
    • 2.3 loader
    • 2.4 plugins
  • 3.Webpack处理css文件
    • 3.1 < style>标签形式嵌入html
    • 3.2 < link>标签形式引入html
  • 4.Webpack处理css中的图片
    • 4.1 使用file-loader处理css中的图片
    • 4.2 使用html-withimg-loader处理html中的图片
    • 4.3 使用file-loader处理js中的图片
    • 4.4 使用url-loader处理图片

0.什么是Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

1.Webpack的使用

1.初始化项目

npm init

2.安装Webpack需要的包

npm install --save-dev webpack-cli webpack

3.配置Webpack
在 package.json 文件添加执行编译的命令

  "scripts": {
    "webpack": "webpack"
    // 可自定义配置文件:"webpack": "webpack --config webpack.js"
  },

4.创建配置文件(默认 webpack.config.js),并配置。

const path = require('path');

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

5.打包并测试

C:\Users\Daixiang\Desktop\demo>npm run webpack

> demo@1.0.0 webpack C:\Users\Daixiang\Desktop\demo
> webpack --config webpack.config.js

asset bundle.js 4.34 KiB [compared for emit] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 231 bytes
  ./src/index.js 159 bytes [built] [code generated]
  ./src/Base.js 72 bytes [built] [code generated]
webpack 5.59.1 compiled successfully in 113 ms

2.Webpack 的核心概念

  • entry 指定入口文件。
  • output 指定输出相关信息。
  • loader 可以帮助 webpack 处理那些非 JavaScript 文件。
  • plugins 用于执行范围更广的任务。

2.1 entry

2.1.1 单入口

单入口的两种写法:

写法一:entry: ‘./src/index.js'

写法二:entry: {main: ‘./src/index.js'}

webpack.config.js

const path = require('path');

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

2.1.2 多入口

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    // 多入口
    entry: {
        main: './src/index.js',
        base: './src/Base.js',
        about: './src/About.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
};

2.2 output

2.2.1 单入口时的输出

单入口时,自定义输出文件名。
webpack.config.js

    output: {
    	// 路径
        path: path.resolve(__dirname, 'dist'),
        // 文件名
        filename: 'bundle.js',
    },

2.2.2 多入口时的输出

多入口时,动态输出文件名。
webpack.config.js

    output: {
    	// 路径
        path: path.resolve(__dirname, 'dist'),
        // 动态输出文件名
        filename: '[name].js',
    },

2.3 loader

loader是让Webpack处理非js文件的模块。
loader配置参考文档:https://webpack.docschina.org/loaders/
webpack.config.js

    module: {
        rules: [
            {
                // 正则匹配文件
                test: /\.js$/,
                // 排除文件夹
                exclude: /node_modules/,
                // 使用指定loader
                loader: 'babel-loader'
            }
        ]
    }

需要注意的是,编译新增API需要引入core-js
1.使用npm安装core-js

npm install --save-dev core-js

2.在js入口文件中引入core-js/stable

import 'core-js/stable';

3.打包并测试

npm run webpack

2.4 plugins

plugins是插件,用于执行范围更广的任务。
plugins配置参考文档:https://webpack.docschina.org/plugins
html-webpack-plugin为例,进行插件安装。
1.使用npm安装html-webpack-plugin

npm install --save-dev html-webpack-plugin

2.配置webpack.config.js文件

const HtmlWebpackPlugin = require(‘html-webpack-plugin');
plugins: [new HtmlWebpackPlugin()],

webpack.config.js

const path = require('path');
// 引入文件,定义常量
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                // 正则匹配
                test: /\.js$/,
                // 排除文件夹
                exclude: /node_modules/,
                // 使用指定loader
                loader: 'babel-loader'
            }
        ]
    },
    plugins: [
        // 单入口
        // new HtmlWebpackPlugin(
        //     {
        // 指定模板文件,生成的js等文件放入模板文件里
        //         template: './index.html'
        //     }
        // )
        // 多入口
        new HtmlWebpackPlugin(
            {
                template: './index.html',
                filename: 'index.html',
                chunks:['index'],
                minify: {
                    // 删除注释
                    removeComments: true,
                    // 删除空格
                    removeWhitespace: false,
                    // 删除html标签属性的双引号
                    removeAttributeQuotes: true
                }
            }
        ),
        new HtmlWebpackPlugin(
            {
                template: './search.html',
                filename: 'search.html',
                chunks:['search']
            }
        )
    ],
};

3.打包并测试

npm run webpack

index.html

<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset=UTF-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <title>index</title>
<script defer=defer src=index.js></script></head>
<body>
</body>
</html>

search.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>search</title>
    </style>
<script defer src="search.js"></script>
</head>
<body>
</body>
</html>

3.Webpack处理css文件

3.1 < style>标签形式嵌入html

1.安装css-loader识别js中的css文件,安装style-loader,将css文件嵌入html中

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

2.配置webpack.config.js文件
webpack.config.js

    module: {
        rules: [
            {
                // 正则匹配
                test: /\.css$/,
                // 使用css-loader,识别js中的css,使用style-loader,将css文件嵌入html中
                // 注意数组的顺序,从右向左使用
                use: ['style-loader', 'css-loader']
            }
        ]
    },

3.打包并测试

npm run webpack

3.2 < link>标签形式引入html

使用css-loader,识别js中的css,使用mini-css-extract-plugin引入css文件。
1.安装css-loader、mini-css-extract-plugin

npm install --save-dev css-loader mini-css-extract-plugin

2.配置webpack.config.js文件
webpack.config.js

const path = require('path');
......
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
			......
            {
                // 正则匹配
                test: /\.css$/,
                // 使用css-loader,识别js中的css,使用MiniCssExtractPlugin.loader,引入css文件
                // 注意数组的顺序,从右向左使用
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin(
            {
                filename: 'css/[name].css'
            }
        )
    ],
};

3.打包并测试

npm run webpack

dist/index.html

<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset=UTF-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <title>index</title>
    <script defer=defer src=index.js></script>
    <link href=css/index.css rel=stylesheet>
</head>
<body>
</body>
</html>

4.Webpack处理css中的图片

4.1 使用file-loader处理css中的图片

使用file-loader处理css中的图片。(v5 已弃用file-loader)
file-loader参考文档:https://v4.webpack.js.org/loaders/file-loader/
index.css

body{
    background-image: url(./images/3.jpg);
    background-repeat: no-repeat;
}

1.安装file-loader

npm install --save-dev file-loader

2.配置webpack.config.js文件
webpack.config.js

const path = require('path');
......
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            ......
            {
                // 正则匹配
                test: /\.css$/,
                // 使用css-loader,识别js中的css,使用MiniCssExtractPlugin.loader,引入css文件
                // 注意数组的顺序,从右向左使用
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ]
            },
            {
                // 正则匹配
                test: /\.(jpe?g|png|gif)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'img/[name].[ext]'
                    }
                }
            }
        ]
    },
    plugins: [
        // 多入口
        new HtmlWebpackPlugin(
            {
                template: './index.html',
                filename: 'index.html',
                chunks: ['index'],
                minify: {
                    // 删除注释
                    removeComments: true,
                    // 删除空格
                    collapseWhitespace: false,
                    // 删除html标签属性的双引号
                    removeAttributeQuotes: true
                }
            }
        ),
        new HtmlWebpackPlugin(
            {
                template: './search.html',
                filename: 'search.html',
                chunks: ['search']
            }
        ),
        new MiniCssExtractPlugin(
            {
                filename: 'css/[name].css'
            }
        )
    ],
};

3.打包并测试

npm run webpack

4.2 使用html-withimg-loader处理html中的图片

1.安装html-withimg-loader

npm install --save-dev html-withimg-loader

2.配置webpack.config.js文件
webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                // 正则匹配
                test: /\.js$/,
                // 排除文件夹
                exclude: /node_modules/,
                // 使用指定loader
                loader: 'babel-loader'
            },
            {
                // 正则匹配
                test: /\.css$/,
                // 使用css-loader,识别js中的css,使用MiniCssExtractPlugin.loader,引入css文件
                // 注意数组的顺序,从右向左使用
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ]
            },
            {
                // 正则匹配
                test: /\.(jpe?g|png|gif)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'img/[name].[ext]',
                        esModule: false
                    }
                }
            },
            {
                // 正则匹配
                test: /\.(html?)$/,
                loader: 'html-withimg-loader'
            }
        ]
    },
    plugins: [
        // 多入口
        new HtmlWebpackPlugin(
            {
                template: './index.html',
                filename: 'index.html',
                chunks: ['index'],
                minify: {
                    // 删除注释
                    removeComments: true,
                    // 删除空格
                    collapseWhitespace: false,
                    // 删除html标签属性的双引号
                    removeAttributeQuotes: true
                }
            }
        ),
        new HtmlWebpackPlugin(
            {
                template: './search.html',
                filename: 'search.html',
                chunks: ['search']
            }
        ),
        new MiniCssExtractPlugin(
            {
                filename: 'css/[name].css'
            }
        )
    ],
};

3.打包并测试

npm run webpack

4.3 使用file-loader处理js中的图片

index.js

import img from './images/1.jpg';

1.安装file-loader

npm install --save-dev file-loader

2.配置webpack.config.js文件
webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            ......
            {
                // 正则匹配
                test: /\.(jpe?g|png|gif)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'img/[name].[ext]',
                        esModule: false
                    }
                }
            }
        ]
    },
};

3.打包并测试

npm run webpack

4.4 使用url-loader处理图片

index.js

import img from './images/1.jpg';

1.安装url-loader、file-loader

npm install --save-dev url-loader file-loader

2.配置webpack.config.js文件
webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            ......
            {
                // 正则匹配
                test: /\.(jpe?g|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: 'img/[name].[ext]',
                        esModule: false,
                        limit: 10000  // 小于10k的图片转为base64格式
                    }
                }
            }
        ]
    },
};

3.打包并测试

npm run webpack

到此这篇关于JavaScript中Webpack的使用的文章就介绍到这了,更多相关JavaScript Webpack使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-10-26

使用webpack搭建pixi.js开发环境

本文介绍怎么使用webpack搭建pixi.js游戏的开发环境,怎么配置babel将ES6+代码最终转换为ES5,怎么利用gulp将webpack和其他脚本粘合一起优化项目并最终发布项目. 前提 需要会简单使用nodejs,了解package.json,会简单使用npm init,npm install,npm run命令. 需要稍微了解webpack和gulp. 需要有google chrome浏览器. 最好会一点git,demo项目pixi-webpack-demo托管在github上,通过

详解如何使用webpack在vue项目中写jsx语法

本文介绍了如何使用webpack在vue项目中写jsx语法,分享给大家,具体如下: 我们知道Vue 2.0中对虚拟DOM的支持.我们可以通过JavaScript动态的创建元素,而不用在template中写HTML代码.虚拟DOM最终将被渲染为真正的DOM. data: { msg: 'Hello world' }, render (h) { return h( 'div', { attrs: { id: 'my-id' }, [ this.msg ] ); } 渲染后的内容为: <div id=

详解使用webpack+electron+reactJs开发windows桌面应用

electron是一两年前挺火的一个框架 本质上是一个浏览器,但是集成了很多windows系统的功能,让前端开发也可以直接操作windows的窗体,做成一个实打实的桌面软件 (当然听说mac上也可以用electron,不过没试过) (没错我还在用windows,不是mac也不是linux,我是个lowB) 团队主要的技术栈是react,所以考虑用react开发,方便维护. PS.由于项目是大半年前做的,所以一些细节可能记忆有误请见谅 几个重点: 1.想要能调试必须使用webpack打包,不能用r

webpack3里使用uglifyjs压缩js时打包报错的解决

环境:webpac<4的场景下,安装uglifyjs. cnpm install uglifyjs-webpack-plugin -D 安装完毕后,去npm里查看uglifyjs的使用方法并添加到代码中: const UglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = { //... optimization: { minimizer: [new UglifyJsPlugin()] } }; 执行打包命令后报错

react.js使用webpack搭配环境的入门教程

本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g create-react-app //安装create-react-app脚手架 npm为node.js的包管理工具,请确保你已经安装了node.js create-react-app my-app //使用create-react-app创建,my-app为项目名称

vue+vuecli+webpack中使用mockjs模拟后端数据的示例

前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTML模板生成模拟数据. 拦截并模拟 ajax 请求. 语法规范 Mock.js 的语法规范包括两部分: 1.数据模板定义规范(Data Template Definition,DTD) 2.数据占位符定义规范(Data Placeholder Definition,DPD) 数据模板定义规范 DTD

详解在vue-cli项目中使用mockjs(请求数据删除数据)

在我们的生产实际中,后端的接口往往是较晚才会出来,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的.于是今天我们来介绍一款非常强大的插件Mock.js,可以非常方便的模拟后端的数据,也可以轻松的实现增删改查这些操作,在后台数据完成之后,你所做的只是去掉mockjs:停止拦截真实的ajax,仅此而已. 搭建一个vue项目 # 全局安装 vue-cli $ npm install --global vue-

Vue&nbsp;echarts模拟后端数据流程详解

目录 KOA2的使用 安装 Koa app.js入口文件 KOA2的使用 KOA2是由Express 原班人马打造. 环境依赖 Node v7.6.0 及以上. 支持 async 和 await 洋葱模型的中间件 写响应函数(中间件) 响应函数是通过use的方式才能产生效果, 这个函数有两个参数, ctx :上下文, 指的是请求所处于的Web容器,我们可以通过 ctx.request 拿到请求对象, 也可 以通过 ctx.response 拿到响应对象 next :内层中间件执行的入口 模拟服务

vue cli webpack中使用sass的方法

1:安装依赖 npm install sass-loader node-sass --save-dev 2:html中 修改style <style lang="sass"> /* write sass here */ </style> 3: 使用正常sass 语法 //但是会报错 <style lang="sass"> $highlight-color: #F90; $highlight-border: 1px solid $h

vue新vue-cli3环境配置和模拟json数据的实例

最近在研究学习vue,发现环境配置特麻烦,就是跟着文档步骤一步一步来,也会遇到各种想不到的坑,vue-cli3的配置比老的简洁了很多,与以往的配置也有所不同: 1.安装步骤以前是 npm install vue-cli -g 现在是: npm install -g @vue/cli 2.vue-cli2 新建项目 vue init webpack Vue-Project vuecli3新建项目,在你创建后会有一个保存当前配置的功能 vue create <project-name> vue-c

Vue Element前端应用开发之获取后端数据

概述 在前面随笔<循序渐进VUE+Element 前端应用开发之动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据用户角色对应的菜单实现本地路由的过滤和绑定,菜单顺利弄好了,就需要进一步开发页面功能了,本篇随笔介绍一个案例,通过获取后端数据后,进行产品信息页面的处理. 1.后端数据的获取处理 前后端的边界则非常清晰,前端可以在通过网络获取对应的JSON就可以构建前端的应用了. 我们通过Vue.config.js的配置信息,可以

vue之a-table中实现清空选中的数据

如下所示: <template> <a-table ref="table" size="default" :columns="columns" :dataSource="loadData" :showAlertInfo="true" :pagination=false :scroll="{ x: 1000, y: 250 }" :rowSelection="{

webpack+vuex+axios 跨域请求数据的示例代码

本文介绍了webpack+vuex+axios 跨域请求数据的示例代码,分享给大家,具体如下: 使用vue-li 构建 webpack项目,修改bulid/config/index.js文件 dev: { env: require('./dev.env'), port: process.env.PORT || 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable:

python找出列表中大于某个阈值的数据段示例

该算法实现对列表中大于某个阈值(比如level=5)的连续数据段的提取,具体效果如下: 找出list里面大于5的连续数据段: list = [1,2,3,4,2,3,4,5,6,7,4,6,7,8,5,6,7,3,2,4,4,4,5,3,6,7,8,9,8,6,1] 输出: [[6, 7], [6, 7, 8], [6, 7], [6, 7, 8, 9, 8, 6]] 算法实现: # -*- coding: utf-8 -*- """ --------------------

vue-cli项目中使用Mockjs详解

背景 前端在早期jQuery时代时,前端功能和后端工程基本上都是合在一起,典型的就是常见的maven工程下面的webapp目录包含前端各类静态资源文件. 这个时候,我们总是会遇到这些问题: 老大,接口文档还没输出,我的好多活干不下去啊! 后端小哥,接口写好了没,我要测试啊! 测试时间不够啊,就要发版了,今天难道我有看明天的太阳升起? 诸如种种,就是一句话:劳资,再也不要指望你们了! node出现之后,准确的说是前后端分离之后,前端迫切需要一种机制,不在需要依赖后端接口开发.经过这几年的发展,有好