主要作用

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 知识点的更多相关文章

  1. webpack 知识点总结

    1 webpack 的不同点: 1.1 实现代码分割 1.2 loaders 1.3 plugin system 2 webpack 打包css,需要使用css-loaders 使webpack识别c ...

  2. webpack知识点散记

    1.今天学习webpack  ,刚开头就碰到了钉子,因为现在都是4+的版本,用以前的老命令不好使,如下例子及解决办法 不好用:  webpack3的   打包文件   webpack a.js b.j ...

  3. webpack知识点整理

    作用域 es6里模块化的写法 会存在的问题,变量.方法名字雷同,外部文件调用的时候出现问题 如 a.js里 var a='susan' b.js里 var a='jack' 问题解决方案,添加包裹 a ...

  4. 深入浅出的webpack构建工具---webpack基本配置(一)

    深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpa ...

  5. 深入理解webpack基本配置(一)

    1. 安装webpack到全局 在学习构建之前,我们来在本地文件新建一个存放项目的文件夹,比如叫demo1这个项目,然后进入demo1该项目的根目录后,执行命令 npm init运行下,一路回车(先简 ...

  6. 深入了解webpack前,可以了解的小知识点。

    阅读前:文章大概是写,简单用过webpack,想继续深入了解webpack前需要了解的知识.但文章内容跟webpack使用关系并不大. 文章概要: Object.defineProperty call ...

  7. webpack 4 基础知识点梳理

    目录 webpack安装 webpack配置文件 webpack核心概念 entry output loader plugins sourceMap webpack-dev-server 跨域 &am ...

  8. webpack基础知识点

    webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler). 入口(Entry) webpack 将创建所有应用程序的依赖关系图表(dependency ...

  9. 27、前端知识点--webpack面试题(二)

    webpack面试题总结 本文主要是对webpack面试会常被问到的问题做一些总结,且文章会不断持续更新 1.webpack打包原理 把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元 ...

随机推荐

  1. 关于Activity生命周期的总结

    1.Acitivity的四种状态 (1)运行:位于Activity栈顶,用户可见,可获得焦点. (2)暂停:如果一个活动被另一个非全屏的活动所覆盖(比如一个Dialog),那么该活动就失去了焦点,它将 ...

  2. Flask开发微电影网站(七)

    1.后台管理之电影管理 1.1 定义电影表单 在app的admin目录的forms.py文件中,定义电影表单 # 电影表单 class MovieForm(FlaskForm): title = St ...

  3. Java_String&StringBuilder&StringBuffer类

    目录 一.String类 二."==" 和 "equals"的区别 三.StringBuffer和StringBuilder 一.String类 String为 ...

  4. VMware虚拟机从一台电脑复制到另一台电脑

    1.选中.vmx文件和所有的.vmdk文件,添加到压缩文件 vmx是虚拟系统配置文件,而vmdk则是虚拟磁盘文件,它们都是VMware所支持的文件格式 2.复制压缩文件到另一台电脑上,并解压 3.在另 ...

  5. AD证书导入文档(单向认证)

    AD证书或者SSL证书导入的方法步骤(在root用户下操作) 1.  将证书命名为AD-PRO.cer,并确定证书的颁发. 2.  将/app/ad_cert/keystore下的原有证书删除掉和文件 ...

  6. vue中html模板使用绑定的全局函数

    我们知道在script中使用vue绑定的全局函数时, 我们需要用这种方式使用: this.Util.Fun(e) 那在模板中, 比如v-if中想使用Fun函数怎么办呢?你应该这样做 <i v-i ...

  7. 关于CentOS

    dd if=/dev/cdrom of=centos72.iso 自动挂载镜像: vi /etc/fstab /root/centos72.iso   /mnt/cdrom   iso9660  de ...

  8. sonar-代码扫描

    代码测试sonar 1.下载地址: https://www.sonarqube.org/downloads/ 2.配置jdk环境(版本要求1.8+) [root@localhost#>> ...

  9. python---二叉树遍历

    重学. # coding = utf-8 # 二叉树遍历 class Node: """节点类""" def __init__(self, ...

  10. MQTT服务器的搭建(Windows平台)

    人工智能.智能家居越来越火,在服务器和多个终端进行通信的过程中使用传统的请求/回答(Request/Response)模式已经过时,伴随而来的是发布/订阅(Publish/Subscribe)模式-- ...