ES Module 引入规范
导入
import Head from './head.js'
导出
functoun Head() {
// ....
}
export default Head
commonJS 模块引入规范
引入
var Head = requre('./dead.js)
导出
function Head () {
// ...
}
module.exports = Head
webpack 模块打包工具
安装webpack时,可输入 npm install webpack webpack-cli -D 等同于 npm install webpack webpack-cli --save-dev
webpack-cli 是能够在命令行运行webpack 或者 npx webpak 命令
安装webpack 指定版本号
npm install webpack@4.15.1
webpack 安装在当前项目时,用npx webpack -v 查看版本
查看npm 的版本好 npm info webpack
webpack 不建议装全局。因为多个项目时会有问题
初始化项目时,可直接输入 npm init -y
webpack 的配置文件
webpack.confin.js 文件配置
// webpack 模块
var path = require('path')
module.exports = {
// 默认为 production, 值有production(压缩版) 和 development(开发版)
mode: 'production',
// 入口文件 可多个,用对象方法实现
entry: './index.js',
// 出口文件及路径
output: {
filename: 'bundle.js',
// __dirname 文件当前目录 注意是两个下划线(_ _) __
path: path.resolve(__dirname, 'bundle')
}
}
在命令行输入 npx webpack 进行打包 ,没有webpack.config.js时,默认入口文件为根目录下得index.js , 输出文件为 dist文件下得main.js
文件名 webpack.confin.js 文件名不可错, (webpackconfin.js 报错结果)
ERROR in Entry module not found: Error: Can't resolve './src' in 'F:\hezs\webpack\code'
使用npm script 进行打包
在package.json 文件中。修改script对象
当运行 bundle命令时,会自动执行 webpack 这个命令, 效果
bundle 文件加下会有一个bundle.js 文件
bundle.js 就是打包好的文件,直接在项目中引用即可