使用webpack打包一個網(wǎng)站應(yīng)用項目的示例

這篇文章給大家分享的是有關(guān)使用webpack打包一個網(wǎng)站應(yīng)用項目的示例的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比思茅網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式思茅網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋思茅地區(qū)。費用合理售后完善，10年實體公司更值得信賴。

隨著前端技術(shù)的發(fā)展，越來越多新名詞出現(xiàn)在我們眼前。angularjs、react、gulp、webpack、es6、babel……新技術(shù)出現(xiàn)，讓我們了解了解用起來吧！今天我來介紹一下如何用webpack打包一個網(wǎng)頁應(yīng)用。

一般我們寫頁面，大概都是這樣的結(jié)構(gòu)：

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

這樣我們的html里直接引用css和js，完成一個網(wǎng)頁應(yīng)用。用webpack也類似，只是webpack把圖片、css和js都編譯打包成一個文件，我們只需要引用一個文件就可以了。

1.我們需要先安裝node環(huán)境。沒安裝的請自行安裝

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的直接轉(zhuǎn)為base64
   { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
   ]

 },
};

module.exports = config;

我們需要指定編譯的入口文件和輸出的目錄路徑，以及css和js用什么loader處理，比如我使用了less，要編譯less文件，就指定less-loader，js我要用es6來寫，為了兼容性，用babel來轉(zhuǎn)成es5的代碼。如果要使用react，也可以指定jsx等的編譯方式。

5.這些loader都是需要npm安裝的

復(fù)制代碼代碼如下:

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.根據(jù)配置可以看到我們需要一個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已經(jīng)生成啦！

tips:

如果我們不想每次修改都手工編譯，直接執(zhí)行webpack --watch就會自動監(jiān)聽文件修改，自動編譯。
如果我們想壓縮混淆代碼，執(zhí)行webpack -p吧！
如果配置文件不叫webpack.config.js，也可以運行webpack --config *.js指定配置文件。

感謝各位的閱讀！關(guān)于“使用webpack打包一個網(wǎng)站應(yīng)用項目的示例”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

名稱欄目：使用webpack打包一個網(wǎng)站應(yīng)用項目的示例
文章起源：http://bm7419.com/article30/igdopo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、移動網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、云服務(wù)器、電子商務(wù)、網(wǎng)站設(shè)計

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容