npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jay-webpack-scaffold

v1.1.21

Published

基于webpack4的前端多入口架构方案,multi entry packaging for front end based on Webpack4

Downloads

25

Readme

基于webpack4

快速使用

    yarn global add webpack-scaffold-cli;
    jay-webpack init <project-name>;

关于前端工程化

前端野蛮生长的时代已经过去了。随着前端的发展,越来越复杂的业务,各种各样的插件模块依赖关系,项目复杂度的提升,开发成本越来越高。webpack就是解决了这一系列的问题。你可以利用webpack管理各种资源,也可以提前享受es6语法的便利,也可以规范成员之间的开发规范,等等。

功能列表

  1. 模块化管理资源文件,解析编译ES6语法
  2. 使用jslint,强制校验js语法,规范js书写规则,并自动修复部分语法格式问题
  3. 使用styleLint,强制校验css,less语法,规范书写css,less规则
  4. 编译less文件,自动添加浏览器前缀
  5. 压缩js,css文件
  6. 使用PurifyCSS、OptimizeCssAssets,去除多余css(未被使用),减少css大小,优化css结构,减少50%-80%的文件大小
  7. 支持iconfont字体文件
  8. 自动引入html5shiv、respond,兼容h5标签以及响应式
  9. 支持vue库和element组件库
  10. 以contenthash值,生成文件名,用于更新浏览器缓存
  11. 多线程打包加载资源,加快编译速度

下载依赖

  yarn add jay-webpack-scaffold

配置文件

  cp ./node_modules/jay-webpack-scaffold/webpack/config.dist.js ./webpack-config.js

根据需求调整相应目录

配置文件参数

  entry: 需要编译输出的js 根路径
  output: 输出的路径
  mainJs: 全局使用的js文件路径
  lessPath: 需要编译输出的less 根路径,该目录下,都会被编译输出
  publicPath: 开发环境下,使用路径
  author: 作者名称
  removePattern: 不需要被输出的文件路径 正则表达式,例如 /^\/css\/.*\.js?$/,表示css目录下的所有js文件都不输出(当less作为入口文件时,会输出js文件)
  purifyCssPaths: 被使用到css的所有文件地址,如html页面和js,它会过滤除了这些被使用的css样式
  copyLibs: 需要拷贝的类库,可以拷贝目录,也可以拷贝单独文件
  alias: 引用别名,加快编译速度
  libs: js类库目录,每个文件都会单独输出,可以对已有的类库模块封装输出
  serverPort: 服务端口,
  assetPath: 资源路径与contenthash值对应关系(默认生成json,便于服务端渲染引用地址)
  assetJs: 是否生成js(可以被前端使用)

纯前端如何利用hash,生成资源路径

   <script type="text/javascript" src="dist/webpack.assets.js?v=1"></script>
    <script>
        document.write('<link href="' + window.staticMap['css/page/app'].css +'" rel="stylesheet" \/>');
        document.write('<script src="' + window.staticMap['js/index/index'].js +'><\/script>');
    </script>

服务端如何利用hash,生成资源路径

    //配置文件 assetJs参数设置为 false
    //node 
    require('/dist/webpack.assets.json');

代码格式化配置

配置js代码风格

  ./node_modules/.bin/eslint --init

修复js代码格式

./node_modules/.bin/eslint --fix filepath

规则列表:https://eslint.org/docs/rules/

配置样式代码风格

项目根目录 .stylelintrc

{
    "extends": "stylelint-config-standard"
}

忽略文件配置 .stylelintignore 规则列表:https://stylelint.io/user-guide/rules/

开发说明

规范:

  1. 默认加载全局的css和js文件,每个页面单独具有一个css文件和js文件
  2. 配置参数lessPath,该目录下的每个less文件都会默认编译输出成css文件,被每个页面使用
  3. 配置参数entry,目录下的index.js命名的文件将会作为编译输出
  4. 配置参数mainJs, 全局加载的js
  5. 由于PurifyCSS(过滤html和js中未被使用到的样式)过滤了未被使用的css样式,导致在页面中使用新的样式不生效(因为webpack没有监听html文件的变化,这时你需要重启服务)

命令(scripts)

  "scripts": {
    "build": "NODE_ENV=production settingPath='/webpack-config.js' webpack --config    '/node_modules/jay-webpack-scaffold/webpack/webpack.js'",
    "dev": "NODE_ENV=development settingPath='webpack-config.js' webpack-dev-server --config '/node_modules/jay-webpack-scaffold/webpack/webpack.js'",
  }

你也可以这样使用 webpack.config.js

const webpackConfig = require('jay-webpack-scaffold');
module.exports = webpackConfig;
// 可以自主配置loadeer,plugin,及其他参数

package.json

  "scripts": {
    "build": "NODE_ENV=production settingPath='/webpack-config.js' webpack --config    'webpack.config.js'",
    "dev": "NODE_ENV=development settingPath='webpack-config.js' webpack-dev-server --config 'webpack.config.js'",
  }

本地开发环境执行以下命令:

npm run dev

它将会文件生成好,放入内存中。自动监听文件变化

生产环境执行以下命令:

npm run build

它将会生产静态资源文件到你定义的目录下

项目中使用

ngixn配置

location ~ ^/dist {
	if (-f $root_dir/dev.lock){
      proxy_pass  http://127.0.0.1:8082;
	}
}

任何/dist/* 的请求,都会代理到http://127.0.0.1:8082,根据不同需求相应配置

异常情况

npm run dev 执行报错

  1. 有可能依赖没有下载完成,执行yarn
  2. 有可能端口被占用 执行以下命令
lsof -i:8082 (查看占用端口进程)
 kill -9 PID (pid 为进程id号)

参与开发

  1. 下载项目: git clone https://github.com/Jay-tian/webpack-scaffold.git
  2. 启动服务:进入项目根目录,执行 npm run dev
  3. 将会打开 http://127.0.0.1:8082/,资源文件在src下,修改代码将会时时生效
  4. http://127.0.0.1:8082/webpack-dev-server, 该路径提供了编译输出的资源路径(资源不是实体文件)
  5. 欢迎提交merge request
  6. QQ:806338233