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),还是非常值得的。
在执行命令之后添加 --config [path]
如果不指定或文件不存在默认使用根目录的zls.config.js
- npm run dev--config demoConfig.js
- #or
- yarn run dev--config demoConfig.js
自定义Webpack配置有两种方式
直接修改webpack配置
- module.exports = options = >({
- webpack(webpackConfig) {
- //webpackConfig 为当前配置对象
- return webpackConfig
- }
- })
合并webpack配置
- module.exports = options = >({
- webpack: {
- //编写你的webpack配置
- }
- })
使用前请先在项目根目录安装依赖
- 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检测
- /* eslint-disable */
- module.exports = options = >({
- eslint: true,
- //eslintConfig: {}
- })
- module.exports = options => ({
- eslintConfig: {fix: true},
- })
更多选项请看 eslint-loader
生产/开发配置将与基础配置使用object.assign合并
- module.exports = {
- production: {}, // used in `!options.dev`
- development: {} // used in `options.dev`
- }
autoprefixer插件默认使用,您可以使用配置文件中autoprefixer选项来调整它。
默认值配置:
- module.exports = {
- autoprefixer: {
- browsers: ['ie > 8', 'last 4 versions']
- }
- }
默认使用LESS CSS预处理器,所以如果您要使用,直接安装相关程序和依赖即可。
支持: sass scss stylus less,CSS预处理器的工作流程
- custom css preprocessor -> postcss-loader -> css-loader.
如需SCSS:
- yarn add node-sass sass-loader --dev
提取选项在生产模式中默认开启的,但是你也可以设置手工关闭
- module.exports = {
- extract: false
- }
代码压缩选项在生产模式中默认开启的,但是你也可以设置手工关闭
- module.exports = {
- minimize: false
- }
图片压缩选项只在生产模式中生效,考虑到开启之后编译时间会加长,所以默认是关闭状态
因为不常用,已移除,需要的自行安装
- npm install -D image-webpack-loader
- module.exports = {
- minimizeImage: true
- }
Source Map选项默认开启的,但是你也可以设置手工关闭
- module.exports = {
- sourceMap: false
- }
默认情况下会编译一个index.html,你可以将它设置为
禁用掉表示不编译任何HTML文件
- false
- 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'
- }
- 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
- module.exports = {
- port: 3780
- }
默认设置下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之后会把项目里所有静态资源文件的路径改为cdnPath,但是有时候需要把图片独立出来设置的话可以使用
- cdnImgaePath
- module.exports = {
- cdnPath: '',
- //cdnImagePath: ''
- }
默认情况下,输出文件将包含[hash],所以为了不产生多余的无用文件,我们需要删除旧文件,但是你也可以禁止它
- module.exports = {
- cleanDist: false
- }
设置@别名
设置 @ 表示的目录,默认为项目src目录,比如 import 是可以简写
- import App from '@/components/App'
- module.exports = {
- rootDirectory: 'src'
- }
** 使用完整构建
默认使用运行时构建
- module.exports = {
- templateCompiler: false
- }
本构建工具默认是构建vue项目的(因为本人需要),如果想要用来构建react也是可以的,只要安装下react包和依赖即可。
安装react与依赖
- npm i - D react react - dom babel - preset - react react - hot - loader
配置config
- let presetReact = require.resolve('babel-preset-react')
- module.exports = (options,defaulto, require) => {
- defaulto.babel.presets.push(presetReact)
- return {
- babel: defaulto.babel,
- }
- }
开发模式
- zls - c - d
编译打包
- zls - c
- module.exports = {
- entry: {
- client: './src/index.js',//必须,不能动
- login: './src/login.js'//追加一个登录页面
- },
- hmrEntry: [ 'authorize', 'client' ],//设置监听热更新
- html: [
- {
- title: '首页',
- filename: 'index.html',
- excludeChunks: ['login']//排除登录页面注入进来
- }, {
- title: '登录',
- filename: 'login.html',
- excludeChunks: ['client']
- },
- ],
- }
灵活运用 html-webpack-plugin 可以实现更多需求
直接在项目根目录install指定的vue版本即可
- npm install - D vue
如果有任何意见或建议,欢迎交流。
广州前端开发,群号码:519033606
深圳前端开发,群号码:170761660
©2017
影浅, Inc.
来源: https://juejin.im/entry/5a2a54326fb9a0451238dcc9