详解如何用webpack打包一个网站应用项目

   index.html
   css
    style.css
   js
     index.js
  ...........

npm install --save-dev 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"codetitle">复制代码 代码如下: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:

  
如果我们不想每次修改都手工编译，直接执行webpack --watch就会自动监听文件修改，自动编译。
  
如果我们想压缩混淆代码，执行webpack -p吧！
  
如果配置文件不叫webpack.config.js，也可以运行webpack --config *.js指定配置文件。

webpack功能强大，这里只是指引小白开始使用，想深入了解的童鞋快去看官方文档吧！http://webpack.github.io/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。