webpack入门

最新推荐文章于 2024-05-16 17:18:08 发布

TheBlindM

最新推荐文章于 2024-05-16 17:18:08 发布

阅读量181

点赞数

分类专栏： webpack 文章标签： Vue webpack入门

本文链接：https://blog.csdn.net/qq_40495860/article/details/96431260

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.webpack介绍

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

Webpack 可以将js、css、png等多种静态资源进行打包，使用webpack有什么好处呢？
1、模块化开发
程序员在开发时可以分模块创建不同的js、 css等小文件方便开发，最后使用webpack将这些小文件打包成一个文
件，减少了http的请求次数。
webpack可以实现按需打包，为了避免出现打包文件过大可以打包成多个文件。
2、编译typescript、ES6等高级js语法
随着前端技术的强大，开发中可以使用javascript的很多高级版本，比如：typescript、ES6等，方便开发，
webpack可以将打包文件转换成浏览器可识别的js语法。
3、CSS预编译
webpack允许在开发中使用Sass 和 Less等原生CSS的扩展技术，通过sass-loader、less-loader将Sass 和 Less的
语法编译成浏览器可识别的css语法。
webpack的缺点：
1、配置有些繁琐
2、文档不丰富

2.安装Node.js

webpack基于node.js运行，首先需要安装node.js。
1.Node下载地址
2.选择安装目录
安装一直下一步即可，安装完检查path环境变量是否设置了
3.测试

node ‐v

返回当前node版本

3.安装NPM

1.下载NPM
node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本
2.设置包路径
包路径就是npm从远程下载的js包所存放的路径。
使用 npm config ls 查询NPM管理包路径
NPM默认的管理包路径在C:/用户/[用户名]/AppData/Roming/npm/node_meodules，为了方便对依赖包管理，我
们将管理包的路径设置在单独的地方，我设置在node.js的目录下，创建npm_modules和
npm_cache，执行下边的命令：
本教程安装node.js在D:\Program Files\nodejs下所以执行命令如下：

npm config set prefix "C:\Program Files\nodejs\npm_modules"
npm config set cache "c:\Program Files\nodejs\npm_cache"

在这里插入图片描述

3.安装webpack

webpack安装分为本地安装和全局安装：
本地安装：仅将webpack安装在当前项目的node_modules目录中，仅对当前项目有效。
全局安装：将webpack安装在本机，对所有项目有效，全局安装会锁定一个webpack版本，该版本可能不适用某个
项目。全局安装需要添加 -g 参数

1.本地安装：
在门户目录下

npm install --save-dev webpack 或 cnpm install --save-dev webpack
npm install --save-dev webpack-cli (4.0以后的版本需要安装webpack-cli)

2.全局安装加-g，如下：
全局安装就将webpack的js包下载到npm的包路径下。

npm install webpack -g 或 cnpm install webpack -g

3.安装webpack指定的版本：
本教程使用webpack3.6.0，安装webpack3.6.0：
进入webpacktest测试目录，运行：
cnpm install --save-dev webpack@3.6.0
全局安装：(推荐)

npm install webpack@3.6.0 -g或 cnpm install webpack@3.6.0 -g

测试：
在cmd状态输入webpack，出现如下提示说明 webpack安装成功

在这里插入图片描述

4.入门程序

4.1.定义模块

1.定义model01.js
序使用的加法运算的js方法抽取到一个js文件，此文件就是一个模块

// 定义add函数
function add(x, y) {
return x + y
}
// function add2(x, y) {
// return x + y+1
// }
// 导出add方法
export default add;
// module.exports ={add,add2};//如果有多个方法这样导出
// module.exports.add2 = add2//如果有多个方法也可以这样导出

2.定义main.js
main.js是本程序的js主文件，包括如下内容：
1、在此文件中会引用model01.js模块
2、引用vue.min.js（它也一个模块）
3、将html页面中构建vue实例的代码放在main.js中。

//导入model01
//var {add}=require("./model01")
import add from'./model01';
var Vue=require("./vue.min")
var vm=new Vue({
    el:'#app', //vm接管app区域的管理
    data:{
           name:'哈哈',
           num1:0,
           num2:0,
           result:0,
           url:"http://www.xuecheng.com",
           size:80,
           list:[1,2,3,4,5],
           user:{uname:'itcast',age:10},
           userlist:[
           {user:{uname:'itcast',age:10}},
           {user:{uname:'ithah',age:11}},
           ]
        },
        methods:{
           change:function()
           {
               //调用需要this
 this.result=add(Number.parseInt(this.num1),Number.parseInt(this.num2));
          

           }

        }
})

3.打包测试
1、进入程序目录（shift+右键可以在当然目录打开 powershell 与可以 cmd cd进入），执行webpack main.js build.js ，这段指令表示将main.js打包输出为 build.js文件
执行完成，观察程序目录是否出现build.js。
在html中引用build.js

<!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">
<!‐‐{{name}}解决闪烁问题使用v‐text‐‐>
<a v‐bind:href="url"><span v‐text="name"></span></a>
<input type="text" v‐model="num1">+
<input type="text" v‐model="num2">=
<span v‐text="result"></span>
<!‐‐{{num1+num2}}‐‐>
<!‐‐<input type="text" v‐model="result">‐‐>
<button v‐on:click="change">计算</button>
<!‐‐ 在Vue接管区域中使用Vue的系统指令呈现数据
这些指令就相当于是MVVM中的View这个角色 ‐‐>
</div>
</body>
<script src="build.js"></script>
<script>
</script>
</html>

5.webpack-dev-server

webpack-dev-server开发服务器，它的功能可以实现热加载并且自动刷新浏览器。
创建一个新的程序目录，这里我们创建webpacktest02目录，将webpack入门程序的代码拷贝进来，并在目录下创
建src目录、dist目录。
将main.js和model01.js拷贝到src目录。
在这里插入图片描述

5.1 安装配置

1.安装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文件，此文件中记录了程序的依赖。

2、配置webpack-dev-server
在package.json中配置script

{
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 10000"
    },
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

–inline：自动刷新
–hot：热加载
–port：指定端–open：自动在默认浏览器打开
–host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址

5.2 配置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: './src/vue_02.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
})
] 
}

5.3启动

进入目录下
在这里插入图片描述

npm run dev

自动刷新只有在修改这个src中的文件时才刷新
在这里插入图片描述

5.4debug调试

1.在webpack.config.js中配置：

devtool: 'eval-source-map',

2.在js中跟踪代码的位置上添加debugger

// 定义add函数
function add(x, y) {
debugger
return x + y
}

如果出现bug可以评论

TheBlindM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack入门

1.webpack介绍Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。Webpack 可以将js、css、png等多种静态资源进行打包，使用webpack有什么好处呢？1、模块化开发程序员在开发时可以分模块创建不同的js、 css等小文件方便开发，最后使用webpack将这些小文件打包成一个文件，减少了http的请求次数。webp...
复制链接

扫一扫