一个完整的项目离不开 开发环境 生产环境 测试环境 这三个环境

首先解释一下这三个环境的含义

开发环境：开发环境是程序猿们专门用于开发的服务器，配置可以比较随意，为了开发调试方便，一般打开全部错误报告。

测试环境：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产环境上。

生产环境：是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。

其次介绍一下webpack打包vue项目

1.安装好npm，这个不再复述，然后在一个目录下执行 npm init，这样就会初始化一个项目包，里面就有了一个package.json的文件，这个文件想必大家都有所了解

2.然后安装一下webpack，既然我们想打包，就要把webpack这个工具安装好，安装方式有两种，一个是全局安装一个是安装在项目中，在项目的package.json目录下执行的命令分别是npm install -g webpack 和 npm install --save-dev webpack，在这里我们安装在项目里面，使用第二种安装方式

3.安装完成之后我们能看到项目目录下有一个node_module的文件夹，然后我们就可以写自己的项目了，我们首先建立一个app和public的文件夹，在app中新建两个文件，分别是test.js和main.js，在pulic中新建一个index.html文件，这样我们的基本项目雏形就产生了

4.我们在index.html中写入一下片段：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>Webpack Project</title>

  </head>

  <body>

    <div id='root'>

    </div>

    <script src="bundle.js"></script>

  </body>

</html>

5.我们在test.js中写入这样一个除了方法：

//test.js

module.exports = function() {

  var test= document.createElement('div');

  test.textContent = "Hi there and testing!";

  return test;

};

6.我们在main.js中把test.js的方法导入进来：

//main.js

var test= require('./test.js');

document.getElementById('root').appendChild(test());

7.下面我们就可以使用webpack工具进行打包了，在项目的根目录，也就是包含node_module的目录下执行下面这个命令node_modules/.bin/webpack app/main.js public/bundle.js，这条命令的是使用webpack把打包后的文件命名为bundle.js放在public文件夹下，其中app/main,js是项目的入口。我们能看到终端上会打印出包含这样的log

8.这就说明我们的打包工作完成了，然后我们打开index.html文件就能看到我们输入的内容：Hi there and testing!

9.这样要配置项目入口，又要配置输出文件名之类的东西，在命令行输入比较麻烦，我们可以使用文件配置的方式，在项目的根目录中新建一个webpack.congfig.js的文件，把下面这些内容写入进去

module.exports = {

  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件

  output: {

    path: __dirname + "/public",//打包后的文件存放的地方

    filename: "bundle.js"//打包后输出文件的文件名

  }

}

这样我们就可以直接使用node_modules/.bin/webpack直接进行打包操作了

10.如果我们不想使用node_modules/.bin/webpack这样的命令，习惯使用npm xxx之类的，我们在我们的package.json中设置一下启动命令即可：

"scripts": {

    "webpack": "webpack" //配置的地方就是这里啦

  }

然后我们直接执行npm run webpack同样可以执行打包任务

11.接下来我们介绍，如何直接引入json类型的文件，这里我们使用loaders模块，先说一下应用场景吧。我们现在有一个json文件，我们想把它导入到模块中，然后读取里面的信息，下面我们的文件目录是这样的：

12.如果我们想在任意一个模块，如test.js或者main.js中导入这个json文件，比如，我们的test.json文件中有这样一个内容

//test.json

{

  "Test": "Hi there and geetings from JSON!"

}

我们想在test.js使用这样Test字段

var test = require('./test.json');

module.exports = function() {

  var geet = document.createElement('div');

  geet.textContent = test.greetText;

  return geet;

};

我们就要引入json-loader，具体的办法是：在根目录下执行

//安装可以装换JSON的loader

npm install --save-dev json-loader

然后把我们的webpack.config.js配置成下面这样

module.exports = {

  entry:  __dirname + "/app/main.js",

  output: {

    path: __dirname + "/public",

    filename: "bundle.js"

  },

  module: {//在配置文件里添加JSON loader

    loaders: [

      {

        test: /\.json$/,

        use: "json-loader"

      }

    ]

  }

}

最后我们执行一下npm run webpack，打包完成，打开index.html页面就会显示test.json里面的Hi there and geetings from JSON!这个内容

