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相关的高级的一些参数, ...
随机推荐
- [HNOI2007]紧急疏散EVACUATE （湖南2007年省选）
[HNOI2007]紧急疏散EVACUATE 题目描述 发生了火警,所有人员需要紧急疏散!假设每个房间是一个N M的矩形区域.每个格子如果是'.',那么表示这是一块空地:如果是'X',那么表示这是一面 ...
- iOS 转场动画探究(一)
什么是转场动画: 转场动画说的直接点就是你常见的界面跳转的时候看到的动画效果,我们比较常见的就是控制器之间的Push和Pop,还有Present和Dismiss的时候设置一下系统给我们的modalTr ...
- xshell设置界面的编码方式
文件->属性->终端->编码->UTF-8
- Python的迭代器与生成器
Python中的生成器和迭代器方便好用,但是平时对生成器和迭代器的特性掌握的不是很到位,今天将这方面的知识整理一下. 迭代器 为了更好的理解迭代器和生成,我们需要简单的回顾一下迭代器协议的概念. 迭代 ...
- css清除浮动float
css清除浮动float 1.分析HTML代码 <div class="outer"> <div class="div1">1</ ...
- 【Android Developers Training】 28. 将用户带领到另一个应用
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 实现excel导入导出功能，excel导入数据到页面中，页面数据导出生成excel文件
今天接到项目中的一个功能,要实现excel的导入,导出功能.这个看起来思路比较清楚,但是做起了就遇到了不少问题. 不过核心的问题,大家也不会遇到了.每个项目前台页面,以及数据填充方式都不一样,不过大多 ...
- 4.VUEX到底是什么
关于vuex类的新闻最近很多,看到眼热就去查了下资料,然后扯出来一堆flux.redux.state.state之类的概念,以及大型工程必要性之类的.看官方手册也是昏昏然. 然而,我还是弄懂了!我准备 ...
- java桥连接sql server之登录验证及对数据库增删改查
一:步骤 1.sql server建立数据库和相关表 2.建立数据源 (1).打开控制面板找到管理,打开ODBC选项或直接搜索数据源 (2).打开数据源配置后点击添加,选择sql server点击 ...
- Python3组合数据类型（元组、列表、集合、字典）语法
一.序列类型(字符串,元组(),列表[]) 序列类型支持in,len(),分片[],迭代,5种内置序列类型:bytearray,bytes,list,str,tuple(元组). 1.元组可以嵌套(如 ...