webpack的基本使用
安装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的基本使用的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- webpack之傻瓜式教程
接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- webpack入门教程之Hello webpack(一)
webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...
- webpack的使用
1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...
- Webpack 配置摘要
open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...
- Vue + Webpack + Vue-loader 系列教程(2)相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
随机推荐
- ubuntu下apt-get 命令参数
转载:https://blog.csdn.net/linuxzhouying/article/details/7192612 ubuntu下apt-get 命令参数 常用的APT命令参数 apt-ca ...
- ccf 201612-4 压缩编码(DP)(100)
ccf 201612-4 压缩编码 问题分析: 解决本问题,首先需要知道哈夫曼编码.参见:哈夫曼编码_百度百科. 这是一个编码问题,似乎可以用哈夫曼编码来解决,但是略有不同的地方在于“每个字符的编码按 ...
- XAMPP是什么?
XAMPP=Apache + MySQL + PHP + Perl,是一个完全免费,易于安装和使用Apache发行版,包含了Apache.MySQL.PHP和Perl.支持Windows.Linux和 ...
- Visual Studio Code-Vscode下快速补全新建HTML文件默认代码
1.新建文件. 2.点击右下角文档格式:纯文本,上方弹出框输入HTML改成 html文档格式. 3.输入“ !”,按tab. 4.完成.
- EvenBus源码分析
概述 一般使用EventBus的组件类,类似下面这种方式: public class SampleComponent extends Fragment { @Override public void ...
- -moz-box-shadow
css的box-shadow是用来添加边框阴影效果的. 属性值详解: 1.inset可选值,默认阴影在盒子外使用inset后,阴影在盒子内,即使指定边框或者透明边框,阴影依然存在. 2.<off ...
- jq 实时监听input输入框的变化
项目需求中有时候需要实时监测 input 的值变化,虽然 input 自身有 focus 和 blur 事件,但是有时候跟需求不符合. 所以实时监听 input 值变化的代码为: $("#i ...
- 获取packageName和startActivity
import android import pprint # 获取packageName droid = android.Android(('192.168.1.101', 42250)) droid ...
- python配置主机名
.准备hosts模板 mkdir -p /k8s/profile cat >/k8s/profile/hosts<<EOF 192.168.0.91 test1 192.168.0. ...
- Python核心编程练习题
1.输入一个数值,判断是否为正数,负数,小数,以及字符串 import re def is_number(num): pattern = re.compile(r'^[-+]?[-0-9]\d*\.\ ...