webpack打包使用
关于模块化的好处什么、其他的如：AMD、CMD、CommonJS等模块化的介绍、规范这里就不多说了，直接就说现在流行的ES6模块化及webpack打包的基本使用。
ES6模块化规范：
1、每个js文件都是一个独立的模块；
2、导入模块成员使用import关键字；
3、暴露模块成员使用export关键字；
ES模块化的基本语法：
默认导入和默认导出：
a、默认导出语法：export default 默认导出的成员
b、默认导入语法：import 接收名称 from ‘模块标识符’
//定义私有成员a和c
let a = 10;
let c = 20;
//外界访问不到变量d 因为它没有暴露出来
let d = 30;
function show() {}
//将本模块中的私有成员暴露出去，供其他模块使用
//注意：在每个模块中，只允许使用唯一的一次export default，否则会报错
export default {a,c,show,
}
在js文件中默认导出：
//导入模块成员
import m1 from './js/m1.js'
console.log(m1);
注意：每个模块中，只允许使用唯一的一次export default，否则会报错。
按需导入和按需导出
a、按需导出语法：export let s1=10;
b、按需导入语法：import {s1} from ‘模块标识符’；
//每个模块中，可以使用多次按需导出
//向外按需导出变量
export let s1='aaaa';
export let s2='bbbbb';
//向外导出方法
export function say() {}
在js文件中按需导入：
//如果想修改导入是的名称可以使用as
import {s1,s2 as ss2,say} from './js/m2.js'console.log(s1);
//通过as修改了导入的名称 s2就不能使用 需要使用ss2
console.log(ss2);
如果在同一个js文件中有默认和按需导出，使用时也存在默认和按需导入可以使用以下方式：
//m1 是按照默认导入的 {}是按照需要导入的
import m1,{} from './src/js/m1.js'
直接导入并执行模块代码
如果只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，可以使用直接导入并执行模块代码。
直接导入并执行模块代码语法：import ‘模块标识符’
for (let i = 0; i < 10; i++) {console.log(i);
}
在js文件中直接导入并执行模块代码：
import './js/m3.js'
下面是一个通过jQuery实现的隔行变色的简单案例：
a、新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件package.json
b、新建src源代码目录
c、新建scr->index.html首页
d、初始化首页基本的结构
f、运行npm install jquery -S 命令，安装jQuery
g、通过模块化的形式，实现列表隔行变色效果
index.html文件：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul><li>这是第1个li</li><li>这是第2个li</li><li>这是第3个li</li><li>这是第4个li</li><li>这是第5个li</li><li>这是第6个li</li><li>这是第7个li</li><li>这是第8个li</li><li>这是第9个li</li>
</ul>
</body>
</html>
index.js文件：
import $ from 'jquery'
$(function () {$("li:odd").css('backgroundColor','red');$("li:even").css('backgroundColor','blue');
})
在浏览器中打开index.html文件，发现并没得到想要的效果，在浏览器控制台看到了错误信息，这是因为使用了ES6模块化，浏览器不兼容导致的，这时就需要通过webpack对代码进行重新打包了。
webpack是一个流行的前端项目构建工具(打包工具)，可以很好的解决上面遇到的问题，它提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等强大功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。
webpack官网地址
在项目中安装和配置webpack
a、运行npm install webpack webpack-cli -D命令，安装webpack相关的包；
b、在项目根目录中，创建名为webpack.config.js的webpack配置文件；
c、在webpack的配置文件webpack.config.js中，初始化如下基本配置：
module.exports={//mode指定构建模式//development 开发模式 不会对代码进行压缩 混淆等，编译速度快//production生成 对代码进行压缩 混淆等，编译速度慢mode:'development'
}
d、在package.json配置文件中的scripts节点下，新增dev脚本如下:
"scripts":{//初始化时就存在的"test": "echo \"Error: no test specified\" && exit 1",//新增webpack打包运行配置 通过npm run 执行"dev":"webpack"
}
e、在终端运行npm run dev命令，启动webpack进行项目打包
d、将index.htmljs文件的引入进行修改，修改为webpack打包输出的js文件路径
注意：
1、webpack打包默认入口是src/index.js文件，路径和文件不对，打包时会报找不到src/index.js相关的错误；
2、webpack打包默认输出为dist/main.js；
配置打包的入口和出口
webpack的4.x版本中默认约定：
a、打包的入口文件为src->index.js
b、打包的输出文件为dist->main.js
如果要修改打包的入口和出口，可在webpack.config.js中新增如下配置：
const path=require('path');//导入node.js中专门操作路径的模块
module.exports={entry:path.join(__dirname,'./src/js/index.js'),//配置打包入口文件的路径output:{path:path.join(__dirname,'./dist'),//配置输出文件的存放路径filename:'bundle.js'//输出文件的名称}
}
配置webpack自动打包
通过上面的步骤，已经实现了webpack打包了，但是每次代码改动，都需要运行npm run dev命令进行打包，影响开发效率，通过下面可以配置webpack的自动打包，代码变动后就不用每次都运行npm run dev命令了。
a、运行npm install webpack-dev-server -D命令，安装支持项目自动打包的工具
b、修改package.json->scripts中的dev命令，如下：
"scripts":{"dev":"webpack serve"
}
c、将src->index.html中，script脚本的引用路径，修改为’/buldle.js’
d、运行npm run dev命令，重新进行打包
e、在浏览器中访问http://localhost:8080地址，查看自动打包效果
注意：
1、webpack-dev-server会启动一个实时打包的http服务器；
2、webpack-dev-server打包生成的输出文件，默认放到了项目根目录中，是放在内存中，是虚拟的，看不见的；
3、webpack4.x版本配置的是"dev":“webpack serve”，之前的配置是:“dev”:“webpack-dev-server”；
这样就实现了webpack自动打包了，代码变动保存后，浏览器会时时更新，不过会发现使用浏览器打开http://localhost:8080地址时，还需要进入到src文件中的入口文件index.html才可打开看到效果，通过下面配置，可以在访问http://localhost:8080后，直接打开index.html入口文件。
配置html-webpack-plugin生成预览页面
a、运行npm install html-webpack-plugin -D命令，安装生成预览页面的插件；
b、修改webpack.config.js文件头部区域，添加如下配置信息：
//导入生成预览页面的插件 得到一个构造函数
const HtmlWebpackPlugin=require('html-webpack-plugin');
//创建插件的实例对象
const htmlPlugin=new HtmlWebpackPlugin({template:'./src/index.html',//指定要用到的模块文件filename:'index.html'//指定生成的文件名称，该文件存在于内存中，在项目的根目录
});
c、修改webpack.config.js文件中向外暴露的配置对象，新增如下配置节点
module.exports={//plugins数组是webpack打包期间会用到的一些插件列表plugins:[htmlPlugin]
}
通过上面配置就可以在访问http://localhost:8080时，直接访问index.html入口文件，看到效果了，但是如果想在执行完npm run dev命令后自动打开浏览器展示效果，可以按照下面的配置进行配置。
配置自动打包相关参数
package.json中的配置
–open 打包完成后自动打开浏览器页面
–host配置id地址
–port配置端口
修改package.json文件中的srcipts中的dev配置：
"scripts":{"dev":"webpack serve --open --host 127.0.0.1 --port 8888"
}
webpack中的加载器
在实际开发过程中，webpack默认只能打包处理.js后缀结尾的模块，其他非.js后缀结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错。
loader加载器可以协助webpack打包处理特定文件模块，比如：
less-loader可以打包处理.less相关的文件；
sass-loader可以打包处理.scss相关的文件；
url-loader可以打包处理css中与url路径相关的文件;
打包处理css文件
a、运行npm install style-loader css-loader -D命令，安装处理css文件的loader
b、在webpack.config.js的module->rules数组中，添加loader规则如下：
//所有第三方文件规模的匹配规则
module:{rules:[//其中test表示匹配的文件类型(正则表达式)//use 表示对应要调用的loader{test:/\.css$/,use:['style-loader','css-loader']}]
}
注意：
1、use数组中所指定的loader顺序是固定的，顺序错乱会导致报错；
2、多个loader的调用顺序是：从后往前调用
打包流程是：
先将css的文件交给css-loader进行处理，处理完后，再交给style-loader进行处理，处理好后，如果前面没有对应的loader了，这时就会交给webpack进行打包css文件。
打包处理less文件
a、运行npm install less-laoder less -D命令
b、在webpack.config.js的module->rules数组中，添加loader规则如下：
module:{rules:[{test:/\.less$/,user:['style-loader','css-loader','less-loader']}]
}
注意：
安装less-loader必须要安装less，less-loader依赖于css-loader和style-loader
打包处理scss文件
a、运行npm install sass-loader node-sass -D命令
b、在webpack.config.js的module->rules数组中，添加loader规则如下：
module:{rules:[{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}]
}
c、在webpack.config.js的module-rules数组中，修改css的loader规则如下：
module:{rules:[{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}]
}
打包样式表中的图片和字体文件
a、运行npm install url-loader file-loader -D命令，file-loader是url-loader的内置依赖项
b、在webpack.config.js的module->rules数组中，添加loader规则如下：
module:{rules:[//前面的是图片 后面的是字体{test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=16940'}]
}
其中?之后的是loader的参数项，limit用来指定图片的大小，单位是字节(byte)，只有小于limit大小的图片，才会被转成base64图片，将图片文件转换为base64编码并载入浏览器能够减少http请求数，提高加载效率，但是会增大了js或html文件的体积。
打包处理js文件中的高级语法
a、安装babel转换器相关的包：npm install babel-loader @babel/core @babel/runtime -D
b、安装babel语法插件相关的包：npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
c、在项目根目录中，创建babel配置文件babel.config.js，并初始化配置如下：
module.exports={presets:['@babel/preset-env'],plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}
d、在webpack.config.js的module->rules数组中，添加loader规则如下：
module:{rules:[//exclude为排除项，表示babel-loader不需要处理node_modules中的js文件{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}]
}
Vue单文件组件
vue单文件的组成结构：
template:组件的模块区域
script:业务逻辑区域
style:样式区域
<template>
<!--这里用于定义vue组件的模板内容--><div><h1>这是App根组件</h1></div>
</template>
<script>
// 这里用于定义vue组件的业务逻辑
export default {data(){//返回私有数据return {};},methods:{}
}
</script>
<style scoped>/*这里用于定义组件的样式 添加scoped 防止组件之间的样式冲突*/h1{color: red;}
</style>
webpack中配置vue组件的加载器
a、运行npm install vue-loader vue-template-compiler -D命令，vue-template-compiler是vue-loader的内置依赖项
b、在webpack.config.js配置文件中，添加vue-loader的配置如下：
const VueLoaderPlugin=require('vue-loader/lib/plugin');
module.exports={module:{rules:[{test:/\.vue$/,ues:'vue-loader'}]},plugins:[//创建插件实例new VueLoaderPlugin()]
}
在webpack项目中使用vue
a、运行npm install vue -S 安装vue
b、在src-index.js入口文件中，通过import Vue from 'vue’来导入vue构造函数
c、创建vue实例对象，并指定要空的el区域
d、通过render函数渲染App根组件
//1、导入vue构造函数
import Vue from 'vue'
//2、导入app根组件
import App from '../components/App.vue'
const vm=new Vue({//3、指定vm实例要控制的页面区域el:'#app',//4、通过render函数，把指定的组件渲染到el区域中render:h->h(App)
});
webpack打包发布
上线之前需要通过webpack将应用进行整体打包，可以通过package.json文件配置打包命令。
在package.json文件中配置webpack打包命令:
"scripts":{//用于打包的命令"build":"webpack",//用于开发调试的命令"dev":"webpack serve --open --host 127.0.0.1 --port 3000"}
该命令默认加载项目根目录中的webpack.config.js配置文件；
运行npm run build 就会去执行webpack 然后就会去读取根目录下的webpack.config.js配置文件，获取入口文件、输出路径等，打包成功后，就可以将打包好的文件发布到服务器
代码地址
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！