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的版本
Vue系列——webpack打包_第1张图片

将下面的两句胡粘贴到package.json的末尾
Vue系列——webpack打包_第2张图片

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

你可能感兴趣的:(Vue系列——webpack打包)