与webpack有类似功能的工具grunt/gulp
1webpack 是什么？
打包工具(WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。)在此之前先了解前端模块化的背景
前端的模块化 以及AMD/CMD/CommonJS/es6 Module
前端模块化的背景以及CommonJS、AMD、CMD的发展和演变：
https://www.cnblogs.com/futai/p/5258349.html
es6 模块导出和导入常用方式
//导出 mymodule.js
export default function(){
var a = 100;
}
//在其他文件使用时
import fn from 'mymodule'
fn();
CommonJs模块化常用方案
//导出
// module.js
let name = 'liakng xie';
let sayName = function () {
console.log(name);
};
module.exports = { name, sayName }
//使用
// 通过 require 引入依赖
let module = require('./module.js');
module.sayName(); // likang xie
AMD模块化方案
define(['module'], function() {
let name = 'likang xie';
function sayName() {
console.log(name);
}
return { sayName }
});
// 通过 require 引入依赖
require(['module'], function(mod) {
mod.sayName(); // likang xie
})
CMD模块化方案
定义模块、使用模块
define(function(require, exports, module) {
// 通过 require 引入依赖
var otherModule = require('./otherModule');
// 通过 exports 对外提供接口
exports.myModule = function () {};
// 或者通过 module.exports 提供整个接口
module.exports = function () {};
});
理解CommonJs、AMD、CMD、ES6模块 https://www.jianshu.com/p/67ce52c93392
Webpack其实就是一个打包工具，他的思想就是一切皆模块，css是模块，js是模块，图片是模块。并且提供了一些列模块加载(各种-loader)来编译模块。官方推荐使用CommonJs规范，但是也支持CMD、AMD、ES6模块
2 webpack可以做什么
打包各种资源 css、 图片 、less、sass、typescript
转译 es6->es5
压缩代码
...
3 使用
webpack 3.版本和 4.版本
安装 webpack
npm i webpack webpack-cli -D(--save-dev)
4.*版本的webpack是不需要写配置文件就可以打包的，但是一般不这么干,为了使用起来更加灵活一般还是要对其进行相关配置,可以使用npx webpack 进行零配置打包。
进行打包的命令可以在package.json的文件夹下去配置 将 "scripts": {
"test": "echo "Error: no test specified" && exit 1"
}
配置为 "scripts": {
"build": "webpack"
}之后可以使用npm run build 来进行打包
打包时如果有没有手动去配置打包规则的话会自动寻找项目下的src目录中的index.js(必须是index.js其他名字会报错找不到相关模块)文件，打包完成后将生成的打包文件(main.js))自动放在创建的dist文件夹下，如果配置了打包规则则按照打包规则来进行打包。
4 配置webpack.config.js文件
const path = require("path");
module.exports = {
mode: "development",
// 指定入口文件
//entry: "./src/index.js",
entry: {
main: "./src/index.js"
},
// 指定输出打包后的目录及文件
output: {
path: path.resolve("./dist") ,// 绝对路径
filename: "bundle.js"
}
}
webpack本身只打包js，假如需要打包其他模块 需要合适的loader 加载器
打包css文件 需要style-loader和css-loader
安装：npm install style-loader css-loader -D
css-loader 处理样式中@import url
style-loader 使用js把css样式作为style标签的内容插入到页面中
安装完之后需要在webpack.config.js里面进行配置才可以打包css文件
Html-webpack-plugin插件
1 作用 根据配置的html产生一个引入打包后的html以方便测试
2 安装 npm install html-webpack-plugin
3 在webpack.config.js里面进行配置
webpack-dev-server 插件
- 作用 配置开发服务器 执行命令npm run dev 自动监听是否有修改 然后打包 打开浏览器
2.安装 npm install webpack-dev-server -D
3.在package.json文件中配置 此处"scripts": {
"build": "webpack"
},改为"scripts": {
"build": "webpack",
"dev":"webpack-dev-server"
},
这样一有更新会立马自动将更新同步到浏览器视图中
打包图片
file-loader url-loader (url-loader是比file-loader优化的版本)
1 安装 npm i file-loader url-loader -D
2 配置 见webpack.config.js
less的打包
less
less less-loader style-loader css-loader
1 安装 npm i less less-loader style-loader css-loader -D
2 配置 见webpack.config.js
vue 打包
1 安装 npm i vue -S
npm i vue-loader vue-template-compiler-D
2 配置 见webpack.config.js
webpack手动配置的一个实例
项目目录
配置的package.json
手动配置的webpack.config.js文件
//此文件用来写webpack的相关配置，进行相关配置后就会根据配置过的信息来进行打包
//引入path模块
const path = require('path');
//引入生成html的模块
const HtmlCreate = require('html-webpack-plugin');
//vue打包用
const VueLoaderPlugin = require('vue-loader/lib/plugin');
//导出一个对象，里面包含设置的打包设置
module.exports = {
mode:'development',//此配置是用来去除打包时的警告信息 此处可以填写development和production 一个打包之后的代码有缩进，一个会对打包后的代码进行压缩
//指定打包的入口文件 将来打包时会自动寻找入口文件下的文件作为打包文件
// entry:'./src/index.js',
//指定输出打包后的目录和文件会自动创建
//以上可以写成如下的形式
entry:{
main:'./src/index.js'
},
output:{
path:path.resolve('./dist'),//绝对路径
//filename:'bundle.js' //指定打包后的文件名 一般为了好的体验这里通常采用另一种操作
//发布新版本，发现用户正在浏览老网页 需要刷新一次才能看新版
// 发新版时候 会把老目录全部删除 然后覆盖最新文件上去
// 增量覆盖
filename:"[name].[hash:12].js"
},
resolveLoader:{
modules:[path.resolve('./src/loader'),path.resolve("./node_modules")]
},
//配置其他文件的打包规则
module:{
rules:[
{
test:/\.js$/,
//自己写的loader添加到打包规则里，js在加载时都要先走这个规则，可以使用绝对路径
//use:[path.resolve('./loader/myloader.js')]
//或者使用一下方式 但是要配置resolveLoader中自己写的loader的路径地址
use:['myloader']
},
{
test:/\.css$/,//对css问价进行打包配置
loader:['style-loader','css-loader'] //引入对css文件处理的加载器
},
{
test:/\.(jpg|jpeg|png|svg|gif|woff)$/,
//use:['file-loader']
//对于某些体积较小的图片可以直接将其加入到html里面不必再打包到dist文件夹下
use:['url-loader?limit=40000']
},{
test:/\.less$/,
loader:['style-loader','css-loader','less-loader']
},{
test:/\.vue$/,
loader:['vue-loader']
}
]
},
plugins:[
/*
1.读取模板内容 2.得到产出文件 3.将产出文件作为script标签插入到html标签中 4.将html写入指定目录
*/
new HtmlCreate({
template:'./src/index.html',//将src目录下面的index.html当成html模板
filename:'index.html',//产出文件的名字 自己设置一般设置为index.html
//去除引入文件的双引号以便节省空间压缩体积
minify:{
removeAttributeQuotes:true
}
}),
// 请确保引入这个插件！//vue打包用
new VueLoaderPlugin()
]
}
以上便是手动做的一个webpack的配置，比较繁琐，所以在去创建vue项目的时候一般会使用vue的脚手架工具，脚手架工具对这些内容都做了配置，这会大大加快项目开发的效率。