Vue工程模板文件 webpack打包配置方法

1、github

github地址：https://github.com/MengFangui/VueProjectTemplate

2、webpack配置

（1）基础配置webpack.base.config.js

const path = require(\'path\');
//处理共用、通用的js
const webpack = require(\'webpack\');
//css单独打包
const ExtractTextPlugin = require(\'extract-text-webpack-plugin\');
module.exports = {
 //入口文件
 entry: {
  main: \'./src/main\',
  vendors: \'./src/vendors\'
 },
 output: {
  path: path.join(__dirname, \'./dist\')
 },
 module: {
  rules: [
   //vue单文件处理
   {
    test: /\\.vue$/,
    use: [{
     loader: \'vue-loader\',
     options: {
      loaders: {
       less: ExtractTextPlugin.extract({
        //minimize 启用压缩
        use: [\'css-loader?minimize\', \'autoprefixer-loader\', \'less-loader\'],
        fallback: \'vue-style-loader\'
       }),
       css: ExtractTextPlugin.extract({
        use: [\'css-loader\', \'autoprefixer-loader\', \'less-loader\'],
        fallback: \'vue-style-loader\'
       })
      }
     }
    }]
   },
   //iview文件夹下的js编译处理
   {
    test: /iview\\/.*?js$/,
    loader: \'babel-loader\'
   },
   //js编译处理
   {
    test: /\\.js$/,
    loader: \'babel-loader\',
    exclude: /node_modules/
   },
   //css处理
   {
    test: /\\.css$/,
    use: ExtractTextPlugin.extract({
     //minimize 启用压缩
     use: [\'css-loader?minimize\', \'autoprefixer-loader\'],
     fallback: \'style-loader\'
    })
   },
   //less处理
   {
    test: /\\.less/,
    use: ExtractTextPlugin.extract({
     use: [\'css-loader?minimize\', \'autoprefixer-loader\', \'less-loader\'],
     fallback: \'style-loader\'
    })
   },
   //图片处理
   {
    test: /\\.(gif|jpg|png|woff|svg|eot|ttf)\\&;?.*$/,
    loader: \'url-loader?limit=1024\'
   },
   //实现资源复用
   {
    test: /\\.(html|tpl)$/,
    loader: \'html-loader\'
   }
  ]
 },
 resolve: {
  //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
  extensions: [\'.js\', \'.vue\'],
  //模块别名定义，方便后续直接引用别名，无须多写长长的地址
  alias: {
   \'vue\': \'vue/dist/vue.esm.js\'
  }
 }
};

（2）开发环境配置webpack.dev.config.js

//处理共用、通用的js
const webpack = require(\'webpack\');
//处理html模板
const HtmlWebpackPlugin = require(\'html-webpack-plugin\');
//css单独打包
const ExtractTextPlugin = require(\'extract-text-webpack-plugin\');
//合并配置
const merge = require(\'webpack-merge\');
const webpackBaseConfig = require(\'./webpack.base.config.js\');
//fs模块用于对系统文件及目录进行读写操作
const fs = require(\'fs\');
//编译前用node生成一个env.js的文件，用来标明当前是开发（development）还是生产环境（production）
fs.open(\'./src/config/env.js\', \'w\', function(err, fd) {
 const buf = \'export default \"development\";\';
 fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});
});
module.exports = merge(webpackBaseConfig, {
 //打包代码的同时生成一个sourcemap文件，并在打包文件的末尾添加//# souceURL，注释会告诉JS引擎原始文件位置
 devtool: \'#source-map\',
 output: {
  //线上环境路径
  publicPath: \'/dist/\',
  filename: \'[name].js\',
  chunkFilename: \'[name].chunk.js\'
 },
 plugins: [
  //css单独打包
  new ExtractTextPlugin({
   filename: \'[name].css\',
   allChunks: true
  }),
  //通用模块编译
  new webpack.optimize.CommonsChunkPlugin({
   //提取的公共块的块名称（chunk）
   name: \'vendors\',
   //生成的通用的文件名
   filename: \'vendors.js\'
  }),
  new HtmlWebpackPlugin({
   //输出文件
   filename: \'../index.html\',
   //模板文件
   template: \'./src/template/index.ejs\',
   //不插入生成的 js 文件，只是单纯的生成一个 html 文件
   inject: false
  })
 ]
});

（3）线上环境配置webpack.prod.config.js

//处理共用、通用的js
const webpack = require(\'webpack\');
//处理html模板
const HtmlWebpackPlugin = require(\'html-webpack-plugin\');
//css单独打包
const ExtractTextPlugin = require(\'extract-text-webpack-plugin\');
//合并配置
const merge = require(\'webpack-merge\');
const webpackBaseConfig = require(\'./webpack.base.config.js\');
//fs模块用于对系统文件及目录进行读写操作
const fs = require(\'fs\');
//编译前用node生成一个env.js的文件，用来标明当前是开发（development）还是生产环境（production）
fs.open(\'./src/config/env.js\', \'w\', function (err, fd) {
 const buf = \'export default \"production\";\';
 fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer){});
});
module.exports = merge(webpackBaseConfig, {
 output: {
  //线上环境路径
  publicPath: \'dist/\',
  filename: \'[name].[hash].js\',
  chunkFilename: \'[name].[hash].chunk.js\'
 },
 plugins: [
  new ExtractTextPlugin({
   //css单独打包
   filename: \'[name].[hash].css\',
   allChunks: true
  }),
  //通用模块编译
  new webpack.optimize.CommonsChunkPlugin({
   //提取的公共块的块名称（chunk）
   name: \'vendors\',
   //生成的通用的文件名
   filename: \'vendors.[hash].js\'
  }),
  new webpack.DefinePlugin({
   \'process.env\': {
    NODE_ENV: \'\"production\"\'
   }
  }),
  //js压缩
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  }),
  new HtmlWebpackPlugin({
   //输出文件
   filename: \'../index_prod.html\',
   //模板文件
   template: \'./src/template/index.ejs\',
   //不插入生成的 js 文件，只是单纯的生成一个 html 文件
   inject: false
  })
 ]
});

（4）package.json文件

{
 \"name\": \"iview-project\",
 \"version\": \"2.1.0\",
 \"description\": \"A base project with Vue.js2、Vue-Router、webpack2 and with iView2.\",
 \"main\": \"index.js\",
 \"scripts\": {
 \"init\": \"webpack --progress --config webpack.dev.config.js\",
 \"dev\": \"webpack-dev-server --content-base ./ --open --inline --hot --compress --history-api-fallback --config webpack.dev.config.js\",
 \"build\": \"webpack --progress --hide-modules --config webpack.prod.config.js\"
 },
 \"repository\": {
 \"type\": \"git\",
 \"url\": \"git+https://github.com/iview/iview-project.git\"
 },
 \"author\": \"Aresn\",
 \"license\": \"MIT\",
 \"dependencies\": {
 \"vue\": \"^2.2.6\",
 \"vue-router\": \"^2.2.1\",
 \"iview\": \"^2.0.0-rc.8\"
 },
 \"devDependencies\": {
 \"autoprefixer-loader\": \"^2.0.0\",
 \"babel\": \"^6.23.0\",
 \"babel-core\": \"^6.23.1\",
 \"babel-loader\": \"^6.2.4\",
 \"babel-plugin-transform-runtime\": \"^6.12.0\",
 \"babel-preset-es2015\": \"^6.9.0\",
 \"babel-runtime\": \"^6.11.6\",
 \"css-loader\": \"^0.23.1\",
 \"extract-text-webpack-plugin\": \"^2.0.0\",
 \"file-loader\": \"^0.8.5\",
 \"html-loader\": \"^0.3.0\",
 \"html-webpack-plugin\": \"^2.28.0\",
 \"less\": \"^2.7.1\",
 \"less-loader\": \"^2.2.3\",
 \"style-loader\": \"^0.13.1\",
 \"url-loader\": \"^0.5.7\",
 \"vue-hot-reload-api\": \"^1.3.3\",
 \"vue-html-loader\": \"^1.2.3\",
 \"vue-loader\": \"^11.0.0\",
 \"vue-style-loader\": \"^1.0.0\",
 \"vue-template-compiler\": \"^2.2.1\",
 \"webpack\": \"^2.2.1\",
 \"webpack-dev-server\": \"^2.4.1\",
 \"webpack-merge\": \"^3.0.0\"
 },
 \"bugs\": {
 \"url\": \"https://github.com/iview/iview-project/issues\"
 },
 \"homepage\": \"https://www.iviewui.com\"
}

ps：下面看下如何使用webpack打包vue项目？

1、安装nodejs：使用webpack打包需要用到npm，npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等），所以需要先下载安装nodejs，安装完成后使用npm -v查看是否安装完成；

2、安装cnpm（此步骤为非必须）：因为npm安装插件是从国外的网站上下载的，由于网络影响，很容易就出现异常，cnpm是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。 使用npm install -g cnpm –registry=https://registry.npm.taobao.org安装，之后可以使用cnpm来代替npm；

3、全局安装vue-cli脚手架，npm install -g vue-cli （不加-g安装到当前目录；加-g安装到系统的node目录），安装完成后使用vue -V查看；

4、创建一个基于webpack模板的新项目（下载模板）；使用 vue init webpack my-project(项目文件夹名)；接下来进行一系列的设置后，就下载好了一个vue模板了；

5、cd my-project 进入项目文件夹；使用npm install命令安装package.json文件里的依赖，会根据前端项目的依赖关系下载好相关的组件，存在项目目录的node_modules文件夹下；

6、安装node_modules依赖后，使用命令 npm run dev 启动项目（dev配置在package.json文件中）。

以上所述是小编给大家介绍的Vue工程模板文件 webpack打包，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！