本篇文章為大家展示了WebPack工具怎么使用，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)公司是一家以成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、品牌設(shè)計(jì)、軟件運(yùn)維、seo優(yōu)化、小程序App開發(fā)等移動開發(fā)為一體互聯(lián)網(wǎng)公司。已累計(jì)為護(hù)欄打樁機(jī)等眾行業(yè)中小客戶提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開發(fā)服務(wù)。

WebPack是什么

• 一個(gè)打包工具
• 一個(gè)模塊加載工具
• 各種資源都可以當(dāng)成模塊來處理
•  如今，越來越多的JavaScript代碼被使用在頁面上，我們添加很多的內(nèi)容在瀏覽器里。如何去很好的組織這些代碼，成為了一個(gè)必須要解決的難題。

對于模塊的組織，通常有如下幾種方法：

• 通過書寫在不同文件中，使用script標(biāo)簽進(jìn)行加載
• CommonJS進(jìn)行加載（NodeJS就使用這種方式）
• AMD進(jìn)行加載（require.js使用這種方式）
• ES6模塊
     思考：為什么只有JS需要被模塊化管理，前臺的很多預(yù)編譯內(nèi)容，不需要管理嗎？

基于以上的思考，WebPack項(xiàng)目有如下幾個(gè)目標(biāo)：

• 將依賴樹拆分，保證按需加載
• 保證初始加載的速度
• 所有靜態(tài)資源可以被模塊化
• 可以整合第三方的庫和模塊
• 可以構(gòu)造大系統(tǒng)

從下圖可以比較清晰的看出WebPack的功能

這是一個(gè)示意圖

WebPack的特點(diǎn)

• 豐富的插件，方便進(jìn)行開發(fā)工作
• 大量的加載器，包括加載各種靜態(tài)資源
• 代碼分割，提供按需加載的能力
• 發(fā)布工具

WebPack的優(yōu)勢

• webpack 是以 commonJS 的形式來書寫腳本滴，但對 AMD/CMD 的支持也很全面，方便舊項(xiàng)目進(jìn)行代碼遷移。
• 能被模塊化的不僅僅是 JS 了。
• 開發(fā)便捷，能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖片轉(zhuǎn)base64等。
• 擴(kuò)展性強(qiáng)，插件機(jī)制完善，特別是支持 React 熱插拔（見 react-hot-loader ）的功能讓人眼前一亮。

WebPack的安裝

安裝命令

$ npm install webpack -g

使用webpack

$ npm init # 會自動生成一個(gè)package.json文件
$ npm install webpack --save-dev #將webpack增加到package.json文件中

可以使用不同的版本

$ npm install webpack@1.2.x --save-dev

如果想要安裝開發(fā)工具

$ npm install webpack-dev-server --save-dev

WebPack的配置

每個(gè)項(xiàng)目下都必須配置有一個(gè) webpack.config.js ，它的作用如同常規(guī)的 gulpfile.js/Gruntfile.js ，就是一個(gè)配置項(xiàng)，告訴 webpack 它需要做什么。

下面是一個(gè)例子

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
  //插件項(xiàng)
  plugins: [commonsPlugin],
  //頁面入口文件配置
  entry: {
    index : './src/js/page/index.js'
  },
  //入口文件輸出配置
  output: {
    path: 'dist/js/page',
    filename: '[name].js'
  },
  module: {
    //加載器配置
    loaders: [
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.js$/, loader: 'jsx-loader?harmony' },
      { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
  },
  //其它解決方案配置
  resolve: {
    root: 'E:/github/flux-example/src', //絕對路徑
    extensions: ['', '.js', '.json', '.scss'],
    alias: {
      AppStore : 'js/stores/AppStores.js',
      ActionType : 'js/actions/ActionType.js',
      AppAction : 'js/actions/AppAction.js'
    }
  }
};

當(dāng)前標(biāo)題：WebPack工具怎么使用-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://jinyejixie.com/article34/egcpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)公司、移動網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、網(wǎng)站改版、網(wǎng)站制作

廣告

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