webpack 知识点
主要作用
1、构建项目
2、自带模块化
3、编译 es6-->es5 typescript-->javascript
4、自带服务器(服务基于node webpack-dev-server)
5、vue、react 都是用webpack环境构建
安装 webpack
npm install -g webpack
4.0以上还得安装
npm install -g webpack-cli@2.x
初始化项目
npm init -y
npm install --save-dev webpack@3.x ( 用3版本安装项目依赖)参数--save-dev的含义是代表把你的安装包信息写入package.json文件的devDependencies字段中,包安装在指定项目的node_modules文件夹下
相当于npm install -D webpack@3.x
webpack js中自带模块化
支持node 中的
module.exports = {
}
module.exports = function(){
}
const Square = require('./square.js');
编译js
D:\WebstormProjects\webpack1>webpack src/app.js dist/bundle.js 入口文件 出口文件
或者配置webpack.config.js
const path = require('path'); module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
__dirname 项目路径 执行
webpack
会默认找webpack.config.js
手动创建webpack.config.js 可以叫其他名称 在package.json 中配置 代替 webpack命令
"scripts": {
"built":"webpack"
}, npm run built
webpack自带服务器 安装服务器
D:\WebstormProjects\webpack1>npm install -g webpack-dev-server@2.x
本地安装
D:\WebstormProjects\webpack1>npm install -D webpack-dev-server@2.x
运行服务器
D:\WebstormProjects\webpack1>webpack-dev-server
代替webpack-dev-server命令 在
package.json 中配置
"scripts": {
"built": "webpack",
"dev":"webpack-dev-server"
},
npm run dev
配置项目默认访问路径
--content-base dist
"dev":"webpack-dev-server --content-base dist" 相当于
http://localhost:8080/dist 热更新
--inline
"dev":"webpack-dev-server --content-base dist --inline"
修改端口
--port=8081
"dev":"webpack-dev-server --content-base dist --inline --hot --port=8081" 本地安装json-loader 将json格式的数据转换成js对象
默认已经安装
npm install -D json-loader
const path = require('path'); module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}, module:{
rules:[
{
test:/\.json$/,
use:"json-loader"
}
]
}
};
webpack 知识点的更多相关文章
- webpack 知识点总结
1 webpack 的不同点: 1.1 实现代码分割 1.2 loaders 1.3 plugin system 2 webpack 打包css,需要使用css-loaders 使webpack识别c ...
- webpack知识点散记
1.今天学习webpack ,刚开头就碰到了钉子,因为现在都是4+的版本,用以前的老命令不好使,如下例子及解决办法 不好用: webpack3的 打包文件 webpack a.js b.j ...
- webpack知识点整理
作用域 es6里模块化的写法 会存在的问题,变量.方法名字雷同,外部文件调用的时候出现问题 如 a.js里 var a='susan' b.js里 var a='jack' 问题解决方案,添加包裹 a ...
- 深入浅出的webpack构建工具---webpack基本配置(一)
深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpa ...
- 深入理解webpack基本配置(一)
1. 安装webpack到全局 在学习构建之前,我们来在本地文件新建一个存放项目的文件夹,比如叫demo1这个项目,然后进入demo1该项目的根目录后,执行命令 npm init运行下,一路回车(先简 ...
- 深入了解webpack前,可以了解的小知识点。
阅读前:文章大概是写,简单用过webpack,想继续深入了解webpack前需要了解的知识.但文章内容跟webpack使用关系并不大. 文章概要: Object.defineProperty call ...
- webpack 4 基础知识点梳理
目录 webpack安装 webpack配置文件 webpack核心概念 entry output loader plugins sourceMap webpack-dev-server 跨域 &am ...
- webpack基础知识点
webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler). 入口(Entry) webpack 将创建所有应用程序的依赖关系图表(dependency ...
- 27、前端知识点--webpack面试题(二)
webpack面试题总结 本文主要是对webpack面试会常被问到的问题做一些总结,且文章会不断持续更新 1.webpack打包原理 把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元 ...
随机推荐
- 关于Activity生命周期的总结
1.Acitivity的四种状态 (1)运行:位于Activity栈顶,用户可见,可获得焦点. (2)暂停:如果一个活动被另一个非全屏的活动所覆盖(比如一个Dialog),那么该活动就失去了焦点,它将 ...
- Flask开发微电影网站(七)
1.后台管理之电影管理 1.1 定义电影表单 在app的admin目录的forms.py文件中,定义电影表单 # 电影表单 class MovieForm(FlaskForm): title = St ...
- Java_String&StringBuilder&StringBuffer类
目录 一.String类 二."==" 和 "equals"的区别 三.StringBuffer和StringBuilder 一.String类 String为 ...
- VMware虚拟机从一台电脑复制到另一台电脑
1.选中.vmx文件和所有的.vmdk文件,添加到压缩文件 vmx是虚拟系统配置文件,而vmdk则是虚拟磁盘文件,它们都是VMware所支持的文件格式 2.复制压缩文件到另一台电脑上,并解压 3.在另 ...
- AD证书导入文档(单向认证)
AD证书或者SSL证书导入的方法步骤(在root用户下操作) 1. 将证书命名为AD-PRO.cer,并确定证书的颁发. 2. 将/app/ad_cert/keystore下的原有证书删除掉和文件 ...
- vue中html模板使用绑定的全局函数
我们知道在script中使用vue绑定的全局函数时, 我们需要用这种方式使用: this.Util.Fun(e) 那在模板中, 比如v-if中想使用Fun函数怎么办呢?你应该这样做 <i v-i ...
- 关于CentOS
dd if=/dev/cdrom of=centos72.iso 自动挂载镜像: vi /etc/fstab /root/centos72.iso /mnt/cdrom iso9660 de ...
- sonar-代码扫描
代码测试sonar 1.下载地址: https://www.sonarqube.org/downloads/ 2.配置jdk环境(版本要求1.8+) [root@localhost#>> ...
- python---二叉树遍历
重学. # coding = utf-8 # 二叉树遍历 class Node: """节点类""" def __init__(self, ...
- MQTT服务器的搭建(Windows平台)
人工智能.智能家居越来越火,在服务器和多个终端进行通信的过程中使用传统的请求/回答(Request/Response)模式已经过时,伴随而来的是发布/订阅(Publish/Subscribe)模式-- ...