nodejs+webpack+vue之webpack

Posted 2020-08-29

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
    })
  ])
}