详解如何用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 form action动态修改方法
Nov 04 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 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
织梦模板标记简介
2007/03/11 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
Puppet的一些技巧
2018/09/17 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
程序员岗位职责
2013/11/11 职场文书
房地产开发项目建议书
2014/05/16 职场文书
职工小家建设活动方案
2014/08/25 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python