详解如何用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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
javascript 计算两个整数的百分比值
Dec 26 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
JQuery 文本框使用小结
May 22 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
vue中监听返回键问题
Aug 28 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 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解密Unicode及Escape加密字符串
2015/05/17 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
python实现随机漫步算法
2018/08/27 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
浅谈Python 参数与变量
2020/06/20 Python
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
物流专业大学应届生求职信
2013/11/03 职场文书
办公室主任先进事迹
2014/01/18 职场文书
家长给学校的建议书
2014/05/15 职场文书
机械专业求职信
2014/05/25 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
社区党员干部承诺书
2015/05/04 职场文书
办公经费申请报告
2015/05/15 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android