详解如何用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 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
一些经常会用到的Javascript检测函数
May 31 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
ajax与302响应代码测试
Oct 23 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 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
PHP Google的translate API代码
2008/12/10 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
一个可以显示阴历的JS代码
2007/03/05 Javascript
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
用JS剩余字数计算的代码
2008/07/03 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
Python生成随机密码
2015/03/10 Python
在Python中使用Neo4j数据库的教程
2015/04/16 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
深入了解Python enumerate和zip
2020/07/16 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
三分钟英语演讲稿
2014/04/24 职场文书
高中语文课后反思
2014/04/27 职场文书
小学庆六一活动总结
2014/08/28 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
委托收款证明
2015/06/23 职场文书
学校团代会开幕词
2016/03/04 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技