打包工具

2022/05/15, 14:14:16 264 字 1.1m 夏天夏

webpack3

**打包构建:**npm脚本（package.json的script）可以直接设置./node_modules/.bin/webpack 快速启动webpack，或者使用npx webpack代替。

webpack.config.js配置

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

module.exports=xxx在本地导出对象，让外部目录var xxx=require(’./xxx’)引入
- import xxx from ’./xxx’ 也可以这样引入
exports{xxx}是es6的写法需要import {carousel} from ’./xxx’ 引入

parcel

全局安装和局部安装的打包命令不同，打包命令后面需要天项目入口。

# 全局安装执行方式
parcel index.html
# 局部安装的执行方式
./node_modules/.bin/parcel index.html
# 局部安装的执行方式（缩写版）
npx parcel index.html

踩过的坑 打包不成功请清除缓存和添加minify参数。parcel默认会过滤掉slot标签，所以需要加no-minify参数 npx parcel build index.js --no-cache --no-minify 入口文件的类型尽量不要省，因为会有同名不同类型的入口，如index.html和index.js。 npx parcel index.html

打包编译 webpack parcel