使用webpack搭建vue项目中遇到的问题

1：data数据文件经试验，需要放在生成的build文件夹中才能生效，但是应该把data文件夹先放在src中，然后如何定义config文件，让其复制过去？

　　

new CopyWebpackPlugin([
            { from: path.join(__dirname, "./src/css/i"), to: path.join(__dirname, "./build/exploit/mplus/"+config.version+"/css/i") },
            { from: path.join(__dirname, "./src/js/lib"), to: path.join(__dirname, "./build/exploit/mplus/"+config.version+"/js/lib") },
            { from: path.join(__dirname, "./src/js/data"), to: path.join(__dirname, "./build/exploit/mplus/"+config.version+"/js/data") }
        ])

2：对于常用的子组件在webpack中方式：(子组件改变父组件中的数据，原来是vm.data='',现在改为webpack怎么办？只能用emit？)

首先是父组件中的形式：

<template>
　　<h5>{{ceshidare}}</h5>
   <ceshi v-on:event2="event3"></ceshi>
</template>
<script>
var jDialog = require('./j-dialog.vue');//引入j-dialog组件
export default {
    name: 'app',//感觉没啥用
    data: function() {
        return {
            url: {
                getFloorConf: '/products/getFloorConf',//定义url链接
            },
            loadingShow: true,//定义data数据
        }
    },
    components: {
        'j-dialog': jDialog //定义组件，在html中使用<j-dialog></j-dialog>
    }，
　　methods: {
        event3:function(){
          this.ceshidare='yang';
        }
   }
}

</script>

子组件的形式：

<template>
    <div><button v-on:click="event">点击我</button></div>
</template>
<script>
    export default{
        name : 'ceshi',
        methods:{
            event:function(){
                this.$emit('event2');
            }
        }
    }
</script>

3:使用npm install命令安装后，在用npm run build 然后把html放进生成的build文件夹中，最后执行npm run dev命令，本地调试

首先设置package.json文件，设置dev命令：

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack --progress --bail --colors --hide-modules && webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --hide-modules"
  }

其中cross-env NODE_ENV=development是设置环境变量，执行webpack命令生成build文件

webpack --progress --bail --colors --hide-modules
然后执行热更新：webpack-dev-server --open --hot

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            LOCAL_URL: JSON.stringify("")//根据执行的环境变量不同，设置接口的前缀为空
        }),
        new webpack.optimize.UglifyJsPlugin({ //压缩js代码
          sourceMap: true,
          compress: {
            warnings: false
          }
        }),
        new webpack.LoaderOptionsPlugin({//压缩css代码
            minimize: true
        })
    ])
}else if(process.env.NODE_ENV === 'development'){
    module.exports.devtool = '#source-map'
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            LOCAL_URL: JSON.stringify("//plus.m.jd.com")//根据执行的环境变量不同，设置接口的前缀为域名
        }),
        new webpack.LoaderOptionsPlugin({//压缩js代码
            minimize: false
        }),
        new CleanWebpackPlugin(['build'])//因为在package.json文件中执行了两次webpack，所以在第一执行package的时候清除之前生成的文件夹
        //在第二次执行的webpack-dev-server没有配置环境变量，所以执行下面的else 不再清除生成的build文件夹，因为新的文件夹已经被占用
    ])

}else{
    module.exports.devtool = '#source-map'
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            LOCAL_URL: JSON.stringify("//plus.m.jd.com")
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: false
        })
    ])
}

对应的js可以获取到定义的全局变量：

url: {
                getFloorConf: LOCAL_URL+'/products/getFloorConf',

            }

4：不自动打开index，而是打开html文件夹，在devServer中配置：contentBase: path.join(__dirname, 'build'),：

在build文件夹中去加载index.html，如果没有index.html文件，将会在浏览器中显示所有build目录下的文件和文件夹