webpack简单入门

最新推荐文章于 2021-09-23 14:36:42 发布

模棱两可2

最新推荐文章于 2021-09-23 14:36:42 发布

阅读量184

点赞数

本文链接：https://blog.csdn.net/qq_42312583/article/details/89353831

版权

是一个使用vue.js开发大型应用需要使用webpack打包工具

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包在这里插入图片描述

Webpack 可以将js、css、png等多种静态资源进行打包

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语法。

安装node.js
安装webpack，需要基于node.js 所有先安装node.js
https://nodejs.org/en/download/ 下载地址
选安装目录进行安装一直next即可安装完成后 cmd 里node ‐v 查看是否安装成功和版本

安装NPM
node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本

安装cnpm
输入命令，进行全局安装淘宝镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装后，我们可以使用以下命令来查看cnpm的版本
cnpm -v

nrm ls 查看镜像已经指向taobao

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

本地安装
进入webpacktest测试目录目录，运行：
只在我的项目中使用webpack，需要进行本地安装，因为项目和项目所用的webpack的版本不一样。本地安装就会
将webpack的js包下载到项目下的npm_modeuls目录下。
在项目目录下运行命令
npm install --save-dev webpack 或 cnpm install --save-dev webpack
npm install --save-dev webpack-cli (4.0以后的版本需要安装webpack-cli)

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

安装webpack指定的版本：

全局安装：npm install webpack@3.6.0 -g或 cnpm install webpack@3.6.0 -g

3.6.0版本

入门小案例：
先在某盘创建一个项目目录，
在这里插入图片描述
进入目录准备代码
html的代码

<body>
<div id="app">
    <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>

    <button v-on:click="change">计算</button>
</div>
</body>

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

build.js 不是自己写的，这就是打包形成的js

model01.js的代码：

var add = function (x, y) {
    return x+y;
}
var add2 = function (x, y) {
    return x+y+2;
}
module.exports.add = add;
// module.exports ={add,add2};//如果有多个方法这样导出

module.exports 导出方法

再准备一个main入口打包用的js

//导入model01.js
var {add} = require("./model01")
var Vue = require("./vue.min")//导入vue
var VM = new Vue({
    el:'#app',
    data:{
        name:'xxx',
        num1:0,
        num2:0,
        result:0,
        url:'http://www.baidu.com',
        size:11
    },
    methods:{
        change:function () {
            this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2))
        }
    }
});

都准备好了后，再来到目录运行cmd
输入 webpack main.js build.js
就可以把该目录下的js打包成一个bulid.js
接着就可以自动生成一个build.js
在这里插入图片描述

webpack-dev-server
webpack-dev-server开发服务器，它的功能可以实现热加载并且自动刷新浏览器。
再新建一个工作目录
将main.js和model01.js拷贝到src目录。
在这里插入图片描述
准备这2个目录和html加config
src 目录就是上个工程的vue 加入口加model01 html的放到了外边

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

"scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 5008"
  },

在package.json 中添加如上内容在第一个大括号内
–inline：自动刷新
–hot：热加载
–port：指定端
–open：自动在默认浏览器打开
–host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址

{
"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：可执行的命令

配置webpack.config.js
在webpacktest02目录下创建 webpack.config.js， webpack.config.js是webpack的配置文件。在此文件中可以配
置应用的入口文件、输出配置、插件等，其中要实现热加载自动刷新功能需要配置html-webpack-plugin插件。
html-webpack-plugin的作用是根据html模板在内存生成html文件，它的工作原理是根据模板文件在内存中生成一
个index.html文件。

html为

<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>

//引用html-webpack-plugin插件，作用是根据html模板在内存生成html文件，它的工作原理是根据模板文件在内存中生成一个index.html文件。
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',
    plugins:[
        new htmlwp({
            title: '首页',  //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'vue_02.html' //根据vue_02.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}

启动

使用webstorm，右键package.json文件，选择“Show npm Scripts

双击dev

在这里插入图片描述