详解如何用webpack打包一个网站应用项目


Posted in Javascript onJuly 12, 2017

本文介绍了如何用webpack打包一个网站应用,现在分享给大家,有需要的可以了解一下
随着前端技术的发展,越来越多新名词出现在我们眼前。angularjs、react、gulp、webpack、es6、babel……新技术出现,让我们了解了解用起来吧!今天我来介绍一下如何用webpack打包一个网页应用。

一般我们写页面,大概都是这样的结构:

index.html
   css
    style.css
   js
     index.js
  ...........

这样我们的html里直接引用css和js,完成一个网页应用。用webpack也类似,只是webpack把图片、css和js都编译打包成一个文件,我们只需要引用一个文件就可以了。

1.我们需要先安装node环境。没安装的请自行安装

2.在项目目录下输入npm init初始化一个node项目,输入项目名称等信息,完成后生成一个package.json文件。

3.在项目目录下安装webpack

npm install --save-dev webpack

4.我们需要一个webpack.config.js文件,记录webpack配置信息。它的配置大概这样:

var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'build');
var config = {
 //入口文件
 entry: {
  index : './src/js/index.js'
 },
 extensions: ['', '.js', '.json', '.css', '.less'],
 output: {
  path: buildPath,  //编译后的文件路径
  filename: 'app.js'
 },
 module: {
  //Loaders
  loaders: [
   //.css 文件使用 style-loader 和 css-loader 来处理
   { test: /\.css$/, loader: 'style-loader!css-loader' },
   { test: /\.less$/,
     loader: 'style-loader!css-loader!less-loader'
   },
   //.js 文件使用 babel 来编译处理
   { test: /\.js$/, loader: 'babel' },
   //图片文件使用 url-loader 来处理,小于8kb的直接转为base64
   { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
   ]

 },
};

module.exports = config;

我们需要指定编译的入口文件和输出的目录路径,以及css和js用什么loader处理,比如我使用了less,要编译less文件,就指定less-loader,js我要用es6来写,为了兼容性,用babel来转成es5的代码。如果要使用react,也可以指定jsx等的编译方式。

5.这些loader都是需要npm安装的

npm install --save-dev css-loader less less-loader style-loader url-loader babel babel-core babel-loader babel-preset-es2015

6.如果需要用babel,在项目目录下新建一个名为.babelrc的隐藏文件,里面这样写:

{"presets":["es2015"]}

保存。

7.根据配置可以看到我们需要一个src文件夹和一个build文件夹,src放图片、css和js的源代码,build作为输出文件夹放编译后的文件。

8.src/js/index.js文件作为我们的入口文件,我们在里面可以愉快地写es6的代码,比如:

'use strict';
require('../css/base.css');
require('../css/animate.css');
require('../css/style.less');
require('../js/zepto.min.js');
let a = 'world';
let hello = `hello ${a}`;
console.log(hello);

可以看到css我们都通过require的方式引进来,这样webpack会把css和js打包进一个文件。

9.我们还差个index.html,放在项目文件夹下就可以,正常写,引入build/app.js就可以啦!

10.让我们试试吧,在命令行项目目录下运行webpack,哇,成功!

Time: **2622**ms
 **Asset**  **Size** **Chunks**       **Chunk Names**
**app.js** 120 kB    **0** **[emitted]** index
  + 10 hidden modules

可以看到app.js已经生成啦!

tips:

  1. 如果我们不想每次修改都手工编译,直接执行webpack --watch就会自动监听文件修改,自动编译。
  2. 如果我们想压缩混淆代码,执行webpack -p吧!
  3. 如果配置文件不叫webpack.config.js,也可以运行webpack --config *.js指定配置文件。

webpack功能强大,这里只是指引小白开始使用,想深入了解的童鞋快去看官方文档吧!http://webpack.github.io/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 题型问答有答案参考
Feb 17 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
利用vue实现模态框组件
Dec 19 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 #Javascript
AngularJS实现select的ng-options功能示例
Jul 12 #Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 #Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 #Javascript
详解Node项目部署到云服务器上
Jul 12 #Javascript
angular.js中解决跨域问题的三种方式
Jul 12 #Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 #Javascript
You might like
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
javascript新手语法小结
2008/06/15 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
React实现全选功能
2020/08/25 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
阳光体育活动方案
2014/02/16 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
外贸业务员求职信
2014/06/16 职场文书
市场营销专业求职信
2014/06/17 职场文书
校庆标语集锦
2014/06/25 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
在js中修改html body的样式
2021/11/11 Javascript