使用webpack怎么構建一個vue項目

這篇文章給大家介紹使用webpack怎么構建一個vue項目，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

 "devDependencies": {
  "autoprefixer-loader": "^3.2.0",
  "babel-core": "^6.18.2",
  "babel-loader": "^6.2.7",
  "babel-plugin-transform-runtime": "^6.15.0",
  "babel-preset-es2015": "^6.18.0",
  "babel-preset-stage-0": "^6.16.0",
  "babel-runtime": "^6.18.0",
  "css-loader": "^0.25.0",
  "debug": "^2.2.0",
  "express": "^4.14.0",
  "extract-text-webpack-plugin": "^1.0.1",
  "file-loader": "^0.9.0",
  "html-webpack-plugin": "^2.24.1",
  "jquery": "^3.1.1",
  "less": "^2.7.1",
  "less-loader": "^2.2.3",
  "style-loader": "^0.13.1",
  "url-loader": "^0.5.7",
  "vue-hot-reload-api": "^1.2.0",
  "vue-html-loader": "^1.2.3",
  "vue-loader": "^7.3.0",
  "webpack": "^1.13.3",
  "webpack-dev-middleware": "^1.8.4",
  "webpack-dev-server": "^1.16.2",
  "webpack-hot-middleware": "^2.13.1"
 },
 "dependencies": {
  "vue": "^1.0.26",
  "vue-router": "^0.7.13"
 }

三、在項目目錄下新建一個名為src的目錄，里面用于存放入口文件（index.js）、項目源文件（html,css,js,img之類的）、組件（.vue后綴），我的src目錄結構大致如下：

src
 -entry
   -index.js
 -pages
   -components
   -css
   -img
   -js
   -index.html
 -public

當然，有輸入目錄，就有輸出目錄，即在項目目錄下新建一個output目錄，用于放置生產出來的各種資源文件。

四、在項目目錄下新建一個名為build目錄，里面用于存放各種配置文件，涉及到基礎配置、開發和生產環境、靜態服務器以及熱加載，詳細的內容請看下面的代碼：

1.webpack.config.js（基礎配置文件）

// 引入依賴模塊
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  // 入口文件，路徑相對于本文件所在的位置，可以寫成字符串、數組、對象
  entry: {
    // path.resolve([from ...], to) 將to參數解析為絕對路徑
    index:path.resolve(__dirname, '../src/entry/index.js'),
    // 需要被提取為公共模塊的群組
    vendors:['vue','vue-router','jquery'],
  },

  // 輸出配置
  output: {
    // 輸出文件，路徑相對于本文件所在的位置
    path: path.resolve(__dirname, '../output/static/js/'),

    // 設置publicPath這個屬性會出現很多問題：
    // 1.可以看成輸出文件的另一種路徑，差別路徑是相對于生成的html文件；
    // 2.也可以看成網站運行時的訪問路徑；
    // 3.該屬性的好處在于當你配置了圖片CDN的地址，本地開發時引用本地的圖片資源，上線打包時就將資源全部指向CDN了，如果沒有確定的發布地址不建議配置該屬性，特別是在打包圖片時，路徑很容易出現混亂，如果沒有設置，則默認從站點根目錄加載
    // publicPath: '../static/js/',

    // 基于文件的md5生成Hash名稱的script來防止緩存
    filename: '[name].[hash].js',
    // 非主入口的文件名，即未被列在entry中，卻又需要被打包出來的文件命名配置
    chunkFilename: '[id].[chunkhash].js'
  },

  // 其他解決方案
  resolve: {
    // require時省略的擴展名，遇到.vue結尾的也要去加載
    extensions: ['','.js', '.vue'],
    // 模塊別名地址，方便后續直接引用別名，無須寫長長的地址，注意如果后續不能識別該別名，需要先設置root
    alias:{}
  },  

  // 不進行打包的模塊
  externals:{},

  // 模塊加載器
  module: {
    // loader相當于gulp里的task，用來處理在入口文件中require的和其他方式引用進來的文件，test是正則表達式，匹配要處理的文件；loader匹配要使用的loader，"-loader"可以省略；include把要處理的目錄包括進來，exclude排除不處理的目錄    
    loaders: [
      // 使用vue-loader 加載 .vue 結尾的文件
      {
        test: /\.vue$/, 
        loader: 'vue-loader',
        exclude: /node_modules/  
      },
      // 使用babel 加載 .js 結尾的文件
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query:{
          presets: ['es2015', 'stage-0'], 
          plugins: ['transform-runtime']           
        }
      }, 
      // 使用css-loader和style-loader 加載 .css 結尾的文件
      { 
        test: /\.css$/,         
        // 將樣式抽取出來為獨立的文件
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader"),
        exclude: /node_modules/
      },
      // 使用less-loader、css-loader和style-loade 加載 .less 結尾的文件
      { 
        test: /\.less$/,         
        // 將樣式抽取出來為獨立的文件
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!less-loader"),
        exclude: /node_modules/
      },      
      // 加載圖片
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader',
        query: {
          // 把較小的圖片轉換成base64的字符串內嵌在生成的js文件里
          limit: 10000,
          // 路徑要與當前配置文件下的publicPath相結合
          name:'../img/[name].[ext]?[hash:7]'
        }
      },
      // 加載圖標
      {
        test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
        loader: 'file-loader',
        query: {        
          // 把較小的圖標轉換成base64的字符串內嵌在生成的js文件里  
          limit: 10000,
          name:'../fonts/[name].[ext]?[hash:7]',
          prefix:'font'
        }
      },       
    ]     
  },

  // 配置插件項
  plugins: [] 
}

