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相关的高级的一些参数, ...
随机推荐
- war包中少了class文件
用eclipse的maven工具打包(执行mvn clean install 和 mvn package)后,再启动wildfly, war包应该会自动复制到wildfly的deployment ...
- Maven转化为Dynamic Web Module
如今Maven仍然是最常用的项目管理工具,若要将Java Web项目使用Maven进行管理,则首先需要新建Maven项目,然后将其转化为web项目. 在项目右键选择properties,然后点击左侧P ...
- Android 4.0以后正确的获取外部sd卡存储目录
刚解决这个棘手的问题 找了很久,随笔记下. 网上搜索 android 获取外部sd卡存储目录 普遍都是: 1) Environment.getExternalStorageDirectory() 这个 ...
- 【LeetCode】60. Permutation Sequence
题目: The set [1,2,3,…,n] contains a total of n! unique permutations. By listing and labeling all of t ...
- laravel中间件使用
1.在app/Http/Kernel.php文件中配置中间件文件,例如: protected $routeMiddleware = [ 'auth' => \Illuminate\Auth\Mi ...
- list-列表功能介绍
叨逼叨:列表是可变的,针对列表的改变,变得是列表本身,和字符串区别开来 #1.追加 # name = ['alex','eric','seven','qiqi'] # v = name.append( ...
- 十年过去了，各位 .net 兄弟还好吗
时间是最无情的,一下子就毕业10年了.很久没有发发牢骚了,今天突然想发一下.看过我文章喷过的知道,我一般都是散文,看完不知道我写了什么,形散而神不散嘛. 十年了,不好意思,没像网上说的标准一样,做管理 ...
- Mybatis jpa mini 代码解析
源码地址(git):https://github.com/LittleNewbie/mybatis-jpa 一.Mybatis简介 mybatis中文官方文档:http://www.mybatis.o ...
- tensorflow l2_normalize函数
1.l2_normalize函数 tf.nn.l2_normalize(x, dim, epsilon=1e-12, name=None) 解释:这个函数的作用是利用 L2 范数对指定维度 dim 进 ...
- (转)Java中equals和==的区别
java中的数据类型,可分为两类: 1.基本数据类型,也称原始数据类型.byte,short,char,int,long,float,double,boolean 他们之间的比较,应用双等号( ...