nodejs+webpack+vue之webpack

webpack是一款模塊加載器兼打包工具，把JS、樣式，圖片都作為模塊來使用和處理。項目下有個配置文件webpack.config.js，用來告訴webpack需要做什么，本項目的webpack.config.js文件內容如下：

引入模塊：

var path = require('path')
var webpack = require('webpack')

入口文件及輸出文件配置：

通過entry節點可以配置入口文件，且支持多個入口文件，每個模板只會有一個入口文件。

通過oupput節點可以配置輸出文件，輸出文件的文件名是根據入口文件來配置的，[name]的相應內容是entry節點下對應該的key,如下，則會輸出/dist/builg.index.js和dist/build.user.js兩個文件。

module.exports = {
  //入口文件
  entry: {
    index:'./src/index.js',
    user:'./src/user.js'
  },
  //輸出文件
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.[name].js'
  }
}

模塊加載器：

它告知webpack每一種文件都需要使用什么加載器來處理，常用的加載器有style-loader,css-loader,sass-loader,url-loader;

module.exports = {
    module: {
    rules: [
      {
        //把vue文件輸出成組件
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {            
            'scss': ExtractTextPlugin.extract('vue-style-loader!css-loader!sass-loader'),
            'sass': ExtractTextPlugin.extract('vue-style-loader!css-loader!sass-loader?indentedSyntax')
          }         
        }
      },
      {
　　　　 //將所有目錄下的es6代碼轉譯為es5代碼，但不包含node_modules目錄下的文件
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
　　　　 //用於打包圖片
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
　　　　 //把scss文件轉譯成css文件
        test: /\.scss$/,
        loader:ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!sass-loader' })
      }
    ]
  }
}

別名設置：

設置別名后，就不需要寫真實的路徑，只需用別名代替，如：require('httpHelper')。

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js',
　　　 'httpHelper': 'src/util/httpHelper.js'
    }
}

插件配置：

extract-text-webpack-plugin插件，不把樣式打包到腳本中，而是獨立打包樣式文件，生成新的css文件。

//樣式打包
var ExtractTextPlugin = require('extract-text-webpack-plugin');

plugins: [
new ExtractTextPlugin("./[name].css")
]

構建本地服務器：

該服務器基於node.js構建，可讓瀏覽器監測代碼的修改，並自動刷新,默認端口為‘8080’。

安裝：npm install --save-dev webpack-dev-server

devServer: {
    historyApiFallback: true,
    noInfo: true
}

判斷是生產環境還是開發環境：

以下代碼中NODE_ENV的配置是與package.json文件下的scripts節點下的內容相關，module.exports.plugins里的插件配置會合並到plugins:[new ExtractTextPlugin("./[name].css")]中。

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map' 
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

完整代碼如下：

var path = require('path')
var webpack = require('webpack')
//樣式打包 var ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
//入口文件配置
  entry: {
    index:'./src/index.js',
    user:'./src/user.js'
  },
//輸出文件配置
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.[name].js'
  },
  module: {
    rules: [
      {
　　　　 //把vue文件輸出成組件 
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {            
            'scss': ExtractTextPlugin.extract('vue-style-loader!css-loader!sass-loader'),
            'sass': ExtractTextPlugin.extract('vue-style-loader!css-loader!sass-loader?indentedSyntax')
          }         
        }
      },
      {
　　　　 //將所有目錄下的es6代碼轉譯為es5代碼，但不包含node_modules目錄下的文件
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
　　　　 //用於打包圖片
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
　　　　//把scss文件轉譯成css文件
       test: /\.scss$/,
       loader:ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!sass-loader' })
      }
    ]
  },
  resolve: {
　　//設置別名
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  plugins: [
  //樣式輸出路徑 new ExtractTextPlugin("./[name].css")
  ],
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

上一篇：nodejs+vue+webpack之項目概要

下一篇：nodejs+webpack+vue之node