详解如何用webpack打包一个网站应用项目
本文介绍了如何用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.在项目目录下输入npminit初始化一个node项目，输入项目名称等信息，完成后生成一个package.json文件。
3.在项目目录下安装webpack
npminstall--save-devwebpack
4.我们需要一个webpack.config.js文件，记录webpack配置信息。它的配置大概这样：
varwebpack=require('webpack');
varpath=require('path');
varbuildPath=path.resolve(__dirname,'build');
varconfig={
//入口文件
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安装的
npminstall--save-devcss-loaderlessless-loaderstyle-loaderurl-loaderbabelbabel-corebabel-loaderbabel-preset-es2015
6.如果需要用babel，在项目目录下新建一个名为.babelrc的隐藏文件，里面这样写：
{"presets":["es2015"]}
保存。
7.根据配置可以看到我们需要一个src文件夹和一个build文件夹，src放图片、css和js的源代码，build作为输出文件夹放编译后的文件。
8.src/js/index.js文件作为我们的入口文件，我们在里面可以愉快地写es6的代码，比如：
'usestrict';
require('../css/base.css');
require('../css/animate.css');
require('../css/style.less');
require('../js/zepto.min.js');
leta='world';
lethello=`hello${a}`;
console.log(hello);
可以看到css我们都通过require的方式引进来，这样webpack会把css和js打包进一个文件。
9.我们还差个index.html，放在项目文件夹下就可以，正常写，引入build/app.js就可以啦！
10.让我们试试吧，在命令行项目目录下运行webpack，哇，成功！
Time:**2622**ms **Asset****Size****Chunks****ChunkNames** **app.js**120kB**0****[emitted]**index +10hiddenmodules
可以看到app.js已经生成啦！
tips:
- 如果我们不想每次修改都手工编译，直接执行webpack--watch就会自动监听文件修改，自动编译。
- 如果我们想压缩混淆代码，执行webpack-p吧！
- 如果配置文件不叫webpack.config.js，也可以运行webpack--config*.js指定配置文件。
webpack功能强大，这里只是指引小白开始使用，想深入了解的童鞋快去看官方文档吧！http://webpack.github.io/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。