本文介紹了如何用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安裝的

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/

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。