详解如何用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 相关文章推荐
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
Vue图片裁剪组件实例代码
Jul 02 Vue.js
利用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
德生S2000电路分析
2021/03/02 无线电
提高php运行速度的一些小技巧分享
2012/07/03 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
pygame实现打字游戏
2021/02/19 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
求职信的要素有哪些呢
2013/12/26 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
前处理班长职位说明书
2014/03/01 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
城南旧事读书笔记
2015/06/29 职场文书
股东出资协议书
2016/03/21 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
go goth封装第三方认证库示例详解
2022/08/14 Golang