webpack+vue+webpack-dev-server配置

* 搭建前端工程

1、初始化项目 npm init

2、npm i webpack vue vue-loader

3、按照提示安装对应的插件

4、创建webpack.config.js

cinst path=require('path')

module.exports={

}

问题：运行npm run build 的时候，提示我安装脚手架工具  需要将webpack版本降下来

问题：ERROR in ./src/app.vue?vue&type=style&index=0&lang=css样式不能识别

解决办法：使用vie-style-loader代替style-loader

rules: [

{test: /\.vue$/,loader: "vue-loader"},

{test: /\.css$/,use: ["vue-style-loader", "css-loader"]  }

]

npm i style-loader url-loader file-loader

npm i stylus-loader stylus 安装stylus-loader时需要同时安装stylus模块

webpack-dev-server :提供高效且方便的开发模式

package.json 中scripts 增加"dev": "webpack-dev-server --config webpack.config.js"

webpack.config.js

1、中增加配置项 target:'web'

2、定义const isDev=process.env.NODE_ENV==='development'

3、判断isDev 增加config.devServer={

port:'8001',

host:'0.0.0.0', //可以局域网和localhost访问

overlay:{

errors:true

},

open:true,

host:true //界面热加载

}

config.plugins.push(

new webpack.HostModuleReplacementPlugin(), //热加载组件

new webpack.NoEmitOnErrorPlugin() //错误情况不提交

)

4、增加config.envtool='#cheap-module-eval-source-map' //与源文件进行映射

npm i webpack-dev-server //适用于开发模式

npm i cross-env //运行命令时设置环境变量  区分不同的运行平台

npm i html-webpack-plugin //组件 加载html

path.join() 简单讲路径进行拼接

path.resolve() 将以'/'+开始的路径 作为根目录，在此之前的路径会被丢弃  类似cd命令

总是返回一个相对当前工作目录的绝对路径