创建一个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打包流程的更多相关文章

  1. Webpack学习笔记九 webpack优化总结

    webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...

  2. webpack学习笔记(1)--webpack.config.js

    主要的信息都是来自于下方所示的网站 https://webpack.docschina.org/configuration 从 webpack 4.0.0 版本开始,可以不用通过引入一个配置文件打包项 ...

  3. ROS的初步学习--创建一个工作空间和一个程序包

    快速开始 创建工作区(workspace) 工作区可以作为一个独立的项目进行编译,存放ROS程序的源文件.编译文件和执行文件.建立工作区的方法如下: mkdir -p ~/catkin_ws/src ...

  4. webpack学习3.1由浅入深-打包JS

    打包JS Step1:在新建的文件夹下新建一个sum.js文件,一个app.js文件 sum.js //es module export default function(a,b){ return a ...

  5. webpack学习(六)打包压缩js和css

    打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令we ...

  6. webpack学习(七)打包压缩图片

    使用插件webpack-spritesmith生成雪碧图 1.安装webpack-spritesmith:npm install --save-dev webpack-spritesmith 2.配置 ...

  7. webpack学习笔记(4)--webpack.config.js

    devtool参数 这个参数控制是否生成,以及如何生成source map,已经在官网的doc说明总结了. 下表总结了各个参数和使用的情况 devtool 构建速度 重新构建速度 生产环境 品质(qu ...

  8. webpack学习笔记(3)--webpack.config.js

    module 参数 使用下面的实例来说明 module.exports = { module: { rules: [ { test: /\.css$/, use: 'css-loader' }, { ...

  9. webpack学习(一):webpack的安装和命令行

    本教程可以学习到如下内容: 1.webpack的安装 2.利用webpack命令打包js文件 3.如何在js文件里面引用css并将css文件在页面里面生效 4.学习webpack相关的高级的一些参数, ...

随机推荐

  1. bootstrap之移动支持

    为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示: <meta name=" ...

  2. [转]c++中vector的使用

    C++中的vector使用范例 一.概述 vector是C++标准模板库中的部分内容,它是一个多功能的,能够操作多种数据结构和算法的模板类和函数库.vector是一个容器,它能够存放各种类型的对象,简 ...

  3. 【转】CodeIgniter配置之database

    CodeIgniter的数据库配置文件位于application/config/database.php, 该文件中定义了$db的二维数组,参考文件如下: 1 2 3 4 5 6 7 8 9 10 1 ...

  4. IoC 之 2.1 IoC基础(壹)

    2.1.1  IoC是什么 Ioc-Inversion of Control,即"控制反转",不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器 ...

  5. hdu 4666 Hyperspace(多维度最远曼哈顿距离)

    献上博文一篇http://hi.baidu.com/byplane747/item/53ca46c159e654bc0d0a7b8d 设维度为k,维护(1<<k)个优先队列,用来保存0~( ...

  6. Wampserver红色橙色解决思路----端口冲突是关键

    Wampserver不是绿色:wampserver下载安装不需要配置环境,在这之前需要下载tomcat,并确保启动,不然会是红色.安装好wampserver(就是在安装过程不会弹出缺少什么文件,我的就 ...

  7. Angular记录(6)

    文档资料 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_fun ...

  8. 不要在 foreach 循环里进行元素的 remove/add 操作。remove 元素请使用 Iterator 方式,如果并发操作,需要对 Iterator 对象加锁

    不要在 foreach 循环里进行元素的 remove/add 操作.remove 元素请使用 Iterator 方式,如果并发操作,需要对 Iterator 对象加锁. 正例: Iterator&l ...

  9. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

  10. winform打包发布安装包详解..

    winform打包发布安装包详解..   使用VS 自带的打包工具,制作winform安装项目 开发环境:VS 2008 Access 操作系统:Windows XP 开发语言:C# 项目名称:**管 ...