webpack 的基本用法
1.app.js 引入模块
import moduleLog from './module.js' //引入moduleLog从./module.js
2.module.js导出模块
export default function(){}; //导出 function(){}
3.打包
$ webpack app.js dist/bundle.js //打包 入口文件app.js 出口文件 ./dist/bundle.js
这里要使用 webpack 这个命令要 $ npm i -g webpack
webpack.config.js的最设置
const path = require('path'); //内置模块 不需要 npm 下载
module.exports = {
entry : './app.js', //入口
output : { //出口
path : path.join(__dirname,dist), //用这种方法 路径的 分隔符(用\ 还是 /) 不会出错
publicPath : './dist', //path 是用来存放打包后的文件的输出目录
filename : 'bundle.js' //publicPath 制定资源文件的引用目录
},
}
配置完以上的时候 仅需输入 webpack 就可以实现打包 在文件夹中生成实体文件
$ webpack
webpack-dev-server热加载 加在module.export 里面 这里开发时要用到 这个模块 要 $ npm i -D webpack-dev-server
devServer : {
publicPath : 'dist', //输出 bundle.js 的地方
port : 3000 //端口号
},
在配置package.json里的 script面添加
dev:'webpack-dev-server'
执行 打包后 不生成本地文件 存在内存中
$ npm run dev //在浏览器中 输入 locallhost:3000进行访问
当设置了 devServer 里的 publicPath 之后 output 里面就没必要设置 Path 和 publicPaht 了 这时 页面引入的就不是本地文件夹里面的bundle.js了 但是 fillename属性 任然生效 也可以设置 devServer 里面的 publicPath 来改变 生成目录 这里要注意 一点 devServer 里的 publicPath 要表示 当前路径 要 用 一个 '/' 表示(笔者也是初学 这点 东西试了一晚上。。。然而这个属性并不太重要)
前端工程化webpack(一)的更多相关文章
-
前端工程化-webpack(babel编译ES6)
最新版安装与普通安装 使用babel-loader编译ES6,需要遵循规范,安装babel-presets 规范列表 对应babel-loader,babel-preset安装最新版和普通版: pre ...
-
前端工程化-webpack(打包JS)(二)
一.第一种打包方式 webpack entry<entry> output 假设目录结构如下: index.html是入口文件 打包app.js为bundle.js如下 app.js 当使 ...
-
前端工程化-webpack简介(一)
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependenc ...
-
前端工程化-webpack篇之babel-polyfill与babel-runtime(三)
关于 Babel 如果我们没有配置一些规则,Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如 Iterator.Generator.Set.Maps. ...
-
使用webpack+vue.js构建前端工程化
参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...
-
[转]基于gulp和webpack的前端工程化
本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux ...
-
基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)
1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...
-
前端工程化(二)---webpack配置
导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...
-
前端工程化与webpack
(1) 前端工程化 近几年来,前端领域飞速发展,前端的工作早已不再是切几张图,写几个页面那么简单,项目比较大时,很可能会多人协同开发,模块化,组件化,CSS预编译等技术也被广泛的使用.前端自动化( ...
随机推荐
-
NYOJ-58 最小步数 AC 分类: NYOJ 2014-01-22 22:01 217人阅读 评论(0) 收藏
#include<stdio.h> void dfs(int step,int x,int y); int d[4][2] = {{1,0},{-1,0},{0,1},{0,-1}}; i ...
-
PL/SQL 如何导出INSERT语句
需要把查询出来的数据导出成Insert的语句.忽然发现不会用了. 上网查,找到一些,但都不尽如人意. 于是就写了这篇文章.助人助己. 在PL/SQL Developer左边的树状导航栏里,找到[Tab ...
-
研究一家公司 z
第一部分:确定一家公司的“质地”(描绘一家公司的总体印象) 1.1 天花板 天花板是指企业或行业的产品(或服务)趋于饱和.达到或接近供大于求的状态.在进行投资之前 ...
-
《深入理解javascript原型和闭包系列》 知识点整理
深入理解javascript原型和闭包系列 对原型和闭包等相关知识的讲解,由浅入深,通俗易懂,每个字都值得细细研究. 一.一切都是对象 1. typeof操作符输出6种类型:string boolea ...
-
em换算px
一般浏览器默认的1em=16px,所以常用字体大小如下: 10px=0.625em 12px=0.75em 14px=0.875em 16px=1em 18px=1.125em 20px=1.25em ...
-
算法入门经典大赛 Dynamic Programming
111 - History Grading LCS 103 - Stacking Boxes 最多能叠多少个box DAG最长路 10405 - Longest Common Subsequence ...
-
【VMware】VMware Workstation中虚拟机网络配置
一直用的vmware的虚拟机以及UVP还有cirtix的虚拟机,然后对vmware workstation却一窍不通,这个怎么了得,下面介绍一下我学习中遇到的问题及解决办法. 一.准备工作: vmwa ...
-
Windws Server 2008 R2 WEB环境配置之IIS7/IIS7.5+FastCGI+PHP 5.6.4+MYSQL+phpMyAdmin
本篇为WEB环境配置的汇总篇,其中PHP以FASTCGI方式来运行,这种方式性能更高.经过配置后,我们的服务器将同时可以运行PHP和.NET的程序,属称全能服务器.所有配置可以根据自身实际需要进行增减 ...
-
dfs进阶
当自己以为自己深搜(其实就是暴力啦)小成的时候,发现没有题目的积累还是很难写出程序,自己真的是太年轻了:总结一下就是做此类题看是否需要使用vis数组优化以及继续搜索的条件或者满足答案的条件.以下为2题 ...
-
主动触发事件 自定义事件 trigger 及其用法
1. 触发自定义事件方式 js.jq 2. jq 触发 2.1 默认支持的事件 $('#h').on('click',function(){ $(this).append('<p>p< ...