webpack是什么

2024-05-10 06:56:47

一、webpack是什么

webpack 是一个用于现代 JavaScript 应用程序的静态模块化打包构建工具

模块化：服务端Common.js（module.exports,require）,浏览器端ES Module(export,export default,import {} from xxx)

src目录你写的源代码

npm run build

dist--index.html,js css

二、webpack快速使用

2.1 初始化package.json

npm init -y

2.2 安装webpack相关依赖

 npm i webpack webpack-cli -D

2.3 写一点点测试代码

src index.js,tools.js

public index.html 引入dist/main.js

2.4 在package.json中添加打包脚本

{...."scripts": {"build":"webpack"},...
}

2.5 编写webpack配置文件

编写webpack配置文件，让webpack实现灵活环境定制，如下：

//引入相关依赖
const webpack = require('webpack')
const path=require('path')

//创建一个webpak配置对象
const config = {//设置模式mode:'development',//配置入口entry:'./src/main.js',//配置出口output: {//打包路径path:path.resolve(__dirname,'dist'),//打包文件名 filename: 'js/bundle.js',//清理无用文件clean:true}
}


//抛出对象
module.exports=config

2.5 安装webpack服务器

安装webpack-dev-server： npm i webpack-dev-server -D

配置webpack.config.js

{....
//配置webpack服务器devServer: {port: 9999,//静态目录位置static: {directory:'dist'}}....
}

配置package.json运行脚本

{
..."scripts": {"build": "webpack","serve": "webpack serve"},
...
}

2.5 自动注入html

安装html-webpack-plugin: npm i html-webpack-plugin -D

配置webpack.config.js

//引入相关依赖
const webpack = require('webpack')
const path = require('path')
//引入html-webpack-plugin
const HtmlWebpackPluin=require('html-webpack-plugin')

//创建一个webpak配置对象
const config = {//设置模式mode:'development',//配置入口entry:'./src/main.js',//配置出口output: {//打包路径path:path.resolve(__dirname,'dist'),//打包文件名 filename: 'js/bundle[contenthash].js',//清理无用文件clean:true},//配置插件plugins: [new HtmlWebpackPluin({//从哪个模板生成htmltemplate:'./public/index.html',//生成后的html文件名filename:'index.html'})],//sl//配置webpack服务器devServer: {port: 9999,//静态目录位置static: {directory:'dist'}}
}


//抛出对象
module.exports=config

webpack是什么相关推荐

第四天：Vue组件的slot以及webpack
插槽认识slot 在生活中,很多地方都有插槽,电脑的USB插槽,插板中的电源插槽等. 插槽的目的是让我们原来的设备具备更多的扩展性.比如电脑的USB我们可以插入U盘.鼠标.键盘.硬盘.手机.音响等等 ...
深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)
阅读目录一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 二:在项目中如何使用 DllPlugin 和 DllReferencePlugin? 三:DllPlug ...
linux怎么卸载webpack,安装webpack后，执行webpack -v命令时报错：SyntaxError: Block-sc
安装webpack后,执行webpack -v命令时报错如下: [root@FreeServer ~]# webpack -v /usr/local/node-v4.4.7-linux-x64/lib ...
express给html设置缓存,webpack + express 实现文件精确缓存
由于最近开发的个人博客(Vue + node)在使用过程中,发现网络加载有点慢,所以打算对它进行一次优化.本次优化的目标如下: index.html 设置成 no-cache,这样每次请求的时候都会比 ...
vue webpack打包入口文件是哪个_Vue项目起步
一,安装nodejs软件(直接商城搜索安装即可). 二,配置npm npm install npm -g 三,配置webpack,在cmd中安装. npm install -g webpack npm ...
webpack打开项目命令_webpack前端模块打包工具基本使用的详细记录（一）
webpack简介我们都知道,Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等 ...
在Vue的webpack中结合runder函数
在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1><div id="app"><login ...
webpack入门之简单例子跑起来
webpack入门之简单例子跑起来 webpack介绍 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载 ...
webpack打开项目命令_配置webpack中dev.env.js、prod.env.js，解决不同命令下项目启动和打包到指定的环境...
前后端分离的项目开发中,我们有开发环境.测试环境.预生产环境和生产环境. 1.开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根据情 ...
修改html时webpack热更新,webpack学习之路（二）webpack-dev-server实现热更新
上一章对webpack的配置有了简单的认识. 这一章,我需要学习的是webpack热更新,因为在开发过程中,不希望当文件更改时,人肉去编译文件,刷新浏览器. webpack热更新 webpack-de ...

最新文章

热门文章