【JavaScript】 Webpack安装及文件打包
背景
最近开启一个新项目，需要对前端的各类资源文件进行打包，经过多方调研后，决定使用webpack工具。但是网上的教程多是将webpack直接作为服务器使用，而我只是想将其作为单纯的资源打包工具而已。经过多方调研，终于发现如何实现webpack的文件打包功能。
准备
在使用webpack之前，必须先要安装nodejs和npm。
安装完npm后，由于npm国内访问非常慢，可以设置为从淘宝的镜像下载各种资源包。
npm config set registry http://registry.cnpmjs.org
新建工程目录
安装Webpack前，需要把命令行指向目录，具体怎么跳转就不多少了，下行命令中的ReactSrc就是工程目录。
cd 目录/ReactSrc
然后进行初始化，执行下列命令后会在工程目录下生成一个package.json文件。
npm init
引入webpack工具包
这时候就可以安装Webpack包了，下面命令是将webpack安装到nodejs的全局包下。
//全局安装
npm install -g webpack
执行下面的命令，将webpack作为本次工程的依赖包。
npm install --save-dev webpack
生成资源文件
在ReactSrc文件夹下生成两个文件夹，app和public。
app用来放js及数据等资源文件。
public用来放供用户访问的html文件。
这样，在ReactSrc下的目录结构如下：
在app下生成Greeter.js和main.js。
Greeter.js ，用来创建一个div，并在div中显示欢迎的内容。
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
main.js，工程的主入口文件。
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());
在public下生成一个index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
这时候会发现，在index.html中，引用了一个bundle.js，但是我们在app中并没有看到这个js啊。
不用担心，如何生成bundle.js就是我们这节的重头戏【用webpack打包并生成js文件】！
webpack打包配置
其实很简单，在导入webpack依赖包时，有一个webpack.config.js，打开后写入一下内容:
var config = {
entry: './app/main.js', // 入口文件
output: {
path:'./public',
filename: 'bundle.js', // 生成的结果文件
},
module: {
loaders: [ {
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
}
module.exports = config;
在这个文件中，我们可以看到webpack的打包配置，意思就是读取app目录下的main.js文件，在public文件夹下生成bundle.js文件。
配置完后，我们再打开初始化工程(npm init)时，生成的package.json文件。
在这个文件中，我们会看到其中有执行webpack打包命令。
{
"name": "reactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack" // 执行webpack 打包命令
},
"author": "linh",
"license": "ISC",
"dependencies": {
"react": "^15.3.1",
"react-dom": "^15.3.1"
},
"devDependencies": {
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"
}
}
开始打包
现在万事俱备，只欠东风了。打开命令行，执行如下命令，npm就会自动调用webpack，对工程中的js文件进行打包生成。
npm start
这时，打开public目录，会发现目录下多了一个bundle.js。直接在浏览器中打开该目录下的index.html，显示如下。
【JavaScript】 Webpack安装及文件打包的更多相关文章
- Webpack安装配置及打包详细过程
引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有 ...
- webpack提取图片文件打包压缩
抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...
- Webpack - 把json文件打包进js文件
把html文件打包进index.js 1 新建文件 typings.d.ts declare module "*.html" { const content: st ...
- webpack的多文件打包问题
1.第三方库如vue,vue-router可以利用webpack中的entry指定vendor:['vue','vue-router']来打包在一个文件中 2.将这些文件单独提取出来,在页面中使用&l ...
- webpack 几个基本打包扩展项的安装命令
网速比较慢的童鞋,装包时请准备好花生瓜子 webpack 本身只能打包 JavaScript 模块,但是它可以通过拓展打包比如静态资源文件.less.sass.typescript 等,还可以通过 b ...
- webpackt入门1：webpack介绍&webpack安装&使用webpack打包
本篇博客不是原创,简书的zhangwang写的,原文太长,我这里只是提取了一部分. 原文地址:入门webpack,看这篇就够了 一.Webpack解决了什么问题 问题1.JavaScript这个脚本化 ...
- webpack 安装,打包使用
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. 全局安装webpack 打开文件夹amd输入指令 npm i webpa ...
- webpack快速入门——CSS文件打包
1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...
- webpack配置：less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...
随机推荐
- es6学习笔记（1） let和const命令详解
let和const命令: Es6新增了let命令,声明变量,但与var不一样的,只在let命令所在的代码块内有效(如for循环之外let声明的变量就不再有效).并且let不像var那样会发生" ...
- 深入研究HTTP协议以及部分应用
引言 工作了一段时间,都是在开发网页,自然和http打交道打得最多了,投身工作之后原来理解的东西又变得模糊,所以有必要深入探讨一下http协议的细节,也借此总结一下学习的成果. HTTP相关认识 对H ...
- oracle 按时间段统计15分钟内的数据
string sql = "select to_char(StartTime, 'yyyy')||'-'|| to_char(StartTime, 'mm')||'-'|| to_char( ...
- php登录主机机制
注册机制 //用户名需过滤的字符的正则 $stripChar = '?<*.>\'"'; ){ $this->error('用户名中包含'.$stripChar.'等非法字 ...
- RabbitMQ学习系列（一）: 介绍
1. 介绍 RabbitMQ是一个由erlang开发的基于AMQP(Advanced Message Queue )协议的开源实现.用于在分布式系统中存储转发消息,在易用性.扩展性.高可用性等方面都非 ...
- photoshop常见抠图方法
1.多边形套索:这种工具是用于抠图的边界比较平直,但颜色比较复杂类的图像,它也是最笨最无奈的方法,只能是利用鼠标一点一点去点击抠选.2.磁性套索工具:分为三种:套索,多边形,磁性.这类工具一般只用于边 ...
- juery学习总结(二)——juery操作页面元素
所有的操作都可以分为增.删.改.查四种,juery选择器代表查看的功能,那么剩下的操作就是对页面元素增.删.改.页面元素有3部分构成:标签,属性和内容,juery对元素的操作可以从这3方面入手. 一. ...
- IO例子
1.用字节读取一个文件,替换换行符,并打印 String fileName = "src/learnIO/Stream.java"; FileInputStream in = ne ...
- Eclipse 导入外部项目无法识别为web项目并且无法在部署到tomcat下
uss_web如果没有左上角那个球,tomcat就识别不出来的. 1.进入项目目录,找到.project文件,打开. 2.找到...代码段,加入如下标签内容并保存: <nature>org ...
- Java Abstract Class & Interface
一. 抽象类 1. 抽象类:包含了一个抽象方法的类就是抽象类 2. 抽象方法:声明而未被实现的方法,用关键字abstract声明 3. 抽象类被子类继承,子类(如果不是抽象类)必须重写(overrid ...