---恢复内容开始---

webpack主要执行流程:

入口→loader处理→出口

// webpack.config.js 文件:
const path = require('path') // 引入path模块
module.exports = {
"entry": "./src/main.js", // 入口文件
"output": {
"filename": 'bundle.js', // 打包后文件名字
"path": path.resolve(__dirname, "dist"), // 出口文件路径
"publicPath": "/dist" // 虚拟打包后文件路径。热替换时有用。打包文件不写入磁盘,存在虚拟文件夹中,以便于修改文件后及时反馈在网页上。
},
"module": {
"loaders":[{
"test": /\.css$/, // css文件需要style-loader,css-loader
"loader": ["style-loader","css-loader"],
"exclude": '/node_modules' // 不需要编译node_modules
},{
"test": /\.js$/,
"loader": 'babel-loader', // js文件使用babel-loader 转换。
"exclude": '/node_modules'
},{
"test": /\.vue$/, // 遇到vue文件使用vue-loader。vue-loader需要依赖其他loader 下载后会有提示
"loader": 'vue-loader',
"exclude": '/node_modules'
}]
},
resolve: {
alias: { // 别名设置
'vue$': 'vue/dist/vue.esm.js', // 运行时构建必用。
'@': path.resolve('src') // @代表src目录
}
},
devServer: { // 服务器设置
// contentBase: '', 这个键 主要作用是静态服务器入口文件夹。如果不设置,相当于项目目录。如果有index.html 会直接找到index.html并且打开。
hot: true, // 热切换
historyApiFallback: true, // 单页应用找不到时回滚到index.html
inline: true
}
}
  // 多文件入口
  const HtmlWebpackPlugin = require('html-webpack-plugin') // 引入html生成插件
 "entry": {
"first":"./src/entry/first.js", // key为文件名,对应出口[name].js 中的name
"second": './src/entry/secend.js' // value 为入口文件路径。
},
plugins: [
new HtmlWebpackPlugin ({ // 这个插件能在打包的时候,自动生成html文件,并且放入出口path中。并且sript src 引入所有打包的js文件。
filename: 'second.html', // 生产的html文件名字。
// template: 'test.html',
inject: true
}),
new HtmlWebpackPlugin({ // 2次实例化,生成2个html文件
filename: 'first.html',
inject: true
})
],
"output": {
"filename": '[name].js', // 出口文件名字,对于入口的key值
"path": path.resolve(__dirname, "./dist"),
"publicPath": "/dist"
},
// package.json  
// 这儿有了webpack,不再需要main字段。设置scripts字段。这儿用npm run dev 可运行dev键 后面的代码。
 "scripts": {
"dev": "webpack-dev-server --inline --hot", // 启动webpack调试服务器,只重新渲染修改部分,修改后立即刷新。
"build": "webpack -p" // webpack打包,并且文件压缩文件。
},
// .babelrc 
{
presets:['stage-2'] // 这儿stage 一共5个阶段,stage-5 不存在,为es2015 ,stage-0 最高,阶段数字越小,技术越新,但是新技术不稳定,可能未来会被淘汰。一般选stage-2
}

现在就可以用npm run dev 启动调试,npm run build 启动打包。

---恢复内容结束---

webpack 构建简单的vue项目的更多相关文章

  1. vue-cli+webpack搭建简单的vue项目框架

    0.先去官网下载安装nodeJS 1.在cmd中输入命令 node -version    若出现node版本号 则安装成功 2.通过命令:cd 文件夹名     进入某具体文件夹后进行如下命令操作: ...

  2. 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)

    深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...

  3. 搭建Vue.js环境,建立一个简单的Vue项目

    基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...

  4. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  5. VSCode配置简单的vue项目

    VSCode配置简单的vue项目 https://www.cnblogs.com/wnxyz8023/p/9989447.html 由于最近要使用的项目框架为前后端分离的,采用的是vue.js+web ...

  6. 使用VSCode配置简单的vue项目

    由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...

  7. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现

    使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这篇文章进行安装和破解 ...

  8. 三、使用VSCode配置简单的vue项目

    由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...

  9. 三、使用Maven构建简单的java项目

    前边,我刚搭建了Maven环境,还有给大家推荐了学习资源,这个小节,我们来就来,,简单的玩玩maven. 1.所需工具: 1.Eclipse     2.apache-maven-3.3.9   3. ...

随机推荐

  1. 2017最新PHP面试题

    这几天在面试,下面分享一下这几天面试所遇到的笔试题,目前还不打算工作,面试题会持续更新的,有些不想写答案了,有心的可以自己看着面试题查一下感觉记忆更深点.下面分享一下这几天遇到的php面试题. 掌贝面 ...

  2. ConcurrentHashMap\HashMap put操作时key为什么要rehash

    参考java并发编程的艺术一书中,对ConcurrentHashMap的讲解 ConcurrentHashMap使用的是分段锁Segment来保证不同的Segment区域互相不干扰,不存在锁竞争关系, ...

  3. scapy安装及SCTP包分析

    关于Scapy scapy是一个强大的交互式数据包处理程序(使用python编写).它能够伪造或者解码大量的网络协议数据包,能够发送.捕捉.匹配请求和回复包等.它可以很容易地处理一些典型操作,比如端口 ...

  4. 使用REST风格架构您需要知道的一些事

    1. REST的由来 2. REST的构成 2.1. 资源 2.2. 资源的表述 2.2.1. MIME(Multipurpose Internet Mail Extensions) 2.2.2. 缓 ...

  5. MapReduce编程(一) Intellij Idea配置MapReduce编程环境

    介绍怎样在Intellij Idea中通过创建mavenproject配置MapReduce的编程环境. 一.软件环境 我使用的软件版本号例如以下: Intellij Idea 2017.1 Mave ...

  6. python 中Dict 转 Json

    近期在公司须要写个小工具.运用到的python,然后须要将Dict转成Json. 之前遇到转换Json失败,然后以为复杂的Entity结构.不能用Json的库Json.dump().进行转换. 自己些 ...

  7. android:自己定义组合控件Weight(高仿猫眼底部菜单条)

    在我们实际开发其中.会碰见一些布局结构类似或者同样的界面.比如应用的设置界面.tabbutton界面等. 这时候.对于刚開始学习的人来说,xml里面一个个绘制出来也许是最初的想法.可能随着经验的积累, ...

  8. 多域名环境,页面获取url的一种方案

    因为系统是分布式部署的.而且有多个域名,所以常常涉及到获取url的问题. 这是系统框架层面须要提供的能力.否则每一个模块都须要自己去想办法获取ip,就会非常混乱.上线也easy发生bug 主要须要解决 ...

  9. 十六、Spring Boot 部署与服务配置

    spring Boot 其默认是集成web容器的,启动方式由像普通Java程序一样,main函数入口启动.其内置Tomcat容器或Jetty容器,具体由配置来决定(默认Tomcat).当然你也可以将项 ...

  10. IEEE Trans 2009 Stagewise Weak Gradient Pursuits论文学习

    论文在第二部分先提出了贪婪算法框架,如下截图所示: 接着根据原子选择的方法不同,提出了SWOMP(分段弱正交匹配追踪)算法,以下部分为转载<压缩感知重构算法之分段弱正交匹配追踪(SWOMP)&g ...