背景

最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用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安装及文件打包的更多相关文章

  1. Webpack安装配置及打包详细过程

    引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有 ...

  2. webpack提取图片文件打包压缩

    抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...

  3. Webpack - 把json文件打包进js文件

    把html文件打包进index.js   1  新建文件 typings.d.ts    declare module "*.html" {   const content: st ...

  4. webpack的多文件打包问题

    1.第三方库如vue,vue-router可以利用webpack中的entry指定vendor:['vue','vue-router']来打包在一个文件中 2.将这些文件单独提取出来,在页面中使用&l ...

  5. webpack 几个基本打包扩展项的安装命令

    网速比较慢的童鞋,装包时请准备好花生瓜子 webpack 本身只能打包 JavaScript 模块,但是它可以通过拓展打包比如静态资源文件.less.sass.typescript 等,还可以通过 b ...

  6. webpackt入门1:webpack介绍&webpack安装&使用webpack打包

    本篇博客不是原创,简书的zhangwang写的,原文太长,我这里只是提取了一部分. 原文地址:入门webpack,看这篇就够了 一.Webpack解决了什么问题 问题1.JavaScript这个脚本化 ...

  7. webpack 安装,打包使用

      Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. 全局安装webpack 打开文件夹amd输入指令  npm i webpa ...

  8. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

  9. webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件

    一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...

随机推荐

  1. 你想要了解但是却羞于发问的有关SSL的一切

    Everything You Ever Wanted to Know About SSL (but Were Afraid to Ask) Or perhaps more accurately, &q ...

  2. 为你的pip更换一个国内的镜像源

    为你的pip更换一个国内的镜像源 是否常常为pypi官网被无故和谐掉导致pip不能下载python的各个包而痛心疾首? 是否常常在深夜里看着pip install 下载包的速度慢如乌龟而长吁短叹? 是 ...

  3. 保留password模式文本框textbox内的数据不丢失。

    在asp.net 2.0环境下,使用textbox,提交到服务器再传回,如果textbox是password模式的,那么textbox内的密码(星号),就没有了! protected override ...

  4. SPSS课程学习思路及流程

    数据挖掘领域对行的分析

  5. Oracle基本查询语言

    --1.简单的数据查询语句--查询所有的员工的信息select * from emp;--查询员工的姓名和工作职位select ename,job from emp;--姓名和工作以中文的形式显示出来 ...

  6. runtime

    7.runtime实现的机制是什么,怎么用,一般用于干嘛. 你还能记得你所使用的相关的头文件或者某些方法的名称吗? 运行时机制,runtime库里面包含了跟类.成员变量.方法相关的API,比如获取类里 ...

  7. SQL语句生成指定范围内随机数

    1.生成随机实型数据 create procedure awf_RandDouble @min dec(14,2), @max dec(14,2), @result dec(14,2) output ...

  8. 【Make a H5 game】JS for beginner——FROM U2B

    https://www.youtube.com/watch?v=F2Dc-JlwgN4&feature=iv&src_vid=WfL4LNUL3R0&annotation_id ...

  9. 【bzoj1708】[USACO2007 Oct]Money奶牛的硬币

    题目描述 在创立了她们自己的政权之后,奶牛们决定推广新的货币系统.在强烈的叛逆心理的驱使下,她们准备使用奇怪的面值.在传统的货币系统中,硬币的面值通常是1,5,10,20或25,50,以及100单位的 ...

  10. Maximal Rectangle

    很不好想的一道题,参考:http://blog.csdn.net/doc_sgl/article/details/11832965 分为两步:把原矩阵转为直方图,再用largest rectangle ...