2.webpack.dev.config.js（開發環境下的配置文件）

// 引入依賴模塊
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

// 引入基本配置
var config = require('./webpack.config.js');

// 必須修改原配置中網站運行時的訪問路徑，相當于絕對路徑，修改完之后，當前配置文件下的很多相對路徑都是相對于這個來設定；
// 注意：webpack-dev-server會實時的編譯，但是最后的編譯的文件并沒有輸出到目標文件夾，而是保存到了內存當中
config.output.publicPath = '/';

// 重新配置模塊加載器
config.module= {
  // test是正則表達式，匹配要處理的文件；loader匹配要使用的loader，"-loader"可以省略；include把要處理的目錄包括進來，exclude排除不處理的目錄    
  loaders: [
    // 使用vue-loader 加載 .vue 結尾的文件
    {
      test: /\.vue$/, 
      loader: 'vue-loader',
      exclude: /node_modules/  
    },
    // 使用babel 加載 .js 結尾的文件
    {
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/,
      query:{
        presets: ['es2015', 'stage-0'], 
        plugins: ['transform-runtime']           
      }
    }, 
    // 使用css-loader、autoprefixer-loader和style-loader 加載 .css 結尾的文件
    { 
      test: /\.css$/,         
      // 將樣式抽取出來為獨立的文件
      loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader"),
      exclude: /node_modules/
    },
    // 使用less-loader、autoprefixer-loader、css-loader和style-loade 加載 .less 結尾的文件
    { 
      test: /\.less$/,         
      // 將樣式抽取出來為獨立的文件
      loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!less-loader"),
      exclude: /node_modules/
    },      
    // 加載圖片
    {
      test: /\.(png|jpg|gif)$/,
      loader: 'url-loader',
      query: {
        // 把較小的圖片轉換成base64的字符串內嵌在生成的js文件里
        limit: 10000,
        // 路徑和生產環境下的不同，要與修改后的publickPath相結合
        name: 'img/[name].[ext]?[hash:7]'
      }
    },
    // 加載圖標
    {
      test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
      loader: 'file-loader',
      query: {          
        limit: 10000,
        // 路徑和生產環境下的不同，要與修改后的publickPath相結合
        name:'fonts/[name].[ext]?[hash:7]',
        prefix:'font'
      }
    },       
  ]     
};

// 重新配置插件項
config.plugins = [
  // 位于開發環境下
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: '"development"'
    }
  }),

  // 自動生成html插件，如果創建多個HtmlWebpackPlugin的實例，就會生成多個頁面
  new HtmlWebpackPlugin({
    // 生成html文件的名字，路徑和生產環境下的不同，要與修改后的publickPath相結合，否則開啟服務器后頁面空白
    filename: 'src/pages/index.html',
    // 源文件，路徑相對于本文件所在的位置
    template: path.resolve(__dirname, '../src/pages/index.html'),
    // 需要引入entry里面的哪幾個入口，如果entry里有公共模塊，記住一定要引入
    chunks: ['vendors','index'],
    // 要把<script>標簽插入到頁面哪個標簽里(body|true|head|false)
    inject: 'body',
    // 生成html文件的標題
    title:''
    // hash如果為true，將添加hash到所有包含的腳本和css文件，對于解除cache很有用
    // minify用于壓縮html文件，其中的removeComments:true用于移除html中的注釋，collapseWhitespace:true用于刪除空白符與換行符
  }),  

  // 提取css單文件的名字，路徑和生產環境下的不同，要與修改后的publickPath相結合
  new ExtractTextPlugin("[name].[contenthash].css"),  

  // 提取入口文件里面的公共模塊
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendors',
    filename: 'vendors.js',
  }),  

  // 為組件分配ID，通過這個插件webpack可以分析和優先考慮使用最多的模塊，并為它們分配最小的ID
  new webpack.optimize.OccurenceOrderPlugin(),

  // 模塊熱替換插件
  new webpack.HotModuleReplacementPlugin(),

  // 允許錯誤不打斷程序
  new webpack.NoErrorsPlugin(),

  // 全局掛載插件
  new webpack.ProvidePlugin({
    $:"jquery",
    jQuery:"jquery",
    "window.jQuery":"jquery"
  })    
];

// vue里的css也要單獨提取出來
config.vue = {
  loaders: {
    css: ExtractTextPlugin.extract("css")
  }
};

