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相关的高级的一些参数, ...
随机推荐
- cygwin vi编辑器左右上下键和删除键乱码错误
安装cygwin后使用其中的vi编辑器时发现上下左右键和删除键乱码,搜索了中文的帮助方案,没有解决,最后搜索了英文的网站,找到了解决方案.参考链接如下:http://superuser.com/que ...
- OpenCV探索之路（十七）：Mat和IplImage访问每个像素的方法总结
在opencv的编程中,遍历访问图像元素是经常遇到的操作,掌握其方法非常重要,无论是Mat类的像素访问,还是IplImage结构体的访问的方法,都必须扎实掌握,毕竟,图像处理本质上就是对像素的各种操作 ...
- promise(3) '静态'方法
要是人没有梦想,跟咸鱼又有什么两样了?一直恐惧读源码,哪怕是一个简单的库也是读百来行遇到难点就放弃了.对于新的东西也仅仅是知道它拿来干什么,社区资源在哪里,要用时就突击文档资源使用即可.未有过深入之心 ...
- 记一次服务器Tomcat优化经历
公司需要一台测试服务器来做测试用,所以花了几天时间把服务全部部署好,在部署好war包之后,发现Tomcat访问超级慢. 1.进入Tomcat的bin目录下,运行 ./catalina.sh run命令 ...
- 推荐几款.NET客户端开源报表图
如果你正在开发客户端报表图相关的应用,除了.NET自带的控件,你还可以考虑使用以下几个控件库. [OxyPlot] OxyPlot是一个支持.NET的跨平台绘图库.你可以在很多平台上使用它,如WPF, ...
- Notepad++中过滤掉的正则方式
2 => 'ashadv'3 => 'aogro'4 => 'aogs'5 => 'ashamw'6 => 'arc'8 => 'gtsatq'9 => 'b ...
- php隔行换色输出表格
<?php header("Content-type:text/html;charset=utf-8"); $str=''; $str.='<table border= ...
- [leetcode-506-Relative Ranks]
Given scores of N athletes, find their relative ranks and the people with the top three highest scor ...
- ng-cordova(插件库)
ng-cordova 环境配置 1.执行以下命令 bower install ngCordova 2.引用文件(在引用cordova.js之前引用) <script src="lib/ ...
- maven(一) maven到底是个啥玩意~
我记得在搞懂maven之前看了几次重复的maven的教学视频.不知道是自己悟性太低还是怎么滴,就是搞不清楚,现在弄清楚了,基本上入门了.写该篇博文,就是为了帮助那些和我一样对于maven迷迷糊糊的人. ...