无需每个项目都下载依赖的基于 webpack 全局安装的命令行工具_唤之的专栏文章_微信文章

zls-cli 是基于 webpack 的全局安装的命令行工具, 因为强迫症，所以使用 zls-cli 可以省去每个项目安装开发依赖的麻烦。同时以避免多个项目需同时维护多个webpack 配置的痛苦, 几分钟开始你的项目开发。

命令

安装

npm install zls-cli -g

# 速度过慢可以用淘宝源

npm install zls-cli -g --registry=https://registry.npm.taobao.org

如果你用的是Linux或Mac，可能会遇到权限不足的导致zls无法使用，所以请安装完成之后执行下面的命令给予权限。

# sudo npm install zls-cli -g

sudo chmod -R 777 $(npm config get prefix)/lib/node_modules/zls-cli

首次安装可能比较久，因为要把相关功能依赖全部下载安装完毕，不过相对于以后建立开发任何新项目都无需再下载任何依赖（npm instal），还是非常值得的。

使用

zls: 默认命令运行build
zls init : 初始化一个项目 ( app / electron )
- zls init -n : 使用默认配置初始化
- zls init -h : 查看初始化项目帮助
- ...
zls pack : 打包 ( 默认index.js )
zls -h: 查看帮助

配置

自定义配置文件

在执行命令之后添加 --config [path]

如果不指定或文件不存在默认使用根目录的zls.config.js

npm run dev --config demoConfig.js

# or 

yarn run dev --config demoConfig.js

Webpack配置

自定义Webpack配置有两种方式

直接修改webpack配置

module.exports = options => ({
  webpack(webpackConfig) {
      //webpackConfig 为当前配置对象
    return webpackConfig
  }
})

合并webpack配置

module.exports = options => ({
  webpack: {
    //编写你的webpack配置
  }
})

eslint规范

使用前请先在项目根目录安装依赖

npm install eslint babel-eslint eslint-loader eslint-plugin-import eslint-plugin-promise eslint-plugin-node eslint-plugin-html eslint-plugin-import eslint-plugin-standard --dev

可用 /* eslint-disable */ 关闭单个文件的eslint检测

module.exports = options => ({
  eslint: true,
  //eslintConfig: {}
})

开启 eslint fix

module.exports = options => ({
  eslintConfig: {fix: true},
})

更多选项请看 eslint-loader

开发/生产配置

生产/开发配置将与基础配置使用object.assign合并

module.exports = {
  production: {}, // used in `!options.dev`
  development: {} // used in `options.dev`
}

autoprefixer

autoprefixer插件默认使用，您可以使用配置文件中autoprefixer选项来调整它。

默认值配置：

module.exports = {
  autoprefixer: {
    browsers: ['ie > 8', 'last 4 versions']
  }
}

CSS预处理器

默认使用LESS CSS预处理器，所以如果您要使用,直接安装相关程序和依赖即可。

支持: sass scss stylus less,CSS预处理器的工作流程 custom css preprocessor -> postcss-loader -> css-loader.

如需SCSS:

yarn add node-sass sass-loader --dev

提取css样式

提取选项在生产模式中默认开启的，但是你也可以设置手工关闭

module.exports = {
 extract: false
}

代码压缩

代码压缩选项在生产模式中默认开启的，但是你也可以设置手工关闭

module.exports = {
 minimize: false
}

图片压缩

~~图片压缩选项只在生产模式中生效，考虑到开启之后编译时间会加长,所以默认是关闭状态~~

因为不常用,已移除,需要的自行安装 npm install -D image-webpack-loader

module.exports = {
 minimizeImage: true
}

Source Map

Source Map选项默认开启的，但是你也可以设置手工关闭

module.exports = {
 sourceMap: false
}

设置Html

默认情况下会编译一个index.html，你可以将它设置为 false 禁用掉表示不编译任何HTML文件

module.exports = {
 html: {
  title: '',//页面标题
  description: '',//页面描述
  template: '',//页面模板
  filename:'',//输出文件名
  minify:'',//压缩配置
  //...
 }
}

更多选项请看 html-webpack-plugin

输出文件名

设置自定义js、css、静态文件的文件名，也可只设置其中一项

module.exports = {
  filename: {
    js: '[name].[hash:8].js',
    chunk: '[name].[hash:8].js',
    css: '[name].[hash:8].css',
    static: 'static/[name].[hash:8].[ext]'
  }
}

输出文件夹

一般情况下html文件和其他文件输出到同一个文件夹的，但是如果需要把html文件输出到其他文件夹可以设置 distHtml

module.exports = {
  dist: 'dist',
//distHtml: 'dist'
}

忽略打包文件

可以设置一些依赖库不打包然后使用CDN直接引入到html里

module.exports = {
  externals: {
    'vue': 'Vue',
    'vue-router':'VueRouter',
    'vuex': 'Vuex',
    'axios': 'axios'
  },
}

打包分析

默认编译之后，结果会可视化的展示在 http://localhost:8888/,可以设置`false`禁用掉

module.exports = {
  analyzer: false,
}

复制静态资源文件

默认情况下，./static/文件夹将被复制到dist文件夹，你可以将它设置为 false 禁用掉

如果要复制其他文件夹，请使用数组

module.exports = {
  // 复制 ./src/public 到 /dist/static
  copy: [{from: './public', to: './static'}]
}

更多选项请看 copy-webpack-plugin

注入环境变量

定义变量

module.exports = {
  env: {
    name:'My name is zls.init'
  }
}
//可以在项目任何地方使用process.env.name

定义常量

module.exports = options => ({
  define: {
    __DEV__: JSON.stringify(options.dev)
  }
})

项目内使用

if (__DEV__) {
  // 执行一些在开发模式执行的代码
}

更多说明请看 DefinePlugin

打包格式

支持cjs、umd

如果是umd格式必须填写组件名称(moduleName)

module.exports = {
  format: 'umd',
  //moduleName: 'zls'
}

代理API请求

module.exports = {
  proxy: {
    '/api/foo': 'http://localhost:8080/api',
    '/api/fake-data': {
      target: 'http://github.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api/fake-data': ''
      }
    }
  }
}

栗子

//把所有/api开头的请求接口代理到http://api.73zls.com
module.exports = {
  proxy: {
    '/api': {
      target: 'http://api.73zls.com',
      changeOrigin: true,
    }
  }
}

更多说明请看 http-proxy-middleware

本地服务器

port

module.exports = {
 port: 3780
}

host

默认设置下host:localhost是不支持非本机访问的,如果要支持非本机访问可以设置成0.0.0.0

module.exports = {
 host: '0.0.0.0'
}

自定义服务器逻辑

module.exports = {
  setup(app) {
    app.get('/api', (req, res) => {
      res.end('这是一个API接口')
    })
  }
}

设置CDN

一般设置cdn之后会把项目里所有静态资源文件的路径改为cdnPath,但是有时候需要把图片独立出来设置的话可以使用 cdnImgaePath

无需每个项目都下载依赖的基于 webpack 全局安装的命令行工具

正文

命令

安装

使用

配置