安装webpack

npm i webpack -g
npm i webpack-cli -g

1.基础用法(无需配置webpack.config.js文件)

1.2 新建需要打包的测试文件input.js

const sayHello = function() {
console.log("sayHello");
}

cmd命令行运行  (mode参数的作用 {无优化: none,开发: development,生产: production})

webpack --mode development .\input.js -o .\bundle.js

2.1 单文件打包

2.1.1 新建需要打包的测试文件input.js

const sayHello = function() {
console.log("sayHello");
}

2.1.2 配置webpack.config.js文件(entry:入口文件 output:输出文件)

const path = require("path");

// SPA(单文件打包)
module.exports = {
mode: 'development',
entry: './input.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}

cmd命令行运行

webpack

2.2 多文件打包

2.2.1 新建需要打包的

测试文件home.js

const sayHello = function() {
console.log("home");
}

测试文件other.js

const sayHello = function() {
console.log("other");
}

测试文件about.js

const sayHello = function() {
console.log("about");
}

2.2.2 配置webpack.config.js文件(entry:入口文件 output:输出文件)

const path = require("path");

// MPA(多文件打包)
module.exports = {
mode: 'development',
entry: {
home: './home.js',
about: './about.js',
other: './other.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
}
}

cmd命令行运行

webpack

2.3 webpack-dev-server的使用(热替换)

安装

npm init -y
npm i webpack
npm i webpack-cli
npm i webpack-dev-server

2.3.1 第一种用法

2.3.1.1配置webpack.config.js文件(entry:入口文件 output:输出文件)

const path = require("path");

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

2.3.1.2在package.json中添加

"dev": "webpack-dev-server --port 8080"
{ --open: 打开浏览器,
--port: 设置端口,
--contentBase: 默认打开文件夹路径,
--hot: 以补丁的形式添加新修改的代码 (4.x以上版本不需要添加)}

2.3.1.2 新建需要打包的测试文件input.js

const sayHello = function() {
console.log("input");
}

cmd命令行运行

npm run dev

2.3.2 第二种用法

2.3.2.2在package.json中添加

配置webpack.config.js文件(entry:入口文件 output:输出文件)

const path = require("path");

module.exports = {
mode: 'development',
entry: './input.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devServer: {
port: 8080,
compress: true
}
}

这种方式添加hot有可能报错,建议使用--hot(即第一种方式)

cmd命令行运行

npm run dev

dev-server编译的文件保存在内存而不是硬盘,所以在文件夹中不可见,可用浏览器查看

webpack的基本使用的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  3. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  4. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  5. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  6. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  7. webpack的使用

    1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...

  8. Webpack 配置摘要

    open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...

  9. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  10. Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

随机推荐

  1. Nginx事件管理之ngx_event_core_module模块

    1. 概述 ngx_event_core_module 模块是一个事件类型的模块,它在所有事件模块中的顺序是第一位.它主要完成以下两点任务: 创建连接池(包括读/写事件): 决定究竟使用哪些事件驱动机 ...

  2. MySQL 对 IP 字段的排序问题

    MySQL 对 IP 字段的排序问题 问题描述 想对一张带有 IP 字段的表,对 IP 字段进行升序排序,方便查看每个段的 IP 信息. 表结构和表数据如下: SET NAMES utf8mb4; ; ...

  3. CKeditor从Word粘贴格式问题

    在config.js中添加配置 config.pasteFromWordRemoveFontStyles = false;    config.pasteFromWordRemoveStyles = ...

  4. 走进异步编程的世界 - 在 GUI 中执行异步操作

    转载:https://www.cnblogs.com/liqingwen/p/5877042.html 走进异步编程的世界 - 在 GUI 中执行异步操作 [博主]反骨仔 [原文地址]http://w ...

  5. ApiDoc 后端接口注释文档的使用

    前端和后端注释文档生成 前端和后端的 函数及api 说明文档生成总结,持续更新中 by Qzx 参考网址 jsDoc - 中文说明 jsDoc 使用教程 后台接口文档生成器 - APIDOC官网 ap ...

  6. A = min(1, max(0, A))

    Crop A into [0, 1]:

  7. Unity* 实体组件系统 (ECS)、C# 作业系统和突发编译器入门

    Unity* 中的全新 C# 作业系统和实体组件系统不仅可以让您轻松利用以前未使用的 CPU 资源,还可以帮助您更高效地运行所有游戏代码.然后,您可以使用这些额外的 CPU 资源来添加更多场景动态和沉 ...

  8. CentOS下Subversion(SVN)的快速安装与配置

    如果你是一个软件开发者,你一定对Subversion不会感到陌生.Subversion是一个自由开源的版本控制系统.在Subversion管理下,文件和目录可以超越时空.Subversion将文件存放 ...

  9. 【Linux开发】linux设备驱动归纳总结(八):1.总线、设备和驱动

    linux设备驱动归纳总结(八):1.总线.设备和驱动 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  10. Elasticsearch Metric聚合

    首先查看index文档信息 $ curl -XGET "http://172.16.101.55:9200/_cat/indices?v" 输出 health status ind ...