13.如果我们想把css样式也一起打包，就npm install --save-dev style-loader css-loader，然后在webpack.config.js进行相应的配置就行了，这样是把js和css打包成一个文件，也可以把他们分开打包，这样后面再介绍吧

最后介绍一下我们的项目目录

如果分环境打包需要配置以下几个文件



细说一下每个文件做了什么

定义域名和端口号



做判断该走哪个环境



三个环境的定义



配置接口定义



配置打包命令

vue的webpack打包的更多相关文章

  1. vue和webpack打包 项目相对路径修改

    一般vue使用webpack打包是整个工程的根目录,但是很多情况下都是把vue打包后的文件在某子目录下. 修改: 1,打开index.js assetsPublicPath:'/' 改为: asset ...

  2. vue之webpack打包工具的使用

    vue之webpack打包工具的使用 一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个 ...

  3. vue 使用webpack打包后路径报错以及 alias 的使用

    一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...

  4. vue通过webpack打包后怎么运行

    1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...

  5. vue项目 webpack打包后，图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  6. vue项目webpack打包后修改配置文件

    从webpack打包结构中我们知道,vue中有一个存放外部资源的文件夹static,它里面的文件是不会被打包编译的,所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js ...

  7. 10. vue之webpack打包详解

    一.什么是webpack webpack官网给出的定义是 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应 ...

  8. vue结合webpack打包问题

    在使用vue开发项目时,如果要使用其单文件组件特性,必然要使用webpack或者其他打包工具打包,这里我用到的是webpack打包,首先是搭建vue环境和webpack环境,在这里遇到的一个问题是在成 ...

  9. vue 之webpack打包工具的使用

    一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.c ...

随机推荐

  1. zzulioj--1633--Happy Thanksgiving Day - Hateable Name(字符串筛选)

     1633: Happy Thanksgiving Day - Hateable Name Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 75   ...

  2. TCP、HTTP协议的RPC

    TCP.HTTP协议的RPC 1.1 基于TCP协议的RPC 1.1.1 RPC名词解释 RPC的全称是Remote Process Call,即远程过程调用,RPC的实现包括客户端和服务端,即服务调 ...

  3. Linux就该这么学 20181005(第八章防火墙)

    参考链接https://www.linuxprobe.com/ vim /etc/sysconfig/network-scripts/ifcfg-ens32 网络配置0 nmtui 网络配置1 nm- ...

  4. [JZOJ5166] [NOIP2017模拟6.26卢学魔] 解题报告 （记忆化搜索|拓扑排序）

    题目链接: http://172.16.0.132/senior/#main/show/5166 题目: 题解: 这个没什么好讲的,就是注意生产者没人吃也不是食物链,这告诉我们要积累生物知识注意细节 ...

  5. Array数组的排序与二分查字法

    import java.util.Arrays; public class sort { public static void main(String[] args) { // TODO 自动生成的方 ...

  6. NOIP2012 T3开车旅行 set+倍增

    70分做法: 先预处理出所有点的最近和次近(O(n^2)一遍就OK) 然后暴力求出每个解(O(nm)) //By SiriusRen #include <cstdio> #include ...

  7. jQuery ajax在IE浏览器的跨域问题--jquery.xdomainrequest.min.js

    jquery.ajax 加载数据, chrome, firefox, IE10+ 都可以顺利加载数据,但是IE9及以后版本不执,通过执行 jquery.ajax error 函数显示未执行 拒绝访问. ...

  8. Linux基础02

    ** Linux基本操作常用命令(二) ** 用户名与主机名 当你进入Linux终端时,你会看到如下样式的图片:     其中[z@z01]方括号内的z表示当前系统登录操作的用户名,@后的z01表示当 ...

  9. java中三个类别加载器的关系以及各自加载的类的范围

    Java在需要使用类别的时候,才会将类别加载,Java的类别载入是由类别载入器(Class loader)来达到的,预设上,在程序启动之后,主要会有三个类别加载器:Bootstrap Loader.E ...

  10. 转js调优

    随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术.而现在Ajax则是最为流行的一种方式.javascript是一种解释型 语言,所以能无法达到和C/Java之类的水平,限制了它 ...