webpack自动打包部署
1.安装node.js：前往node.js官网下载并安装工具，安装完毕后在命令行输入以下命令测试是否安装成功，正确会出现版本号：npm -v
2.改变原有的环境变量，
(1)配置npm的全局模块的存放路径以及cache的路径，下建立"node_moudles"及"node_cache"两个文件夹，输入以下命令改变npm配置
npm config set prefix "D:\Program Files\nodejs\node_global" npm config set cache "D:\Program Files\nodejs\node_cache"
(2)在系统环境变量追加系统变量PATH，输入"node_moudles"文件夹路径，此后所安装的模块都会安装到改路径下
3.安装cnpm命令:npm install -g cnpm --registry=https://registry.npm.taobao.org，安装后cnpm -v 查看版本信息
4.安装nrm:cnpm install -g nrm
5.nrm ls 查看指向下载地址
6.nrm使用淘宝镜像：nrm use taobao
7.安装webpack
本地安装：仅将webpack安装在当前项目的node_modules目录中，仅对当前项目有效。本地安装就会将webpack的js包下载到项目下的npm_modeuls目录下。
全局安装：将webpack安装在本机，对所有项目有效，全局安装会锁定一个webpack版本，该版本可能不适用某个项目。全局安装就将webpack的js包下载到npm的包路径下。
进入webpack测试目录，运行：
1）本地安装：
在门户目录下创建webpack测试目录webpacktest01：
npm install --save-dev webpack 或 cnpm install --save-dev webpack
npm install --save-dev webpack-cli (4.0以后的版本需要安装webpack-cli)
2）全局安装加-g，如下：
npm install webpack -g 或 cnpm install webpack -g
使用@指定版本:cnpm install --save-dev webpack@3.6.0或npm install webpack@3.6.0 -g或 cnpm install webpack@3.6.0 -g
8.安装webpack-dev-serve安装webpack-dev-server
使用 webpack-dev-server需要安装webpack、 webpack-dev-server和 html-webpack-plugin三个包。
cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev
安装完成，会发现程序目录出现一个package.json文件，此文件中记录了程序的依赖。
(1)配置webpack-dev-server
在package.json中配置script
"scripts": {
"dev": "webpack‐dev‐server ‐‐inline ‐‐hot ‐‐open ‐‐port 5008"
},
--inline：自动刷新
--hot：热加载
--port：指定端口
--open：自动在默认浏览器打开
--host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址
此时package.json的文件内容如下：
{
"scripts": {
"dev": "webpack‐dev‐server ‐‐inline ‐‐hot ‐‐open ‐‐port 5008"
},
"devDependencies": {
"html‐webpack‐plugin": "^2.30.1",
"webpack": "^3.6.0",
"webpack‐dev‐server": "^2.9.1"
}
}
devDependencies：开发人员在开发过程中所需要的依赖。
scripts：可执行的命令
(2)配置webpack.config.js
在项目目录下创建 webpack.config.js， webpack.config.js是webpack的配置文件。在此文件中可以配
置应用的入口文件、输出配置、插件等，其中要实现热加载自动刷新功能需要配置html-webpack-plugin插件。
html-webpack-plugin的作用是根据html模板在内存生成html文件，它的工作原理是根据模板文件在内存中生成一
个index.html文件。
配置模板文件vue_temp.html内容如下：
<!DOCTYPE html>
<html lang="en" xmlns:v‐on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF‐8">
<title>vue.js入门程序</title>
</head>
<body>
<div id="app">
<input type="text" v‐model="num1">+
<input type="text" v‐model="num2">=
<span v‐text="result"></span>
<button v‐on:click="change">计算</button>
</div>
</body>
</html>
(3)配置 html-webpack-plugin
在webpack.config.js中配置html-webpack-plugin插件
var htmlwp = require('html‐webpack‐plugin');
module.exports={
entry:'./src/main.js', //指定打包的入口文件
output:{
path : __dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径
filename:'build.js' //输出文件
},
plugins:[
new htmlwp({
title: '首页', //生成的页面标题<head><title>首页</title></head>
filename: 'index.html', //webpack‐dev‐server在内存中生成的文件名称，自动将build注入到这
个页面底部，才能实现自动刷新功能
template: 'vue_temp.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
})
]
}
编写demo01.js文件
var add = function (x, y) {
return x+y;
}
module.exports.add = add;
// module.exports ={add,add2};//如果有多个方法这样导出
main.js文件如下
var {add} = require("./demo01")//导入上面的demo01.js
var Vue = require("./vue.min")
var VM = new Vue({
el:'#app',//vm接管了app区域的管理
data:{//model数据
num1:0,
num2:0,
result:0
},
methods:{
change:function () {
this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2))
}
}
});
(4)启动:进入项目目录，执行npm run dev
(5)debug:在webpack.config.js中配置：devtool: 'eval‐source‐map',
使用了webpack之后就不能采用传统js的调试方法在chrome中打断点。
webpack 将多个源文件打包成一个文件，并且文件的内容产生了很大的变化，webpack提供devtool进行调试，
devtool是基于sourcemap的方式，在调试时会生成一个map文件，其内容记录生成文件和源文件的内容映射，即
生成文件中的哪个位置对应源文件中的哪个位置，有了sourcemap就可以在调试时看到源代码。
webpack.config.js部分内容如下:
var htmlwp = require('html‐webpack‐plugin');
module.exports={
entry:'./src/main.js', //指定打包的入口文件
output:{
path : __dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径
filename:'build.js' //输出文件
},
devtool: 'eval‐source‐map',
......
浙公网安备 33010602011771号