webpack是一个打包项目构建工具gulp 基于任务，而webpack 基于模块化处理的（监听文件的变化来重新编译）
在webpack中 所有文件都会被他视为模块
当你使用import 或者 require 导入一个文件时导入的那个文件就会被它视为模块
虽然说每一个文件都会被当做模块来处理 需要我们定义相对于后缀名称的文件格式 定制不同的处理器来处理
webpack需要使用全局安装
npm i -g webpack
npm i -g webpack-cli
webpack -v
4.17.2
创建项目
- src 目录
- main.js
- package.json
- webpack.config.js
loader （模块处理器）
1.css处理
style-loader// 就是把webpack处理好的样式变成一个js脚本当运行的候把js脚本的代码添加到dom中
css-loader
// 就是把css 文件处理成一个字符串
配置
rules: [ // 模块处理规则
{
test: /\.css$/, //正则
loader: ['style-loader', 'css-loader']
}
]
// 当webpack 发现有后缀名称为css 的导入模块时
// 就会使用我们安装的 'style-loader', 'css-loader' 来处理
2.less处理
less
less-loader
3.vue文件处理
vue-loader
webpack
vue-template-compiler
4.js文件处理 （兼容性）
babel-core
babel-loader
webpack-dev-server//就是一个开发版的服务器 自动热更新代码
html-webpack-plugi
npm i -g webpack-dev-server
html-webpack-plugin
概念
入口
程序的入口（它不直接运行代码。它负责解析和编译代码，运行代码的地方是浏览器）
module.exports = {//暴露一个对象出去，webpack去读
entry: __dirname + "/main.js", //唯一入口文件，__dirname是nodejs的一个全局变量，它指向当前执行脚本所在的目录（全路径，计算机绝对路径）
output: {
path: __dirname + "/public",//指定打包输出的目录(自动生成)
filename: "bundle.js"//指定打包输出的文件名称
},
//生成source-map供浏览器去读，映射源文件分离展示方便调试,用'#source-map'也可以
devtool: "#cheap-module-eval-source-map",
//配置loader来处理文件
module: {
rules: [{//一个loader的具体配置
test: /\.scss$/,//匹配的文件类型
use: [{//loader处理的顺序是该数组中从右到左的顺序
loader: 'style-loader'//将 JS 字符串生成为 style 节点
},{
loader: 'css-loader'//将 CSS 转化成 CommonJS 模块
},{
loader: 'sass-loader'//将sass编译成css
}]
},{
test: /\.(png|jpeg)$/,
use: [{
loader: 'url-loader',
options: {//配置额外参数
limit: 1024, //限制转base64的图片为1k(1024b)，超过1k的以url返回,设置此项需要安装依赖：file-loader，会将图片传到public下
outputPath: 'img/' //指定输出路径：放到public下的img文件下，如果没有则会自动新建,并且路片路径自动变成img/***.***
}
}]
}]
}
}
被webpack编译它不是被nodejs运行
编译出来的js 文件放入到html里运行
导入导出
webpack的编译机制和node的运行机制是一样的每一个文件都是一个模块 （需要像node一样导入导出使用了）在webpack里的导入导出 使用的是es6的语法规则当然兼容nodejsnodejs 里内置模块不能使用npm下载的第三方模块可以使用（但是该模块中不能包含nodejs的内置模块）
node的导入方式
const test = require('./test.js')
console.log(test)
es6的导入方式 默认导出的内容使用方式
import test from './test.js'
单独导出的使用方式
如果导入的模块使用了export 导出在导入时使用解构的方式导入
import { a, b } from './test.js'
可以把上面两条语句合并在一起
单独导出和默认导出的混合使用方式
import test, { a, b} from './test.js'
es6 还提供了一个全导入方法
import * as x from './test.js'
* as x 的意思是把 test.js里 默认导出和单独导出的合并在一起放到变量x里
console.log(x)
const a = 'ccc'
import { a as c , b } from './test.js'
如果单独导出的变量 和当前模块已有的变量发生冲突 可以使用别名(as)来解决
aasc 这里的as 是把a的变量名称改成c 来运行
console.log(a, c)
如果导出使用的是 es6模块语法 这里的node导入
使用的就是 import * as的语法
const test = require('./test')
console.log(test)
es6导出的 必须是默认导出 和单独导出进行分离使用的
console.log(test ,a, b)
function.module.exports = {
a: 100
}
exports.run = function() {
console.log(1)
}
// 在node里 exports 导出会被 module.exports 覆盖
// es6
// export default 可以不用写函数名称 类名称 变量名称都可以省略
// 在es6里和nodejs 机制不同 单独淡出和默认导出是分开的
// 默认导出
// 对应node语法 module.exports
export default function() {
return 100
}
// 对应node语法 exports.a = 100
export const a = 100
// 对应node语法 exports.b = function(){}
export function b() {
}
网友评论