// 啟用source-map，開發環境下推薦使用cheap-module-eval-source-map
config.devtool='cheap-module-eval-source-map';

// 為了實現熱加載，需要動態向入口配置中注入 webpack-hot-middleware/client ，路徑相對于本文件所在的位置
// var devClient = 'webpack-hot-middleware/client';
// 為了修改html文件也能實現熱加載，需要修改上面的devClient變量，引入同級目錄下的dev-client.js文件
var devClient = './build/dev-client';
// Object.keys()返回對象的可枚舉屬性和方法的名稱
Object.keys(config.entry).forEach(function (name, i) {
  var extras = [devClient];
  config.entry[name] = extras.concat(config.entry[name]);
})

module.exports = config;

3.webpack.prod.config.js（生產環境下的配置文件）

// 引入依賴模塊
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

// 引入基本配置
var config = require('./webpack.config');

// 重新配置插件項
config.plugins = [
  // 位于生產環境下
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: '"production"'
    }
  }),

  // 自動生成html插件，如果創建多個HtmlWebpackPlugin的實例，就會生成多個頁面
  new HtmlWebpackPlugin({
    // 生成html文件的名字，路徑相對于輸出文件所在的位置
    filename: '../../html/index.html',
    // 源文件，路徑相對于本文件所在的位置
    template: path.resolve(__dirname, '../src/pages/index.html'),
    // 需要引入entry里面的哪幾個入口，如果entry里有公共模塊，記住一定要引入
    chunks: ['vendors','special','index'],
    // 要把<script>標簽插入到頁面哪個標簽里(body|true|head|false)
    inject: 'body',
    // 生成html文件的標題
    title:'',
    // hash如果為true，將添加hash到所有包含的腳本和css文件，對于解除cache很有用
    // minify用于壓縮html文件，其中的removeComments:true用于移除html中的注釋，collapseWhitespace:true用于刪除空白符與換行符
  }),   

  // 提取css單文件的名字，路徑相對于輸出文件所在的位置
  new ExtractTextPlugin("../css/[name].[contenthash].css"),  

  // 提取入口文件里面的公共模塊
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendors',
    filename: 'vendors.js',
  }),  
  
  // 壓縮js代碼
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    },
    // 排除關鍵字，不能混淆
    except:['$','exports','require']
  }),

  // 為組件分配ID，通過這個插件webpack可以分析和優先考慮使用最多的模塊，并為它們分配最小的ID
  new webpack.optimize.OccurenceOrderPlugin(),

  // 全局掛載插件，當模塊使用這些變量的時候，wepback會自動加載，區別于window掛載
  new webpack.ProvidePlugin({
    $:"jquery",
    jQuery:"jquery",
    "window.jQuery":"jquery"
  })  
];

// vue里的css也要單獨提取出來
config.vue = {
  loaders: {
    css: ExtractTextPlugin.extract("css")
  }
};

// 開啟source-map，生產環境下推薦使用cheap-source-map或source-map，后者得到的.map文件體積比較大，但是能夠完全還原以前的js代碼
config.devtool='source-map';
// 關閉source-map
// config.devtool=false;

module.exports = config;

4.dev-server.js（服務器配置文件）

// 引入依賴模塊
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.dev.config.js');

// 創建一個express實例
var app = express();

// 對網站首頁的訪問返回 "Hello World!" 字樣
app.get('/', function (req, res) {
  res.send('Hello World!');
});

// 調用webpack并把配置傳遞過去
var compiler = webpack(config);

// 使用 webpack-dev-middleware 中間件，搭建服務器
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: config.output.publicPath,
  stats: {
    colors: true,
    chunks: false
  }
})

// 使用 webpack-hot-middleware 中間件，實現熱加載
var hotMiddleware = require('webpack-hot-middleware')(compiler);

// 為了修改html文件也能實現熱加載，使用webpack插件來監聽html源文件改變事件
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    // 發布事件
    hotMiddleware.publish({ action: 'reload' });
    cb();
  })
});

// 注冊中間件
app.use(devMiddleware);
app.use(hotMiddleware);

// 監聽 8888 端口，開啟服務器
app.listen(8888, function (err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log('Listening at http://localhost:8888');
})

5.dev-client.js（配合dev-server.js監聽html文件改動也能夠觸發自動刷新）

// 引入 webpack-hot-middleware/client 
var hotClient = require('webpack-hot-middleware/client');

// 訂閱事件，當 event.action === 'reload' 時執行頁面刷新
hotClient.subscribe(function (event) {
  if (event.action === 'reload') {
    window.location.reload();
  }
})

五、為了不必每次構建項目都要輸入webpack --display-modules --display-chunks --config build/webpack.config.js這條長命令，我們在package.js文件中修改“scripts”項：

"scripts": {
 "build":"webpack --display-modules --display-chunks --config build/webpack.config.js",
 "dev":"node ./build/dev-server.js"
}

關于使用webpack怎么構建一個vue項目就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。