Vue系列——webpack打包

最新推荐文章于 2024-06-07 17:03:35 发布

EvilKingyhq

最新推荐文章于 2024-06-07 17:03:35 发布

阅读量428

点赞数

文章标签： vue java js

本文链接：https://blog.csdn.net/EvilKingyhq/article/details/104446463

版权

webpack打包

1.为什么需要打包

将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
将代码打包的同时进行混淆，提高代码的安全性。

2.打包是什么

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分
析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多
种静态资源 js、css、less (扩展css样式)转换成一个静态文件，减少了页面的请求。

3.打包的简单使用

1.先安装webpack
idea中执行：
npm install webpack
npm install webpack-cli
这个很大需要下载很久

2.测试步骤

使用import/export

2.1：建立两个js文件a.js/b.js
a.js

export default {
    sum(a,b){
        return a+b;
    }

}

b.js

import util from './a.js'
console.log(util.sum(1,5));

2.2：在命令栏输入命令

webpack b.js -o dist/bundle.js

2.3：新建测试的html文件，导入新产生bundle.js文件

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

使用require/define的方式

2.1：建立两个js文件a.js/b.js
a.js

var a = "a模块";
var b = require('./b.js');
console.log(b);

b.js

define(function () {
    var b = "b模块";
    return b;
});

2.2：在命令栏输入命令

webpack a.js -o dist/bundle.js

2.3：新建测试的html文件，导入新产生bundle.js文件

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

4.Js打包-配置文件

为什么使用js打包配置
上面我们每次在打包的时候，都要输入 webpack src/a.js -o dist/bundle.js 这个命令，比较麻烦，所以我们可以按照下面的方式，新建一个js文件，到时候打包的时候，只需要运行webpack 命令就可以进行打包

新建配置文件: webpack.config.js ，该文件与项目根处于同级目录

var path = require("path");
	module.exports = {
		entry: './a.js',//入口，就是需要打包的js文件
		output: {
			path: path.resolve(__dirname, './dist'),//打包到什么位置
			filename: 'bundle.js'//打包出来的文件的名字
	}
}

当我们需要打包的时候，我们就在命令窗口输入webpack命令就可以执行打包命令

5.Css加载

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。
loader 通过在 require() 语句中使用 loadername! 前缀来激活，或者通过 webpack 配置中的正则表达式来自动应用 -
vue-loader 转换vue组件 *.vue
css-loader 加载css文件
babel-loader 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5

简单实用，打包css文件
1.安装loader

npm install style-loader --save-dev
npm install css-loader --save-de

2.准备css文件
css文件: css/index.css:

span{
    background-color: red;
}

3.在另一个准备的js文件中引入css文件

require('../css/index.css')

4.在webpack.config.js文件引入下面代码

var path = require("path");
module.exports = {
    entry: './web/js/a.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,     //匹配文件规则
                use: ['style-loader', 'css-loader']    //匹配后使用什么加载器进行模块加载
                // webpack use的配置，是从右到左进行加载的
            },
        ]
    }
}

5.准备html页面测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script type="text/javascript" src="Cssdist/bundle.js"></script>
 <!--<link rel="stylesheet" href="css/index.css"/>-->
 </head>
<body>
    <span>这条语句用了打包后的Css样式</span>
</body>
</html>

6.热更新web服务器（这个我没有试出来）

在前端加个服务器
简单实用步骤
1）安装插件：npm install webpack-dev-server --save-dev
2）添加启动脚本
在package.json中配置script

  "scripts": {
    "dev": "webpack-dev-server --inline  --progress --config ./webpack.config.js",      },

–inline：自动刷新
–hot：热加载
–port：指定端口
–open：自动在默认浏览器打开
–host：可以指定服务器的 ip，不指定则为127.0.0.1

3）更改dev的版本
在这里插入图片描述

将下面的两句胡粘贴到package.json的末尾
在这里插入图片描述

然后就可以访问http:localhost:8080/test.html了就是html文件的所在位置

EvilKingyhq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue系列——webpack打包

webpack打包1.为什么需要打包将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。将ES6的高级语法进行转换编译，以兼容老版本的浏览器。将代码打包的同时进行混淆，提高代码的安全性。2.打包是什么Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态...
复制链接

扫一扫