• webpack


    const path = require('path')
    const webpack = require('webpack')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const config = require('./config/')
    const IS_ENV = process.env.NODE_ENV == 'production'
    
    
    var plugins = []
    if (IS_ENV) { //生产环境
        plugins.push(new webpack.DefinePlugin({
            'process.env': { //设置成生产环境
                NODE_ENV: '"production"'
            }
        }))
        plugins.push(new webpack.optimize.UglifyJsPlugin({ //压缩代码
            compress: {
                warnings: false
            }
        }))
    }
    
    plugins.push(
        new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
            filename: './index.html', //生成的html存放路径,相对于 path
            template: './src/template/index.html', //html模板路径
        })
    )
    
    
    module.exports = {
        entry: ['./src/main.js'], //编译入口文件
        output: {
            publicPath: config.publicPath, //服务器的路径
            path: path.resolve(__dirname + config.publicPath), //编译到app目录
            filename: '[name].js?[hash]' //编译后的文件名
        },
        module: {
            loaders: [
                {
                    test: /.js(x)*$/,
                    exclude: /^node_modules$/,
                    loader: 'babel'
                },
                {
                    test: /.vue$/,
                    loader: 'vue'
                },
                {
                    test: /.css/,
                    exclude: /^node_modules$/,
                    loader: `style-loader!css-loader!autoprefixer-loader?{ browsers: ['last 100 versions'] }!`
                },
                {
                    test: /.less/,
                    exclude: /^node_modules$/,
                    loader: `style-loader!css-loader!autoprefixer-loader?{ browsers: ['last 100 versions'] }!less-loader`
                },
                {
                    test: /.(png|jpg)$/,
                    exclude: /^node_modules$/,
                    loader: 'url?limit=2000&name=[name].[ext]' //注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图片
                },
                {
                    test: /.(eot|woff|svg|ttf|woff2|gif|appcache)(?|$)/,
                    exclude: /^node_modules$/,
                    loader: 'file-loader?name=[name].[ext]'
                }
            ]
        },
        plugins,
        resolve: {
            extensions: ['', '.js', '.vue', '.jsx'], //后缀名自动补全
            alias: {
                vue: 'vue/dist/vue.js', //webpack打包时,需要设置别名
                store: path.resolve('src/store/'), //常用工具方法
            }
        },
        vue: {
            postcss: [
                require('autoprefixer')({
                    browsers: ['last 100 versions']
                })
            ]
        }
    }
  • 相关阅读:
    Kbuild文件
    patch与diff的恩怨
    依据linux Oops信息准确定位错误代码所在行
    理解嵌入式开发中的一些硬件相关的概念
    linux内核中经常用到的设备初始化宏
    如何实例化i2c_client(四法)
    设计和编写设备驱动的一般方法
    [转] rtp h264注意点(FU-A分包方式说明)
    c语言的label后面不能直接跟变量申明
    互联网目前最有影响力的流量统计网站
  • 原文地址:https://www.cnblogs.com/sxz2008/p/6773383.html
Copyright © 2020-2023  润新知