Vue系列——webpack打包
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页面测试
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript" src="Cssdist/bundle.js">script>
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文件的所在位置