前端工程化webpack(一)

时间:2021-02-20 00:37:28

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(一)的更多相关文章

  1. 前端工程化-webpack(babel编译ES6)

    最新版安装与普通安装 使用babel-loader编译ES6,需要遵循规范,安装babel-presets 规范列表 对应babel-loader,babel-preset安装最新版和普通版: pre ...

  2. 前端工程化-webpack(打包JS)(二)

    一.第一种打包方式 webpack entry<entry> output 假设目录结构如下: index.html是入口文件 打包app.js为bundle.js如下 app.js 当使 ...

  3. 前端工程化-webpack简介&lpar;一&rpar;

    本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependenc ...

  4. 前端工程化-webpack篇之babel-polyfill与babel-runtime(三)

    关于 Babel 如果我们没有配置一些规则,Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如 Iterator.Generator.Set.Maps. ...

  5. 使用webpack&plus;vue&period;js构建前端工程化

    参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...

  6. &lbrack;转&rsqb;基于gulp和webpack的前端工程化

    本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux ...

  7. 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)

    1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...

  8. 前端工程化(二)---webpack配置

    导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...

  9. 前端工程化与webpack

    (1) 前端工程化   近几年来,前端领域飞速发展,前端的工作早已不再是切几张图,写几个页面那么简单,项目比较大时,很可能会多人协同开发,模块化,组件化,CSS预编译等技术也被广泛的使用.前端自动化( ...

随机推荐

  1. NYOJ-58 最小步数 AC 分类: NYOJ 2014-01-22 22&colon;01 217人阅读 评论&lpar;0&rpar; 收藏

    #include<stdio.h> void dfs(int step,int x,int y); int d[4][2] = {{1,0},{-1,0},{0,1},{0,-1}}; i ...

  2. PL&sol;SQL 如何导出INSERT语句

    需要把查询出来的数据导出成Insert的语句.忽然发现不会用了. 上网查,找到一些,但都不尽如人意. 于是就写了这篇文章.助人助己. 在PL/SQL Developer左边的树状导航栏里,找到[Tab ...

  3. 研究一家公司 z

    第一部分:确定一家公司的“质地”(描绘一家公司的总体印象)              1.1 天花板       天花板是指企业或行业的产品(或服务)趋于饱和.达到或接近供大于求的状态.在进行投资之前 ...

  4. 《深入理解javascript原型和闭包系列》 知识点整理

    深入理解javascript原型和闭包系列 对原型和闭包等相关知识的讲解,由浅入深,通俗易懂,每个字都值得细细研究. 一.一切都是对象 1. typeof操作符输出6种类型:string boolea ...

  5. em换算px

    一般浏览器默认的1em=16px,所以常用字体大小如下: 10px=0.625em 12px=0.75em 14px=0.875em 16px=1em 18px=1.125em 20px=1.25em ...

  6. 算法入门经典大赛 Dynamic Programming

    111 - History Grading LCS 103 - Stacking Boxes 最多能叠多少个box DAG最长路 10405 - Longest Common Subsequence ...

  7. 【VMware】VMware Workstation中虚拟机网络配置

    一直用的vmware的虚拟机以及UVP还有cirtix的虚拟机,然后对vmware workstation却一窍不通,这个怎么了得,下面介绍一下我学习中遇到的问题及解决办法. 一.准备工作: vmwa ...

  8. Windws Server 2008 R2 WEB环境配置之IIS7&sol;IIS7&period;5&plus;FastCGI&plus;PHP 5&period;6&period;4&plus;MYSQL&plus;phpMyAdmin

    本篇为WEB环境配置的汇总篇,其中PHP以FASTCGI方式来运行,这种方式性能更高.经过配置后,我们的服务器将同时可以运行PHP和.NET的程序,属称全能服务器.所有配置可以根据自身实际需要进行增减 ...

  9. dfs进阶

    当自己以为自己深搜(其实就是暴力啦)小成的时候,发现没有题目的积累还是很难写出程序,自己真的是太年轻了:总结一下就是做此类题看是否需要使用vis数组优化以及继续搜索的条件或者满足答案的条件.以下为2题 ...

  10. 主动触发事件 自定义事件 trigger 及其用法

    1. 触发自定义事件方式 js.jq 2. jq 触发 2.1 默认支持的事件 $('#h').on('click',function(){ $(this).append('<p>p&lt ...