webPack
- 什么是webPack,从本质上讲webPack是一个现代的JavaScript应用的静态模块打包工具
- 前端模块化的一些方案:AMD、CMD、CommonJS、ES6
- webPack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的关系
- 而且不仅仅是JavaScript文件,我们的css、图片、json文件等等在webPack中都可以被当作模块来使用
- 将webPack中的各种资源模块进行打包合并成一个或多个包(bundle)
- 在打包的过程中,还可以对资源进行处理,比如压缩图片,将scss文件转成css,将ES6语法转成ES5语法,将typescript转成javascript等等操作
grunt/gulp的对比
-
grunt/gulp的核心是Task
我们可以配置一系列task,并且定义task要处理的任务
之后让grunt/gulp来一次执行这些task,而且让整个流程自动化
所以grunt/gulp也被称为前端自动化任务管理工具 -
我们来看一个gulp的task
下面的task就是将src下面的所有js文件转成ES5的语法
并且最终输出到dist文件夹中 -
什么时候用grunt/gulp
如果你的工程模块依赖非常简单,甚至是没有用到模块化的概念
只需要进行简单的合并、压缩,就使用grunt/gulp即可
但是如果整个项目使用了模块化管理,而且相互依赖非常强,我们就可以使用更加强大的webpack了 -
grunt/gulp和webpack有什么不同
grunt/gulp更加强调的是前端流程的自动化,模块化不是它的核心
webpack更加强调模块化开发管理,而文件压缩合并、预处理等功能,是他附带的功能
webpack的安装
必须依赖node环境
node为了可以正常执行很多代码,必须其中包含各种依赖的包npm工具(node packages manger)
- 安装webpack首先需要安装node.js,Node.js自带了软件包管理工作npm
- 查看自己的node状态, node -v
- 全局安装webpack: npm install webpack@3.6.0 -g
- 局部安装webpack:
cd 到对应的目录
npm install webpack@3.6.0 --save-dev
文件和文件夹解析
dist文件夹:用于存放之后打包的文件
src文件夹:用于存放我们写的源文件
- main.js :项目的入口文件
- index.html: 浏览器打开展示的首页面
- package.json: 通过npm init生成的,npm包管理的文件(暂时没有用上,)
模块化
导入和导出
早期
//aaa.js 导出
moduleA = (function(){
obj = {
};
var flag =false;
function sum(){
}
obj.flag = flag;
obj.sum = sum;
return obj
})()
//bbb.js
console.log(moduleA.flag )//相当于导入
commonjs
//aaa.js文件
//导出
modlue.exports ={
flag:true,
test(a,b){
}
}
//导入
let {
test,demo,flag}=require('./aaa.js')
es6
export flag =true;
export function sum(){
}
export class person{
}
或
export{
flag,sum}
import{
flag,sum}from './aaa.js'
直接webpack不用指明路径的配置
需要在工程路径下简历一个文件webpack.config.js文件,配置;
- entry: 文件的输入路径
- output:文件的输出路径
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundle.js",
},
}
path是一个node库,如果需要是用需要执行npm init
package.json中定义启动
我们可以在package.json中的scripts中定义自己的执行脚本
简化执行命令,在scripts对象中配置
如:“build”:“webpack”
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":</