* 搭建前端工程
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命令
总是返回一个相对当前工作目录的绝对路径
