webpack初始化vue项目(三)

第三节是服务器的配置
首先我们要装一个 webpack-dev-server

然后在package.json中加入一行dev配置

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev":"webpack-dev-server --config webpack.config.js"
  }

然后webpack.config.js进行一下配置

const  path=require('path')
//定义一个变量，判断环境是不是开发环境
const isDev =process.env.NODE_ENV === 'development'

//需要装一个html-webpak-plugin
const HTMLPlugin=require('html-webpack-plugin')
const webpack=require('webpack')
const config={
    target:"web",//区分开发环境，编译目标是web
    //配置入口
    entry:path.join(__dirname,'src/index.js'),
    output:{//配置打包出口文件
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
    },
    module:{
        rules:[
            {//让webpack识别vue模板
                test:/.vue$/,
                loader:'vue-loader'
            },
            //样式
            {
                test:/.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            //图片转base64
            {
                test:/\.(gif|jpg|jpeg|svg)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:1024,
                            name:'[name].[ext]'
                        }
                    }
                ]
            },
            //处理stylus
            {
                test:/\.style/,
                use:[
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
            }
        ]
    },
    plugins:[
        //此处配置后，可以在其它JS访问
        new webpack.DefinePlugin({
            'process.env':{
                NODE_ENV:isDev?'"development"':'"production"'
            }
        }),
        new HTMLPlugin()
    ]
}
//根据不同的环境，进行不同操作
//需要安装cross-env
if(isDev){
    //代码调试配置，处理编译后的代码和源代码的映射关系
    config.devtool="#cheap-module-eval-source-map"
    config.devServer={
        port:'8000',
        host:'127.0.0.1',
        overlay:{
            errors:true//网页显示报错
        },
        open:true,//自动启动浏览器
        hot:true//热更新时只渲染组件
    }
    //热加载配置
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    )
}
module.exports=config

配置好之后，在控制台输入
npm run dev就会自动打开浏览器访问页面了