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