Vue工程模板文件 webpack打包

2024-04-27 22:09•移动端•阅读 2526

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: [{
                    //加载与编译vue文件
                    loader: 'vue-loader',
                    options: {
                        loaders: {
                            less: ExtractTextPlugin.extract({
                                //minimize 启用压缩
                                use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],
                                //加载vue文件中的样式文件
                                fallback: 'vue-style-loader'
                            }),
                            css: ExtractTextPlugin.extract({
                                use: ['css-loader', 'autoprefixer-loader', 'less-loader'],
                                //加载vue文件中的样式文件
                                fallback: 'vue-style-loader'
                            })
                        }
                    }
                }]
            },
            //iview文件夹下的js编译处理
            {
                test: /iview\/.*?js$/,
                //es6编译为es5
                loader: 'babel-loader'
            },
            //js编译处理
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            //css处理
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    //css-loader加载css样式文件,minimize 启用压缩
                    use: ['css-loader?minimize', 'autoprefixer-loader'],
                    //将样式表直接插入到页面的<style>内
                    fallback: 'style-loader'
                })
            },
            //less处理
            {
                test: /\.less/,
                use: ExtractTextPlugin.extract({
                    //less-loader编译与加载less文件(需要依赖less库)
                    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"
}

（4）babel配置.babelrc文件

{
    "presets": ["es2015"],
    "plugins": ["transform-runtime"],
    "comments": false
}

(5) devtool

开发环境：eval-source-map

生产环境：none

参考：https://webpack.docschina.org/configuration/devtool/#development

上一篇 »vue项目webpack打包后修改配置文件
下一篇 »webpack+vue打包之后输出配置文件修改接口文件

Vue工程模板文件 webpack打包

相关推荐

vue-cli的webpack模板项目配置文件分析

webpack打包配置模板

关于vue的基础概念

webpack打包VUE项目读取外部配置文件，灵活配置域名

《转》vue-cli的webpack模板项目配置文件注释

vue -- vue-cli webpack项目打包后自动压缩成zip文件

webpack+vue打包之后输出配置文件修改接口文件

webpack打包vue项目之后生成的dist文件该怎么启动运行？