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相关的高级的一些参数, ...
随机推荐
- jenkins跑maven项目的时候报错，看评论
Started by user admin Building in workspace /var/jenkins_home/workspace/helloworld [WS-CLEANUP] Dele ...
- 如何在前端模版引擎开发中避免使用eval函数
前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用.于是根据自己对模版引擎的理解,定义自己的模版格式,然后,根据自己定义的格式,编写处理函数,将模版标签中的字符串,解析成可执行的字 ...
- android怎么输出信息到logcat
- Linux 可重入内核
Linux内核是可重入的,这意味着几个进程可能同时在内核模式下执行.(当然单处理器系统,在某一时间只会有一个进程执行,但许多会阻塞在内核模式)这些进程会分时共享CPU.I/O设备等系统资源,给用户的感 ...
- vue子父组件通信
之前在用vue写子父组件通信的时候,老是遇到问题!!! 子组件传值给父组件: 子组件:通过emit方法给父组件传值,这里的upparent是父组件要定义的方法 模板: <div v-on:cli ...
- c# 上传附件大小限制的问题
在c# 相关的asp.net 中.需要设置附件的大小.需要修改2部分. 1.修改metabase.XML 以Windows2003 为例子. 打开 C:\Windows\System32\Inets ...
- Java自学手记——注解
注意区分注释和注解,注释是给人看的,注解是给程序看的. 注解的作用是代替配置文件,在servlet3.0中,就可以不再使用web.xml文件,而是所有配置都是用注解!比如注解类 @WebServlet ...
- Oracle查询多行数据合并成一行数据
例如: select base_id, translate (ltrim (text1, '/'), '*/', '*,') xmmc,translate (ltrim (text2, '/'), ' ...
- sublime使用总结
上周忙呀忙~ 周一到五在忙项目,周六日搬家 在帝都平均一年就要换一次房子,从开始找房子到成功住进去前前后后大约花了半个多月的时间 什么时候就有自己的小窝了-- 之前开发一直用的都是W ...
- js 数组里求最大值和最小值
// 数组里相邻两个数做比较 取满足条件的那个(以此类推) var arr = [1,3,4,5,6,7]; function Max(array){ var max = array[0]; for( ...