webpack学习--创建一个webpack打包流程
创建一个webpack打包流程
首先安装webpack插件
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack
npm install --save lodash
创建index.html文件
<html>
<head>
<title>webpack 2 demo</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
创建app/index.js文件
'use strict';
import _ from 'lodash';//加载
function component () {
var element = document.createElement('div');
/* lodash is required for the next line to work */
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component());
建立一个webpack.config.js文件
var path = require('path');//调用path模块
module.exports = {
entry: './app/index.js',//入口
output: {
filename: './bundle.js',//输出文件
path: path.resolve(__dirname, 'dist')//输出目录
}
};
使用npm命令行执行
{
...
"scripts": {
"build": "webpack -p"
},
...
}
npm run build
package.json
{
"name": "create",
"version": "1.0.0",
"description": "mkdir webpack-demo && cd webpack-demo\r npm init -y\r npm install --save-dev webpack",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build" : "webpack -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^2.2.1"
},
"dependencies": {
"lodash": "^4.17.4"
}
}
webpack学习--创建一个webpack打包流程的更多相关文章
- Webpack学习笔记九 webpack优化总结
webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...
- webpack学习笔记(1)--webpack.config.js
主要的信息都是来自于下方所示的网站 https://webpack.docschina.org/configuration 从 webpack 4.0.0 版本开始,可以不用通过引入一个配置文件打包项 ...
- ROS的初步学习--创建一个工作空间和一个程序包
快速开始 创建工作区(workspace) 工作区可以作为一个独立的项目进行编译,存放ROS程序的源文件.编译文件和执行文件.建立工作区的方法如下: mkdir -p ~/catkin_ws/src ...
- webpack学习3.1由浅入深-打包JS
打包JS Step1:在新建的文件夹下新建一个sum.js文件,一个app.js文件 sum.js //es module export default function(a,b){ return a ...
- webpack学习（六）打包压缩js和css
打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令we ...
- webpack学习（七）打包压缩图片
使用插件webpack-spritesmith生成雪碧图 1.安装webpack-spritesmith:npm install --save-dev webpack-spritesmith 2.配置 ...
- webpack学习笔记(4)--webpack.config.js
devtool参数 这个参数控制是否生成,以及如何生成source map,已经在官网的doc说明总结了. 下表总结了各个参数和使用的情况 devtool 构建速度 重新构建速度 生产环境 品质(qu ...
- webpack学习笔记(3)--webpack.config.js
module 参数 使用下面的实例来说明 module.exports = { module: { rules: [ { test: /\.css$/, use: 'css-loader' }, { ...
- webpack学习(一)：webpack的安装和命令行
本教程可以学习到如下内容: 1.webpack的安装 2.利用webpack命令打包js文件 3.如何在js文件里面引用css并将css文件在页面里面生效 4.学习webpack相关的高级的一些参数, ...
随机推荐
- [USACO08NOV]奶牛混合起来Mixed Up Cows
题目描述 Each of Farmer John's N (4 <= N <= 16) cows has a unique serial number S_i (1 <= S_i & ...
- 通过位异或来交换a，b的值和通过中间变量交换a，b的值
//通过位异或来交换a,b的值 #include <stdio.h> int main(int argc, const char * argv[]) { int a=20,b=10; ...
- Masonry 在swift下的使用
Masonry在oc下使用很方便,但是在swift下,由于oc方法和property都可以使用.fuc的语法,swift下只有属性可以使用.property的语法,方法只能写成.func().因此在s ...
- Swift App项目总结
最近公司新开了一个项目,由于我的同事的离职,所以就剩我自己了.于是就果断的使用纯纯Swift写了,之前也用过Swift,不过很早了,那时候Swift还不稳定,每次一升级Xcode,Swift升级以后语 ...
- perl 祖先类UNIVERSAL
在perl 面向对象编程里,同其它语言一样存在祖先类.所有类默认继承UNIVERSAL的属性和方法. UNIVERSAL类有几个常用方法can,isa. can可以检查一个对象是否有相应的方法,这个 ...
- C语言之复杂链表的复制（图示详解）
什么是复杂链表? 复杂链表指的是一个链表有若干个结点,每个结点有一个数据域用于存放数据,还有两个指针域,其中一个指向下一个节点,还有一个随机指向当前复杂链表中的任意一个节点或者是一个空结点.今天我们要 ...
- Java程序设计模式系列之适配器模式
理解适配器设计模式需要从生活中的场景进行联系,在生活当中有那些东西能够称为适配器呢?从字面上理解,"适配"的意思就是让一个东西和另一个东西配对,能够让他们一起工作,比如大家用的笔记 ...
- scrollMenu，一款可滚动的菜单插件 兼容pc和移动端
这个菜单 有两种样式 , 也可以通过animate.css加不同的动画效果!滚动的方式也有两种 一种为通用的overflow,另外一种是better-scroll的滚动效果 在线链接地址 ht ...
- 图论基础之Dijkstra算法的初探
图论,顾名思义就是有图有论. 图:由点"Vertex"和边"Edge "组成,且图分为有向图和无向图(本文讨论有向图),之前做毕业设计的 ...
- Java数据类型在实际开发中的应用二枚举类型
在实际编程中,往往存在着这样的"数据集",它们的数值在程序中是稳定的,而且"数据集"中的元素是有限的.在JDK1.5之前,人们用接口来描述这一种数据类型. 1. ...